gpt4 book ai didi

javascript - 如何播放两个不同的源视频,当一个结束后,切换到下一个并循环播放?

转载 作者:行者123 更新时间:2023-11-28 09:31:12 26 4
gpt4 key购买 nike

<!doctype html>
<html>
<head>
<title>Sequential Movies</title>
<script type="text/javascript">
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = "2.m4v";
myVideo.load();
myVideo.play();
myVideo.addEventListener('ended', myAddListener, false);
}
// add a listener function to the ended event

function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = "1.m4v";
myVideo.load();
myVideo.play();
myVideo.addEventListener('ended', myNewSrc, false);
}
</script>
</head>
<body onload="myAddListener()">
<video controls
src="1.m4v">
</video>
</body>
</html>

问题似乎是video1可以切换到video2,但video2无法切换回video1。如何编写脚本来循环 1 > 2 > 1 > 2 > 1 > 2 > 1?是否可以切换三个以上的视频源?我不知道底部链接在说什么,但它似乎对我很有帮助。

play next video in an array on "ended"

最佳答案

实际上,您向同一个视频对象添加了两个监听器。你可以使用这样的东西:

<!doctype html>
<html>
<head>
<title>Sequential Movies</title>
<script type="text/javascript">
var videoSources = ["SSR-Styles.mp4","Gauges-radial.mp4"]
var currentIndex = 0;

function setFirstVideo()
{
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = videoSources[currentIndex];
}

function videoEnded(){
var myVideo = document.getElementsByTagName('video')[0];
currentIndex = (currentIndex+1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.load();
myVideo.play();
}
</script>
</head>
<body onload="setFirstVideo()">
<video controls onended="videoEnded()"
src="">
</video>
</body>
</html>

关于javascript - 如何播放两个不同的源视频,当一个结束后,切换到下一个并循环播放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13699116/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com