html 实现循环播放某文件夹下面的视频
时间: 2024-03-10 13:49:36 浏览: 22
实现循环播放某文件夹下面的视频可以通过以下步骤实现:
1. 创建一个 HTML 页面,通过 `<video>` 标签嵌入视频。
2. 使用 JavaScript 获取该文件夹下所有视频文件。
3. 将获取到的视频文件路径组成一个数组,随机或按顺序播放其中一个视频。
4. 监听视频播放结束事件,当视频播放结束时,切换到下一个视频继续播放。
以下是代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环播放视频</title>
</head>
<body>
<video id="myVideo" width="640" height="360" controls autoplay></video>
<script src="playVideo.js"></script>
</body>
</html>
```
JavaScript 代码(playVideo.js):
```javascript
// 获取视频文件夹路径
const folderPath = 'path/to/video/folder/';
// 获取视频文件列表
const videoList = [
'video1.mp4',
'video2.mp4',
'video3.mp4'
];
// 随机播放或按顺序播放
const randomPlay = true;
// 获取 video 元素
const myVideo = document.getElementById('myVideo');
// 切换视频
function switchVideo() {
// 随机播放
if (randomPlay) {
const randomIndex = Math.floor(Math.random() * videoList.length);
myVideo.src = folderPath + videoList[randomIndex];
} else { // 按顺序播放
const currentIndex = videoList.indexOf(myVideo.src.replace(/^.*[\\\/]/, ''));
const nextIndex = (currentIndex + 1) % videoList.length;
myVideo.src = folderPath + videoList[nextIndex];
}
myVideo.load();
myVideo.play();
}
// 监听视频播放结束事件
myVideo.addEventListener('ended', switchVideo);
// 播放第一个视频
switchVideo();
```
在上述代码中,我们首先定义了一个文件夹路径 `folderPath` 和视频文件列表 `videoList`,然后设置是否随机播放 `randomPlay`。接着,我们获取 video 元素 `myVideo`,定义了一个切换视频的函数 `switchVideo()`,并添加了视频播放结束事件监听器,当视频播放结束时调用 `switchVideo()` 函数切换到下一个视频继续播放。最后,我们调用 `switchVideo()` 函数播放第一个视频。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)