疯狂H5笔记 - 多媒体支持

最新推荐文章于 2021-06-28 00:00:50 发布

19年，重新开始写

最新推荐文章于 2021-06-28 00:00:50 发布

阅读量484

点赞数

分类专栏： html5+css3 文章标签：多媒体

本文链接：https://blog.csdn.net/qq_27905183/article/details/53072719

版权

html5+css3 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

1.使用<audio src></audio>元素来播放音频，使用<video src></video>元素来播放视频

2.audio元素和video元素有大致相同的属性，支持的属性如下：src：指定播放音频或者视频的URL地址；autoplay：指定是否当音频/视频装载完成后自动播放；controls：指定当播放音频/视频时是否显示播放控制条；loop：指定音频/视频播放完成后是否再次重复播放；preload：指定是否预加载音频/视频，该属性支持三种属性值：

<audio controls>
    <source src="demo.ogg" type="audio/ogg" />
    <source src="demo.mp3" type="audio/mp3" />
    <source src="demo.wav" type="audio/x-wav" />
</audio>

5.audio元素和video元素支持在JS中使用如下方法:

1.Play()：播放音频/视频
2.pause()：暂停播放
3.load()：重新装载文件
4.canPlayType(type)：判断是否可播放指定type类型的文件，该方法的返回值有三个：
    probably：该浏览器支持播放此种类型的音频/视频文件 ；
    maybe：该浏览器可能支持播放此种类型的音频/视频文件 ；
    ""空字符串：该浏览器不支持播放此种类型的音频/视频文件 ；

6.audio元素和video元素支持如下属性：

1.buffered：只读属性，该属性返回一个TimeRanges对象，用于获取浏览器已经缓存的媒体数据
2.currentSrc：只读属性，返回播放器正在播放的音频/视频文件的url地址
3.currentTime：返回播放器正在播放的音频/视频当前所处的时间点，返回值以秒为单位
4.defaultPlaybackRate：返回音频/视频默认的播放速度，JS脚本可以通过修改该属性的值来改变他们默认的播放速度
5.duration：只读属性，返回音频/视频的持续时间，返回值以秒为单位
6.ended：只读属性，判断是否已经播放结束，返回一个boolean类型的值
7.error：只读属性，当读取并且播放音频/视频正常的情况下，该属性返回null，当出现错误时，将会返回一个MediaError对象，该对象的code属性代表错误状态，MediaError.class.code可能出现如下四个错误状态：
    MEDIA_ERR_ABORTED（1）：媒体下载过程被中止
    MEDIA_ERR_NETWORK(2)：下载媒体资源时由于网络原因被中断
    MEDIA_ERR_DECODE(3)：媒体资源下载完成，但尝试对媒体解码时出现错误
    MEDIA_ERR_SRC_NOT_SUPPORTED(4)：媒体资源不可用或者当前浏览器不支持该媒体格式
8.muted：返回播放器是否处于静音状态，JS可以通过该属性来改变播放器的静音设置
9.networkState：只读属性，获取音频/视频的网络状态，该属性可能返回如下四个值：
    NETWORK_EMPTY(0)：处于初始化状态
    NETWORK_IDLE(1)：空闲状态，还没有建立网络连接
    NETWORK_LOADING(2)：正在加载音频/视频数据
    NETWORK_NO_SOURCE(3)：媒体资源不可用或者当前浏览器不支持该媒体格式，因此不执行加载
10.paused：只读属性，判断当前播放器是否处于暂停状态，返回boolean值
11.playbackRate：返回当前音频/视频文件的播放速度，JS可通过该属性修改播放器的播放速度
12.player：只读属性，返回一个TImeRanges对象，用于获得音频/视频的已播部分的时间段
13.readyState：只读属性，返回当前音频/视频文件的准备状态，该属性可能返回如下两个属性值：
    HAVE_NOTHING：还没有得到音频/视频的文件的任何数据
    HAVE_METADATA：已经获取到音频/视频文件的元素局，但还没有获取到媒体数据，还不能播放
14.seekable：只读属性，返回一个TmeRanges对象，用于获取音频/视频可定位的时间段
15.seeking：只读属性，返回播放器是否正咋爱尝试定位到指定时间点，返回一个boolean值
16.startTime：只读属性，返回播放器播放音频/视频的开始时间，通常返回0
17.volume：返回当前播放器的音量，JS可以通过该属性来改变播放器的音量

上面多个属性都返回一个TimeRanges对象，该对象类似于一个数组，该对象里可能包含多个时间段，我们可以通过使用length属性来获取该对象的时间段的数目，并且通过索引的方式来获取每一个时间段对象。TimeRanges对象还提供了如下两个方法用于简化访问指定位置的时间段:

start(index)：返回index索引所处的时间段的开始时间
end(index)：返回index索引所处的时间段的结束时间

8.多媒体元素所支持的事件如下：

1.onabort：当播放器还未下载完媒体数据而被终止下载时触发事件
2.oncanplay：当播放器目前能播放多媒体，但是播放中间可能需要缓冲时触发事件
3.oncanplaythrough：当播放器目前能播放多媒体，并且不需要进行缓冲时触发事件
4.ondurationchange：当多媒体的长度发生改变时触发事件
5.onemptied：当多媒体突然为空时触发事件，如网络错误，加载错误等
6.onended：当多媒体播放结束时触发事件
7.onerror：当多媒体出现错误时触发事件
8.onloadedmetadata：当多媒体的元数据加载完成后触发事件
9.onloadstart：当播放器开始加载多媒体时触发事件
10.onpause：当播放器暂停时触发事件
11.onplaying：正在播放多媒体数据时触发事件
12，onplay：即将开始播放多媒体时触发事件
13.onprogress：播放器正在加载多媒体数据时触发事件
14.onratechange：当播放速度发生改变时触发事件
15.onreadystatechange：大昂播放器的readyState状态发生改变时触发事件
16.onseeked：已成功定位到多媒体的指定位置，并且sseeking属性值变为false时触发事件
17.onstalled：播放器获取多媒体数据的过程中（延迟）发生错误时触发事件
18.onsuspend：播放器取得多媒体的全部数据之前停止时触发事件
19.ontimeupdate：大昂播放的位置发生改变时触发事件，播放位置可能有三种情况下发生改变：
    1.播放过程中自然改变
    2.人为拖动导致播放位置的改变
    3.播放不连续导致时间跳跃导致的改变
20.onvolumechange：当播放器的音量被改变时触发事件
21.onwaiting：播放过程中由于暂时得不到下一帧数据而暂停时触发事件