我是 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> 

请您参考如下方法:

您可以通过设置两个按钮并触发一个更改视频元素源的事件来实现。这样你只需要一个 html5 Video 元素。 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