html5的video标签事件代码实例说明
<video src="test.mp4" controls width="400" height="300" id="video"></video>
<script>
var video = document.getElementById('video')
// 1、loadstart:视频查找。当浏览器开始寻找指定的音频/视频时触发,也就是当加载过程开始时
video.addEventListener('loadstart', function(e) {
console.log('提示视频的元数据已加载')
console.log(e)
console.log(video.duration) // NaN
})
// 2、durationchange:时长变化。当指定的音频/视频的时长数据发生变化时触发,加载后,时长由 NaN 变为音频/视频的实际时长
video.addEventListener('durationchange', function(e) {
console.log('提示视频的时长已改变')
console.log(e)
console.log(video.duration) // 528.981333 视频的实际时长(单位:秒)
})
// 3、loadedmetadata :元数据加载。当指定的音频/视频的元数据已加载时触发,元数据包括:时长、尺寸(仅视频)以及文本轨道
video.addEventListener('loadedmetadata', function(e) {
console.log('提示视频的元数据已加载')
console.log(e)
})
// 4、loadeddata:视频下载监听。当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时触发
video.addEventListener('loadeddata', function(e) {
console.log('提示当前帧的数据是可用的')
console.log(e)
})
// 5、progress:浏览器下载监听。当浏览器正在下载指定的音频/视频时触发
video.addEventListener('progress', function(e) {
console.log('提示视频正在下载中')
console.log(e)
})
// 6、canplay:可播放监听。当浏览器能够开始播放指定的音频/视频时触发
video.addEventListener('canplay', function(e) {
console.log('提示该视频已准备好开始播放')
console.log(e)
})
// 7、canplaythrough:可流畅播放。当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时触发
video.addEventListener('canplaythrough', function(e) {
console.log('提示视频能够不停顿地一直播放')
console.log(e)
})
// 8、play:播放监听
video.addEventListener('play', function(e) {
console.log('提示该视频正在播放中')
console.log(e)
})
// 9、pause:暂停监听
video.addEventListener('pause', function(e) {
console.log('暂停播放')
console.log(e)
})
// 10、seeking:查找开始。当用户开始移动/跳跃到音频/视频中新的位置时触发
video.addEventListener('seeking', function(e) {
console.log('开始移动进度条')
console.log(e)
})
// 11、seeked:查找结束。当用户已经移动/跳跃到视频中新的位置时触发
video.addEventListener('seeked', function(e) {
console.log('进度条已经移动到了新的位置')
console.log(e)
})
// 12、waiting:视频加载等待。当视频由于需要缓冲下一帧而停止,等待时触发
video.addEventListener('waiting', function(e) {
console.log('视频加载等待')
console.log(e)
})
// 13、playing:当视频在已因缓冲而暂停或停止后已就绪时触发
video.addEventListener('playing', function(e) {
console.log('playing')
console.log(e)
})
// 14、timeupdate:目前的播放位置已更改时,播放时间更新
video.addEventListener('timeupdate', function(e) {
console.log('timeupdate')
console.log(e)
})
// 15、ended:播放结束
video.addEventListener('ended', function(e) {
console.log('视频播放完了')
console.log(e)
})
// 16、error:播放错误
video.addEventListener('error', function(e) {
console.log('视频出错了')
console.log(e)
})
// 17、volumechange:当音量更改时
video.addEventListener('volumechange', function(e) {
console.log('volumechange')
console.log(e)
})
// 18、stalled:当浏览器尝试获取媒体数据,但数据不可用时
video.addEventListener('stalled', function(e) {
console.log('stalled')
console.log(e)
})
// 19、ratechange:当视频的播放速度已更改时
video.addEventListener('ratechange', function(e) {
console.log('ratechange')
console.log(e)
})
</script>
[ WebRTC ] 相关文章
[ 视频安全 ] 相关原创文章
- 教育教学类视频如何处理加密与安全(组图)
- 防止360浏览器小窗下载视频
- 视频安全之视频播放密码功能(设置观看密码功能教程)
- 视频安全之授权播放和防录屏跑马灯
- 企业级微信视频直播如何设定观看白名单(设定手机观看白名单、授权观看直播)
- 在线教育网站如何更好的实现视频安全视频保护?
- 免费视频二维码的完整使用教程(适合小企业做微信视频宣传)
- Html5视频video标签中使用blob实现视频播放加密
[ 视频直播 ] 相关原创文章
- 云直播客户端4.0活动拍摄类直播与教学培训类直播测试
- 视频直播画中画效果(边角叠加、去背景、并列布局三种效果)
- 做视频直播时如何测试本地网络的上行带宽(网速测试)
- 在线导播台(网页导播台)混流效果
- 云课堂直播功能介绍,更贴合在线教育、企业内训的场景应用
- 微信公众号直播有哪些不一样的玩法?
- 企业年会活动常用的音频类、视频类工具软件
[ 视频存储与应用 ] 相关原创文章
- 企业网站如何插入第三方平台不带广告的宣传宣传片
- 最全的视频格式分类详解(那是相当的全面)
- FMS/wowza/red5/SRS流媒体服务器产品对比
- 无广告的免费视频存储空间并提供视频上传转码的功能,很不错的哦
- 说说视频编码格式、视频码率、视频帧率、分辨率的概念
- 免费视频存储平台(微云、百度网盘、谷歌硬盘、酷播云)的截图对比