video-js 自动播放下一个视频
时间: 2023-08-01 16:02:23 浏览: 144
在使用video-js播放器实现自动播放下一个视频的功能,可以通过监听video-ended事件来实现。具体步骤如下:
1. 首先在HTML中引入video.js库和CSS文件,并创建一个video元素作为播放器的容器。
2. 在JavaScript代码中,通过videojs()方法初始化播放器,并设置autoplay属性为true,表示自动播放。
3. 监听video-ended事件,当一个视频播放结束时触发该事件。
4. 在事件处理函数中,使用videojs()方法获取当前播放器实例,并通过调用next()方法来自动播放下一个视频。
下面是具体实现的代码示例:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
</head>
<body>
<video id="my-video" class="video-js" controls>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
</body>
</html>
```
JavaScript部分:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var player = videojs('my-video', { autoplay: true });
player.on('ended', function() {
player.next();
});
});
```
通过上述代码,使用video-js播放器可以自动播放下一个视频。当当前视频播放结束时,会自动触发播放器的ended事件,然后在事件处理函数中调用next()方法来自动播放下一个视频。