视频播放器之video全局事件属性
  • 了解video全局事件属性
https://www.w3school.com.cn/tags/html_ref_eventattributes.asp
  • 主要还是媒体事件，挑几个重要的说吧
  • oncanplay：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时），说白了就是在视频在播放之前执行的事件
  • onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）
  • onpause：当媒介被用户或程序暂停时运行的脚本
  • onplay：当媒介已就绪可以开始播放时运行的脚本
  • onplaying： 当媒介已开始播放时运行的脚本
  • 这几个比较常用也比较好动，如果要深入研究的话，就是oncanplay,onplay,onplaying这三个事件触发的先后顺序，为此做了一个测试
<!-- demo.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>demo</title>
        <link rel="stylesheet" href="./demo.css">
    </head>
    <body>
        <h1>视频播放器的演示</h1>
        <video class="video" id="video" src="./1.周杰伦 - 告白气球_new_file(1)_x264(Av15227278,P1).mp4" controls></video>
        <script src="./demo.js"></script>
    </body>
</html>

// demo.js
var video = document.getElementById("video")
video.oncanplay = function(){
    console.log("this is a oncanplay...")
}
video.onplay = function(){
    console.log("this is a onplay...")
}
video.onplaying = function(){
    console.log("this is a onplaying...")
}
  • 测试结果就是当视频准备就绪可以开始播放的时候，就会触发oncanplay事件，一旦你暂停视频然后又重新播放视频的时候，就会onplay和onplaying事件，并且onplay事件在onplaying事件之前触发
  • 另外还有几个重要的事件，非常重要
  • ontimeupdate：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本，这个事件对于设计进度条非常重要
  • onvolumechange：每当音量改变时（包括将音量设置为静音）时运行的脚本
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

探秘深海：一款强大的深度学习框架——DeepSea

在人工智能领域中，深度学习是推动科技进步的一股强大动力。今天，我们要向大家推荐的是一个专为深度学习爱好者和开发者打造的强大框架——DeepSea。该项目由Team-Neptune团队开发，并托管在Gitcode平台上，旨在简化和加速深度学习模型的研发过程。## 技术分析### 灵活的架构设计DeepSea采用模块化的设计，允许用户根据需求选择不同的组件，如优化器、损失函数等，以构建定制

avatar EazyDevelop社区
cover

从零开始搭建个人RAG知识库：RAGFlow+DeepSeek保姆级教程！

avatar EazyDevelop社区

taosync：适用于AList v3的自动化同步工具

在现代生活中，数据同步和备份已成为维护数据安全的关键环节。taosync是一款专为AList v3设计的自动化同步工具，能够帮助用户轻松地同步和备份他们的数据到多个网盘或FTP存储服务。这款工具的开发初衷是为了保存孩子的成长照片，其名称“taoSync”也因此而来。taosync以开源免费的形式提供，支持几乎所有的常用平台，并且提供了完善的日志记录、任务管理以及安全的密码加密功能。## 项目技

avatar EazyDevelop社区