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];