Html5 视频函数应该只有一个视频可以播放

Question

基于此功能，如何才能只播放第一个视频？ 我不再需要此功能的第二个！

创建此视频最初是为了播放 2 个视频，其中第二个循环播放。真的很聪明，但它让我在 ie9 上闪烁黑色，我无法修复。

    (function($)
    {$.fn.videoLoop = function (options) {
        
     function changeVideoSrc(vidObj,vidEl){
         vidEl.html("");
         vidObj.media.forEach(function(obj){
             console.log(obj);
             vidEl.append($("<source>").attr("src",obj.src).attr("type",obj.format));
         });
     }
        
      var video = this,
      videoEl = video[0],
      selVideoIdx = 0;
    
      options = options || {};
    
      var playlist = options.playlist || [],
      poster = options.poster || "http://placehold.it/1024x768/FFFFFF/FFFFFF";
    
    if (playlist.length > 1) {
      var firstvid = playlist[selVideoIdx % playlist.length];
      changeVideoSrc(firstvid,video);
      video.attr('poster', poster);
      video.attr('autoload', true);
      video.attr('autoplay', true);
      selVideoIdx++;
    
      video.on('loadedmetadata', function () {
          videoEl.currentTime = 0.5;
          videoEl.play();
      }).bind('ended', function () {
          var currentvid = playlist[selVideoIdx % playlist.length];
          changeVideoSrc(currentvid,video);
          videoEl.loop = true;
          videoEl.load();
          selVideoIdx++;
        });
      }
    };
    
    
     
    var video1 = {};
    video1.title = 'FIRST';
    video1.media = [{'format':'video/mp4','src':'http://www.w3schools.com/html/mov_bbb.mp4'},{'format':'video/ogv','src':'http://www.w3schools.com/html/mov_bbb.ogv'}];
     


    var video2 = {};
    video2.title = 'LOOP';
    video2.media = [{'format':'video/mp4','src':'http://media.w3.org/2010/05/sintel/trailer.mp4'},{'format':'video/ogv','src':'http://media.w3.org/2010/05/sintel/trailer.ogv'}];
    
    var data = {};
    data.playlist = [video1,video2];
    data.poster = "http://placehold.it/1024x768/000000/FFFFFF"
    
    
    $('#start').videoLoop(data);
    
    }(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-start target">
<video id="start" width="400" height="300" controls>
  Your browser does not support the video tag.
</video>
</div>

Answer 1

最简单的解决办法就是修改两行代码

if (playlist.length > 1) {

应该是

if (playlist.length > 0) {

和

data.playlist = [video1,video2];

可以更改为只传递一个值，而不是将两个值传递给数组！

data.playlist = [video1];

Html5 视频函数应该只有一个视频可以播放

Html5 video function should have only one video to play

html

javascript

video

jquery