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

Posted 2023-05-07

【中文标题】html5：上一个/下一个按钮播放前/后视频

【英文标题】：html5 : previous/next button to play preceding/succeeding videos

【发布时间】：2012-11-02 21:29:19

【问题描述】：

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

【问题讨论】：

我最近在写一个类似的代码，我不需要任何source 标签，都在 javascript 中管理。

@Malloc 谢谢。将更改 source 标记并在 JavaScript 中设置数组。但每个视频都有三种格式。如果浏览器更改，我只需要调用视频格式中的一个。此时索引的增量会导致列表中的下一个视频。如何跳转到列表中的下一个视频

【参考方案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

【讨论】：

感谢您的即时回复。我还在努力。我有每个视频的三种不同格式，以获得不同浏览器的支持。这就是我创建视频标签的方式。

@抱歉，我是本论坛的新用户。给您带来的不便，敬请见谅

为 id 指定一个通用名称 video 而不是 video1，因为它是您所有视频的容器。对于多种格式，在您放置视频的目录中，为每个视频独立命名相同的名称是什么格式：video1.mp4/video1.ogv/video2.mp4/video2.ogv

【参考方案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();

【讨论】：

感谢您的回复。我不清楚“currentVideoName='video1.avi'”。视频格式会根据浏览器而改变。所以这不能设置为静态吗？如果我错了，请纠正我

hmm，我使用mp4 格式进行了测试，它适用于IE9、FF 和Chrome，您可以将currentVideoName=video1.avi 更改为currentVideoName=video1.mp4 并尝试使用所有浏览器。

好的。我会试一试。谢谢。将向您更新结果

我在运行脚本时收到错误“Uncaught SyntaxError: Unexpected token ILLEGAL”。问题是什么。提前致谢

该问题已通过将 videosDirectory\ 更改为 videosDirectory/ 得到解决。第二个视频从该位置调用但未加载。请帮助我。我是否需要更改仅添加 mp4 格式的列表