html5：上一個/下一個按鈕播放前後視頻

Question

我是html5的新手。我創建了一個默認加載視頻的html頁面。我需要創建一個帶有按鈕播放/暫停，下一個和上一個以及一系列視頻的html頁面。點擊下一個按鈕，數組中的下一個視頻應該被加載，類似於前一個按鈕。

我已經使用html5標記來調用第一個視頻（它加載在屏幕上）。我可以實現下一個和上一個按鈕功能。我怎樣才能創建一個視頻陣列，我怎麼稱呼他們。

任何幫助，將不勝感激。

<video id="video1" class="container1" preload="auto"controls="controls" tabindex="0" > 
<source id="v1" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2" src="videos\mov_bbb.mp4"></source> 
<source id="v2" type="video/ogg" codecs="theora, vorbis" src="videos\mov_bbb.ogv"></source> 
<source id="v3" type="video/webm" codecs="vp8, vorbis" src="videos\mov_bbb.webm"></source> 
</video> 

Answer 1

你可以通過設置兩個按鈕並觸發一個事件來改變視頻元素的來源。這樣你只需要一個html5視頻元素。 JavaScript代碼看起來像如下：

var player = document.querySelector('#video'); 
var i = 0; 
var back = document.querySelector('#back'); 
var next = document.querySelector('#next'); 
var videos = [ // here is your list of videos 
    'video1.mp4', 
    'video2.mp4', 
    '...' 
]; 

back.addEventListener('click',function(){ 
    player.src = videos[i == 0 ? videos.length-- : i--]; 
    video.play(); 
},false); 

next.addEventListener('click',function(){ 
    player.src = videos[i == videos.length-- ? 0 : i++]; 
    video.play(); 
},false); 

player.src = videos[i]; 
player.play(); //init the video player 

Answer 2

在你的HTML視頻容器

：

<video id='currentVideo'></video> 

JavaScript代碼：

//Global variable for the current video name 
var currentVideoName='video1.avi'; 

var videoList=['video1.avi','video2.mp4','video3.mpg']; 
var myVideo = document.getElementById('currentVideo'); 

var index = videoList.indexOf(window.currentVideoName); 

//Next button 
myVideo.pause(); 
myVideo.currentTime=0; 
myVideo.src = 'videosDirectory/'+videoList[index+1]; 
window.currentVideoName=videoList[index+1]; 
myVideo.play(); 

//Pause button 
myVideo.pause(); 

//Previous button 
myVideo.pause(); 
myVideo.currentTime=0; 
myVideo.src = 'videosDirectory/'+videoList[index-1]; 
window.currentVideoName=videoList[index-1]; 
myVideo.play(); 

//Play button 
myVideo.play();