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

时间:2017-08-16 04:53:41

标签: javascript jquery html5 video media-player

要求:

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

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

0 个答案:

没有答案