videojs 判断视频加载状态
时间: 2023-12-12 17:02:49 浏览: 54
可以通过 videojs 提供的一些事件来判断视频加载状态,例如:
1. `loadstart` 事件:当浏览器开始加载视频时触发。
2. `loadedmetadata` 事件:当视频元数据(如视频长度、宽高等)加载完毕时触发。
3. `loadeddata` 事件:当视频第一帧加载完毕时触发。
4. `canplay` 事件:当浏览器可以开始播放视频时触发。
5. `canplaythrough` 事件:当浏览器可以无缓存地播放整个视频时触发。
你可以在这些事件的回调函数中进行相应的处理,例如显示加载进度条、隐藏 loading 动画等。以下是一个示例代码:
```javascript
var player = videojs('my-video');
player.on('loadstart', function() {
console.log('视频开始加载');
});
player.on('loadedmetadata', function() {
console.log('视频元数据加载完毕');
});
player.on('loadeddata', function() {
console.log('视频第一帧加载完毕');
});
player.on('canplay', function() {
console.log('可以开始播放视频');
});
player.on('canplaythrough', function() {
console.log('视频可以无缓存播放');
});
```
你可以根据具体需求选择需要监听的事件。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)