HTML5 音视频标签

视频标签 video

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video (opens new window)

< video>:Html5提供的播放视频的标签
    src:资源地址
    controls:该属性定义是显示还是隐藏用户控制界面

video标签的属性
    width  :视频显示区域的宽度，单位是CSS像素
	height :视频展示区域的高度，单位是CSS像素
	poster :一个海报帧的URL，用于在用户播放或者跳帧之前展示
    src		  :	 要嵌到页面的视频的URL
    controls  :  显示或隐藏用户控制界面
    autoplay  :  媒体是否自动播放
    loop  	  :  媒体是否循环播放
    muted  	  :  是否静音
    preload   :  该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么
                    none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；
                            换句话说就是提示浏览器该视频不需要缓存。
                    metadata: 提示尽管作者认为用户不需要查看该视频，
                                不过抓取元数据（比如：长度）还是很合理的。
                    auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，
                            可以下载整个视频，即使用户并不一定会用它。
                    空字符串：也就代指 auto 值。

	注意：autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置autoplay 和 preload属性在规范里是允许的。

音频标签 audio

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio (opens new window)

<audio>:Html5提供的播放音频的标签
	src:资源地址
	controls:该属性定义是显示还是隐藏用户控制界面

<source>
	视频：
	type='video/webm; codecs="vp8, vorbis"'
	type='video/ogg; codecs="theora, vorbis"'
	type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

	音频：
	type='audio/ogg; codecs="vorbis"'
	type='audio/aac; codecs="aac"'
	type='audio/mpeg'

audio标签的属性	:
    src       :  音频url
	controls  :  显示或隐藏用户控制界面
	autoplay  :  媒体是否自动播放
    loop  	  :  媒体是否循环播放,布尔属性；如果声明该属性，将循环播放音频。
    muted  	  :  是否静音
	preload   :  同上

音视频 js 相关属性

两者都有的属性：

duration    :  媒体总时间(只读)
currentTime :  开始播放到现在所用的时间(可读写)
muted       :  是否静音(可读写,相比于volume优先级要高),默认值为 false，表示有声音。
volume      :  0.0-1.0的音量相对值(可读写),可设置媒体播放时的音量。
paused      :  媒体是否正在暂停(只读)，true暂停中 ，false 没有暂停，仅限暂停状态 因网络原因造成的缓冲状态仍然会告诉你不在暂停状态
ended       :  媒体是否播放完毕(只读)
error       :  媒体发生错误的时候，返回错误代码 (只读)
currentSrc  :  以字符串的形式返回媒体地址(只读)，该属性包含所选媒体源的绝对URL路径。当networkState值为EMPTY时，本属性值为空字符串（empty string）.


注意：音量和静音属性不会同步，静音属性的优先级更高。

视频比音频多的属性：

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLVideoElement (opens new window)

    poster  :   视频播放前的预览图片(读写)
    width、height  :   设置视频的尺寸(读写)
    videoWidth、 videoHeight  :   视频的实际尺寸(只读)

音视频 js 相关函数

play()  :  媒体播放
pause()  :  媒体暂停
load()  :  重新加载媒体，结合source标签的时候才有用

在修改video或audio的资源路径后必须要使用load()来重新加载媒体数据

js 相关事件

事件名称	描述
abort	在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay	在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
canplaythrough	在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
durationchange	元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied	媒体被清空（初始化）时触发。
ended	播放结束时触发。
error	在发生错误时触发。元素的error属性会包含更多信息。参阅 HTMLMediaElement.error 获得详细信息。
loadeddata	媒体的第一帧已经加载完毕。参阅 HTMLMediaElement: loadeddata 获得详细信息。
interruptbegin	声音在Firefox OS设备中断时触发,可能是应用程序被切换至后台或者更高优先级的应用占用了音频通道。 相关信息请参考 Using the AudioChannels API
interruptend	声音在Firefox OS设备中断后恢复播放时触发,应用程序被切换至前台或占用更高级音频通道的应用程序播放完毕后触发。相关信息请参考 Using the AudioChannels API
loadedmetadata	媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart	在媒体开始加载时触发。
mozaudioavailable	当音频数据缓存并交给音频层处理时
pause	播放暂停时触发。
play	在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing	在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress	告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
ratechange	在回放速率变化时触发。
seeked	在跳跃操作完成时触发。
seeking	在跳跃操作开始时触发。
stalled	在尝试获取媒体数据，但数据不可用时触发。
suspend	在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate	元素的currentTime属性表示的时间已经改变。
volumechange	在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
waiting	在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。

提示

具体代码示例见 github ：https://github.com/gujunling/H5-study/tree/main/H5/03-%E9%9F%B3%E8%A7%86%E9%A2%91 (opens new window)