3

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

2 回答 2

1

您可以通过设置两个按钮并触发更改视频元素来源的事件来实现。这样你只需要一个 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
于 2012-11-14T12:04:33.883 回答
0

在您的 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();
于 2012-11-14T12:27:53.477 回答