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