Javascript-HTML5播放器，按顺序播放/显示视频和图像

要求：

我有json数据，看起来像这样：

{
  "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"
        }
      ]
    }
  ]
};

如Json所示，比如说，我有两个窗格。在第一个窗格中，有3个媒体，而在第二个窗格中，有1个媒体。我需要安排窗格的基础上，他们的立场，我正在做正确的。但是，我需要为该窗格播放mediaList

在这里，假设将创建第一个窗格。然后我创建动态视频/音频元素。应该发生的是，在json中给定的序列中，媒体应该播放，所以第一个视频应该在pane1中播放，一旦视频结束，图像应该在给定的持续时间内可见。在这段时间之后，应该播放第三个视频

同时，在第二个窗格中，应在给定的持续时间内显示给定的媒体

我的代码：

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);
} 

var obj=json；
对于（i=0；i

它播放第一个视频，然后附加相同的视频。第二个窗格未创建。超过最大调用堆栈大小错误即将出现。我不确定我会错在哪里

看