video-03-video事件汇总

简介: video-03-video事件汇总



一、参考资料

HTML 音频/视频 | 菜鸟教程

二、事件汇总

事件 描述
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事件,及获取当前视频播放事件的属性,即可实现!!!

目录
相关文章
|
1月前
video和audio的事件
【10月更文挑战第5天】video和audio的事件。
35 4
|
6月前
video-01-详解使用和属性说明
video-01-详解使用和属性说明
106 1
|
6月前
|
移动开发 JavaScript Android开发
H5 video 自动播放(autoplay)不生效解决方案
H5 video 自动播放(autoplay)不生效解决方案
648 0
|
JavaScript
audio用法
之前老早之前写的 但不是markdown格式,总觉得不爽 这个记录下吧 都比较简单直接上代码吧
226 0
|
JavaScript 前端开发
|
JavaScript 前端开发
|
Web App开发 移动开发 JavaScript
opensecuritytraining video
https://www.youtube.com/user/OpenSecurityTraining/playlists https://www.
759 0
GRRCON 2014 video
http://www.securitytube.net/video/11380
579 0