使用<video>標記在Chrome中按順序播放兩個視頻

如何在HTML5視頻標記中按順序播放兩個視頻？使用<video>標記在Chrome中按順序播放兩個視頻

在谷歌瀏覽器中，以下代碼只播放第一個介紹視頻。

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script> 

var i = 0; 
var sources = ['1.mp4', '2.mp4']; 
videoElement.addEventListener('ended', function(){ 
    videoElement.src = sources[(++i)%sources.length]; 
    videoElement.load(); 
    videoElement.play(); 
}, true); 

</script> 

</head> 
<body> 
<video id="videoElement" width="640" height="360" autoplay="autoplay"> 
    <source src="intro.mp4" type="video/mp4"></source> 
</video> 

<body> 
<html>

來源

2011-11-04 Frankie ' Moodurian' Kam

瀏覽器應該用JavaScript代碼觸發錯誤'videoElement未定義'，您必須從DOM獲取視頻元素，而不是直接使用其ID。請改變你的代碼，以

$(document).ready(function() { 
    //place code inside jQuery ready event handler 
    //to ensure videoElement is available 
    var i = 0; 
    var sources = ['1.mp4', '2.mp4']; 
    $('#videoElement').bind('ended', function() { 
     //'this' is the DOM video element 
     this.src = sources[i++ % sources.length]; 
     this.load(); 
     this.play(); 
    }); 
});

來源

2011-11-08 16:25:59 ExpExc

謝謝，這非常有幫助，它的工作...除了最後兩個視頻現在無休止地播放。是什麼造成的？如何在最後一個視頻播放結束後停止播放？這讓我瘋狂。 –

我知道這個問題是舊的，你問這個年齡前，但它是由於該行上的模運算符來源[i ++％sources.length]。當我增加它確保它不會超過sources.length。當它發生時，它會循環回來。當i = 2時，2％2 = 0。這意味着它將不斷重複索引0和索引1的來源。 – BrandonKowalski

感謝布蘭登！ –

萬一有人碰到這個問題又來了，這裏是我的解決類似的問題，我需要在一個循環一次，然後播放第一視頻第二個視頻。我也支持.webm,.m4v和.mp4。

這是我的JS：

$(document).ready(function(){ 
     var vid = document.getElementById("landing-video"); 
     vid.onplay = function() { 
      var source=vid.currentSrc; 
      folder = source.match(/(.+)(\/)/); 
      ext = source.match(/(\.\w+)$/); 
     }; 

     vid.onended = function() { 
      $("#landing-video").attr({ 
      "src":folder[0]+"video-2"+ext[0], 
      "loop":"" 
      }); 
     }; 
    });

這是我的HTML：

<video autoplay="" muted="" poster="" id="landing-video"> 
     <source src="my-folder/video-1.webm" type="video/webm"> 
     <source src="my-folder/video-1.m4v" type="video/x-m4v"> 
     <source src="my-folder/video-1.mp4" type="video/mp4"> 
    </video>

這可能會節約一些時間。

來源

2016-04-18 19:40:29

使用<video>標記在Chrome中按順序播放兩個視頻

回答

相關問題