Javascript - HTML5 Player which plays/shows videos and images in sequence

Question

Requirement :

I have json data which kinda looks like this :

{
  "panes": [

    { "type" : "media",
     "left": 0 ,
     "top": 0 ,
     "width": 800 ,
     "bottom": 800 ,
     "mediaList": [
       {
         "mediaUrl": "http://www.w3schools.com/html/movie.mp4",
         "duration": 0,
         "mediaType": "mp4",
         "mediaCategory": "video"

       },
       {
         "mediaUrl": "t1.jpg",
         "duration": 5,
         "mediaType": "jpeg",
         "mediaCategory": "img"
       },
       {
         "mediaUrl": "http://www.w3schools.com/html/mov_bbb.mp4",
         "duration": 0,
         "mediaType": "mp4",
         "mediaCategory": "video"
       }
     ]
    }
    ,
    {
      "type": "media" ,
      "left": 800 ,
      "top": 0 ,
      "width": 800 ,
      "bottom": 800 ,
      "mediaList": [
        {
          "mediaUrl": "t1.jpg",
          "duration": 20,
          "mediaType": "jpeg",
          "mediaCategory": "img"
        }
      ]
    }
  ]
};

As seen in Json, say, I have two panes. In first pane, there are 3 medias, while in second there is 1. I need to arrange panes based on their positions which i am doing correct. But then, I need to play mediaList for that pane.

So here, say first pane will be created. Then I am creating dynamic video/audio element. What should happen is, In the given sequence in json, media should play, so first video should play in pane1, once video ends, image should be visible for given duration. After that duration, third video should play.

At the same time, in second pane, the given medias should be displayed for given duration.

My code :

var obj = json;
for (i = 0; i < obj["panes"].length; i++) {
  var innerObj = obj["panes"][i];
  if (innerObj["type"] == "media") {
    var mediaObj = innerObj["mediaList"];
    absElement(mediaObj, innerObj["left"], innerObj["top"], innerObj["width"], innerObj["bottom"], null);
  }

}

function absElement(obj, x, y, w, h, j) {

  //for (i = 0; i < obj.length; i++) {

  if (j == null) j = 0;
  var type = obj[j]["mediaCategory"];
  let d = document.createElement(type);
  d.style.position = "absolute";
  d.style.left = x + "px";
  d.style.top = y + "px";
  d.style.width = w + "px";
  d.style.bottom = h + "px";

  //case 1 : first one is video
  if (type == 'video') {
    d.autoplay = true;
    d.src = obj[j]["mediaUrl"];
    d.preload = "none";
    d.onended = function () {
      // d.parentNode.removeChild(d);
      // i++;
      pushElements(obj, j++);
    }
  }
  else if (type == "img") {
    d.src = obj[j]["mediaUrl"];
    setTimeout(pushElements(obj, j++), obj[j]["duration"] * 1000);

    // i++;
  }

  document.body.appendChild(d);

}
//}

function pushElements(element, j) {
  absElement(element, element["left"], element["top"], element["width"], element["bottom"], j);
} 

It plays first video, then same video appends. Second pane is not creating. Maximum call stack size exceeded error is coming. I am not sure where I am going wrong.