video元素和audio元素相关事件

chanjarster 发布于2019-08-20 15:28 / 888人阅读

摘要：前言在利用元素或元素读取或播放媒体数据时，会触发一系列事件，如果用脚本来捕抓这些事件，就可以对着这些事件进行处理了。捕抓的方式有两种第一种是监听的方式。

前言

在利用video元素或audio元素读取或播放媒体数据时，会触发一系列事件，如果用js脚本来捕抓这些事件，就可以对着这些事件进行处理了。

捕抓的方式有两种：

第一种是监听的方式。使用vedio或audio元素的addEventListener方法来对事件进行监听，该方法可以定义如下：

vedioElement.addEventListener("error",function(){},false);

第二种是采用获取事件句柄方式，如下：


function toPlay(){
...
};

事件介绍

事件类型	描述
loadstart	浏览器开始在网上寻找媒体数据
progress	浏览器正在获取媒体数据
suspend	浏览器暂停获取媒体数据，但是下载过程并没有正常结束
abort	浏览器下载完全部媒体数据之前中止获取媒体数据，但并不是下载错误引起的
error	获取媒体数据的过程中出错
stalled	浏览器尝试获取数据失败
play	即将开始播放，当执行了play方法时触发，或数据下载后元素被设置为autoplay属性
pause	播放暂停，当执行了pause方法时触发
loadedmetadata	浏览器获取完媒体的时长和字节数
loadeddata	浏览器已加载完当前播放位置的媒体数据，准备播放
waiting	播放过程由于得不到下一帧而暂停播放（如下一帧尚未加载完），但很快就能够得到下一帧
playing	正在播放
canplay	浏览器能够播放媒体，但估计以当前播放速率不能直接将媒体播放完，播放期间需要缓冲
canplaythrough	浏览器可以播放媒体，而且以当前播放速率能够将媒体播放完，不再需要进行缓冲
seeking	seeking属性变为true,表明浏览器正在请求数据
seeked	seeking属性变为false,表示浏览器停止请求数据
timeupdate	当前播放位置发生改变，可能是播放过程中的自然改变，也可能是人为的改变，或由于播放不能连续而发生的跳变
ended	播放结束后停止播放
ratechange	defaulplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）发生改变
durationchange	播放时长发生改变
volumechange	volume属性（音量）发生改变或muted属性（静音状态）发生改变

demo

参考链接
http://www.runoob.com/jsref/d...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82271.html

JavaScript HTML5脚本编程——“媒体元素”的注意要点

摘要：事件除了大量属性之外，这两个媒体元素还可以触发很多事件。下表列出了媒体元素相关的事件。这两个媒体元素都有一个方法，该方法接收一种格式编解码器字符串，返回或空字符串。 audio和video元素的用法如下：不支持音频不支持视频因为并非所有浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定src属性，而是要像下面这样使用一或多个元素。 ...

baoxl 2019-08-19 17:37 评论0 收藏0
那是我在夕阳下的奔跑：边跑边学习html5之audio与video

摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

gself 2019-08-20 19:04 评论0 收藏0
那是我在夕阳下的奔跑：边跑边学习html5之audio与video

摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

flybywind 2019-08-01 17:31 评论0 收藏0