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();

html5：上一个/下一个按钮播放上一个/后一个视频

2 个答案: