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

Question

要求：

我有json数据，有点像这样：

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

如Json所见，我说有两个窗格。在第一个窗格中，有3个媒体，而在第二个窗格中有1个。我需要根据他们的位置排列窗格，我正在做的正确。但是，我需要为该窗格播放mediaList。

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

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

我的代码：

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

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