Html5视频功能应该只有一个视频可以播放

时间:2015-02-19 11:30:45

标签: javascript jquery html5 video

根据此功能,如何才能播放第一个视频? 我不再需要第二个这个功能了!

此视频最初是为了播放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>

1 个答案:

答案 0 :(得分:0)

最简单的解决方案是修改两行代码

if (playlist.length > 1) {

应该是

if (playlist.length > 0) {

data.playlist = [video1,video2];

可以更改,以便不将两个值传递给数组,而只传递一个!

data.playlist = [video1];