播放多个文件类型的视频循环

Playing a video loop for multiple file types

本文关键字：的视频 循环 类型 文件 播放      更新时间：2023-09-26

我有一个视频数组，我正在播放一个网站上的循环。我已经让那部分工作，但现在我正试图弄清楚如何加载适当的文件格式。我有webm和mp4两种格式的视频。我试着把这两种文件类型放在数组中，认为如果它不适合用户的浏览器，它就不会加载并跳到下一个(如video1)。webm和video1.mp4各有自己的条目，在我的数组中有6个项目)，但当我在chrome中测试它时，它似乎播放每个视频两次。

这是我到目前为止的代码:

<video autoplay id="myVideo">
<source src="video1.webm" type="video/webm">
<source src="video1.mp4" type="video/mp4">
</video>

<script>
var videoSource = new Array();
videoSource[0] = 'video1.webm';
videoSource[1] = 'video2.webm';
videoSource[2] = 'video3.webm';
var i = 0;
var videoCount = 4;
function videoPlay(videoNum) {
    document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
    document.getElementById("myVideo").load();
    document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(0); 
function myHandler() {
i++;
if (i == (videoCount - 1)) {
    i = 0;
    videoPlay(i);
} else {
    videoPlay(i);
}
}
</script>

    <video autoplay id="myVideo">
<source src="video1.webm" type="video/webm">
<source src="video1.mp4" type="video/mp4">
</video>

<script>
var videoSource = ['video1.webm', 'video2.webm', 'video3.webm', 'video4.webm'];
var i = 0;
var videoCount = videoSource.length;
function videoPlay(videoNum) {
    document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
    document.getElementById("myVideo").load();
    document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(0); 
function myHandler() {
if(i < videoCount){
    i++;
    videoPlay(i);
}else{
    i = 0;
    videoPlay(i);
}
}
</script>
相关文章：