video全局事件属性

视频播放器之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：每当音量改变时（包括将音量设置为静音）时运行的脚本

video全局事件属性相关推荐

前端学习（168）全局事件属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/str ...
html全局事件,HTML5全局属性和事件
摘要: 全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件. 属性: HTML5属性能够赋给标签元素含义和语 ...
HTML 事件属性_03
全局事件属性 HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,比方说当用户点击某个 HTML 元素时启动一段 JavaScript. 如果你想学习更多关于事件属性,请访问 Jav ...
【HTML5】HTML5事件属性总结
HTML事件属性 HTML4增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动JavaScript. 下面列出了添加到HTML元素中,定义事件动作的全局事件属性,HTML5引入的事件被标记 ...
HTML 5 参考手册,HTML 5 标准属性,HTML 5 事件属性
HTML 5 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则,HTML 5 改进了互操作性,并减少了开发成本. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数据 ...
vue3-video-play视频组件的使用（一）——基本使用 HTML5中Video标签的属性、方法和事件汇总
vue3-video-play视频组件的使用(一)--基本使用 & HTML5中Video标签的属性.方法和事件汇总 npm地址:https://www.npmjs.com/package/v ...
HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
html5的vidoe标签,HTML5的Video标签的属性,方法和事件
大多数的视频通过插件(例如flash)来播放,然而并非所有的浏览器都支持此类插件.HTML5规定了一种通过video来包含视频的标准方法.但是IE8及以下版本不支持video. HTML5的video ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...

video全局事件属性

视频播放器之video全局事件属性

video全局事件属性相关推荐

最新文章

热门文章