一、参考资料
二、事件汇总
事件 | 描述 |
abort | 当音频/视频的加载已放弃时触发。 |
canplay | 当浏览器可以开始播放音频/视频时触发。 |
canplaythrough | 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 |
durationchange | 当音频/视频的时长已更改时触发。 |
emptied | 当目前的播放列表为空时触发。 |
ended | 当目前的播放列表已结束时触发。 |
error | 当在音频/视频加载期间发生错误时触发。 |
loadeddata | 当浏览器已加载音频/视频的当前帧时触发。 |
loadedmetadata | 当浏览器已加载音频/视频的元数据时触发。 |
loadstart | 当浏览器开始查找音频/视频时触发。 |
pause | 当音频/视频已暂停时触发。 |
play | 当音频/视频已开始或不再暂停时触发。 |
playing | 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 |
progress | 当浏览器正在下载音频/视频时触发。 |
ratechange | 当音频/视频的播放速度已更改时触发。 |
seeked | 当用户已移动/跳跃到音频/视频中的新位置时触发。 |
seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发。 |
stalled | 当浏览器尝试获取媒体数据,但数据不可用时触发。 |
suspend | 当浏览器刻意不获取媒体数据时触发。 |
timeupdate | 当目前的播放位置已更改时触发。 |
volumechange | 当音量已更改时触发。 |
waiting | 当视频由于需要缓冲下一帧而停止时触发。 |
三、使用方法(推荐方法二,简单方便)
3.1 方法1 事件监听
const video = document.getElementById("video") video.addEventListener("error",function(){ /******代码段******/ });
3.2 方法2 JavaScript脚本
<video id="myVideo" autoplay="true" src="https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4" width="320" height="240" controls onplay="begin_playing()"> </video> function begin_playing() { console.log("视频播放啦") /******代码段******/ }
四、到这里你可以写一个video视频播放器功能是自定义的,可以发散思维实现功能
实现监听视频播放进度,并且判断是否快播放完毕等等
思路:利用timeupdate事件,及获取当前视频播放事件的属性,即可实现!!!