myVideo.addEventListener('ended', function() { myVideo.style.display = 'none'; hiddenBox.style.display = 'none'; }, false);
时间: 2024-04-01 10:37:05 浏览: 25
这是一个监听视频播放结束事件的代码,当视频播放结束时,会将视频和一个名为hiddenBox的元素隐藏起来。其中,myVideo和hiddenBox是两个DOM元素的引用。addEventListener是一个DOM元素的方法,用于添加事件监听器。本段代码添加了一个'ended'事件监听器,表示监听视频播放结束事件,当事件触发时,执行回调函数,将myVideo和hiddenBox的display属性设置为'none',即隐藏这两个元素。
相关问题
我想要改进这段代码,可以实现播放完这个视频后自动播放下一个视频<html> <head> <meta charset="utf-8"> <title>视频无限循环</title> <style> * { background-color: #333; color: #fff; list-style: none; margin: 0; padding: 0; cursor: default; overflow: hidden; } video { width: 100%; height: 100%; } </style> </head> <body> <video id="myVideo" controls loop> <source src="666.mp4" type="video/mp4"> <source src="777.mp4" type="video/mp4"> <source src="888.mp4" type="video/mp4"> </video> <script> var video = document.getElementById("myVideo"); var sources = video.getElementsByTagName("source"); var currentSrc = 0; function nextSrc() { currentSrc = (currentSrc + 1) % sources.length; video.src = sources[currentSrc].src; video.load(); video.play(); } video.addEventListener("ended", nextSrc); video.play(); </script> </body> </html>
您可以使用JavaScript的Promise来实现播放完一个视频后自动播放下一个视频。以下是改进后的示例代码:
```html
<html>
<head>
<meta charset="utf-8">
<title>视频无限循环</title>
<style>
* {
background-color: #333;
color: #fff;
list-style: none;
margin: 0;
padding: 0;
cursor: default;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<video id="myVideo" controls loop>
<source src="666.mp4" type="video/mp4">
<source src="777.mp4" type="video/mp4">
<source src="888.mp4" type="video/mp4">
</video>
<script>
var video = document.getElementById("myVideo");
var sources = video.getElementsByTagName("source");
var currentSrc = 0;
function playNextSrc() {
return new Promise(function(resolve, reject) {
currentSrc = (currentSrc + 1) % sources.length;
video.src = sources[currentSrc].src;
video.load();
video.play();
video.onended = function() {
resolve();
};
});
}
async function playAll() {
while (true) {
await playNextSrc();
}
}
playAll();
</script>
</body>
</html>
```
在此示例中,我们定义了一个名为playNextSrc的函数,该函数使用Promise来播放下一个视频。在这个函数中,我们使用video.onended事件监听器来等待视频播放完成,并在完成时调用resolve()函数。
然后,我们定义了一个名为playAll的async函数,该函数利用一个while循环来不断播放下一个视频,直到用户手动停止。
最后,我们在页面加载时调用playAll函数。这样,第一个视频将自动开始播放,并在播放完成后自动切换到下一个视频。
<html> <head> <meta charset="utf-8"> <title>视频无限循环</title> <style> * { background-color: #333; color: #fff; list-style: none; margin: 0; padding: 0; cursor: default; overflow: hidden; } video { width: 100%; height: 100%; } </style> </head> <body> <video src="666.mp4" controls="controls" loop="loop"> </video> </body> </html>我想要再加几个视频进去依次循环播放,怎么改
您可以将其他视频的路径添加到video标签的src属性中,然后使用HTML5的JavaScript API来控制视频的播放。以下是一个示例代码,其中包含3个视频循环播放:
```html
<html>
<head>
<meta charset="utf-8">
<title>视频无限循环</title>
<style>
* {
background-color: #333;
color: #fff;
list-style: none;
margin: 0;
padding: 0;
cursor: default;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<video id="myVideo" controls loop>
<source src="666.mp4" type="video/mp4">
<source src="777.mp4" type="video/mp4">
<source src="888.mp4" type="video/mp4">
</video>
<script>
var video = document.getElementById("myVideo");
var sources = video.getElementsByTagName("source");
var currentSrc = 0;
function nextSrc() {
currentSrc = (currentSrc + 1) % sources.length;
video.src = sources[currentSrc].src;
video.load();
video.play();
}
video.addEventListener("ended", nextSrc);
video.play();
</script>
</body>
</html>
```
在此示例中,我们使用HTML5的JavaScript API来控制视频播放。我们首先获取video元素和所有可用源的列表。然后,我们定义nextSrc函数,该函数在当前视频播放完成时将视频源更改为下一个源,并开始播放。最后,我们添加一个事件监听器,以便在当前视频结束时调用nextSrc函数,并使用video.play()命令启动第一个视频。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)