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

目录
相关文章
|
JavaScript IDE 开发工具
WebStorm - 关闭 ESLint 检测
WebStorm - 关闭 ESLint 检测
1714 0
WebStorm - 关闭 ESLint 检测
|
人工智能 自然语言处理 运维
钉钉MCP能力上新:AI如何提效你的工作流程
钉钉通讯录 & 部门管理、日程管理、待办任务、机器人&通知等高频场景API提供MCP服务
钉钉MCP能力上新:AI如何提效你的工作流程
java中实现File文件的重命名(renameTo)、将文件移动到其他目录下、文件的复制(copy)、目录和文件的组合(更加灵活方便)
这篇文章介绍了Java中使用`renameTo()`、`Files.copy()`等方法对文件进行重命名、移动和复制的操作,并提供了代码实例和测试效果。
java中实现File文件的重命名(renameTo)、将文件移动到其他目录下、文件的复制(copy)、目录和文件的组合(更加灵活方便)
|
自然语言处理 数据可视化 BI
多部门协作难题有解!推荐几款实用的企业协作平台
在现代商业环境中,高效协作工具对于团队成功至关重要。本文推荐5款协作平台:板栗看板、Trello、Asana、Monday.com和ClickUp,它们分别在任务管理、实时沟通、数据安全等方面表现出色,帮助企业实现高效管理,提升项目成功率。选择合适的工具,可以显著提高团队效率和协作效果。
652 0
|
JavaScript
video-08-videojs黑屏问题(详解总结)
video-08-videojs黑屏问题(详解总结)
898 1
video-01-详解使用和属性说明
video-01-详解使用和属性说明
485 1
|
设计模式 安全 前端开发
Struts2 S2-045远程执行代码漏东
Struts2 S2-045远程执行代码漏东
video-04-videojs配置及使用
video-04-videojs配置及使用
979 1
|
存储 数据处理 数据库
关系数据库:关系模式
关系数据库:关系模式
872 4
|
存储 小程序 开发工具
《uni-app 开发微信小程序,如何实现神秘的在线预览 pdf 文件功能?快来一探究竟!》
【8月更文挑战第20天】在移动互联网时代,微信小程序备受开发者青睐。使用uni-app框架开发时,常需在线预览PDF文件。微信小程序不直接支持PDF预览,需借助第三方服务或特定方法。一种方案是利用腾讯云文档服务,注册账号后,在项目中引入SDK,并配置服务参数,调用接口实现预览。另一种方案是使用`pdf.js`,下载其小程序版并引入项目,加载PDF文件进行渲染。开发者可根据需求选择合适的方法,同时注意处理错误及优化性能,提升用户体验。
2703 0