音视频标签总结

音视频标签总结

音视频的理解

容器

大多数人会认为视频文件就是 .avi .mp4，但事实上 avi 和 mp4 仅仅是容器的格式，它只决定怎么将视频存储起来，而不关系存储的内容。有点类似于 .zip。

• 视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据。

• 视频播放的时候，音频轨道和视频轨道是绑定在一起的。

• 元数据包含了视频的封面、标题、子标题、字幕等相关信息。

编解码器

音频和视频的编码 / 解码是一组算法，用来对一段特定音频或视频进行编码和解码，一遍音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播就要花费很多的时间。如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。

• 现在的视频解码器会使用各种技巧减少从一帧到另一帧过程中传递的信息数量，它们不会存储每一帧的所有信息，而只是存储两帧之间的差异信息。

• 编码器也分有损和无损，无损视频文件一般太大，在网页中没有优势，所以我们重点研究有损编码器就行了。

• 有损编码器中，信息在编码过程中丢失是无法避免的，反复对视频编码会导致画面不均匀。

• 目前还没有一种编解码和容器的组合能应用于所有的浏览器中。

音视频相关的标签

video 是 HTML5 提供的播放视频的标签。

标签属性：

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

audio 是 HTML5 提供的播放音频的标签。

标签属性：

属性	描述
src	资源地址。
controls	显示或隐藏用户控制界面。
autoplay	媒体是否自动播放。
loop	媒体是否循环播放。
muted	是否静音。
preload	是否在页面加载后载入音频。 none：当页面加载后不载入音频。 metadata：当页面加载后只载入元数据。 auto：当页面加载后载入整个音频。

<!-- 播放视频 -->
<video src="xxx.mp4" controls></video>

<!-- 播放音频 -->
<audio src="xxx.mp3" controls></audio>

资源标签

source 标签为媒体元素定义媒体资源。

标签属性：

1. src：资源地址。
2. type：规定媒体资源的 MIME 类型，可以选择包含 codecs 参数。（指定编解码器的信息）

<!-- 音频限制类型 -->
<source src="xxx.ogg" type="audio/ogg">

<!-- 视频限制类型 -->
<source src="xxx.mp4" type="video/mp4">

视频标签兼容模式

<video controls width="300" height="300">
  <!-- 如果第一个媒体资源请求不成功，就会请求下一个媒体资源 -->
  <source src="xxx.mp4" type="video/mp4">
  <source src="xxx.ogv" type="video/ogg">
  <source src="xxx.webm" type="video/webm">
  <!-- 不支持 video 标签的浏览器才会显示这句话 -->
  当前浏览器不支持 video 直接播放，点击这里下载视频：<a href="xxx.mp4">下载视频</a>
</video>

音频标签兼容模式

<audio controls>
  <!-- 如果第一个媒体资源请求不成功，就会请求下一个媒体资源 -->
  <source src="xxx.mp3" type="audio/mpeg">
  <source src="xxx.aac" type="audio/aac;codecs='aac'">
  <source src="xxx.ogg" type="audio/ogg;codecs='vorbis'">
  <!-- 不支持 audio 标签的浏览器才会显示这句话 -->
  当前浏览器不支持 audio 直接播放，点击这里下载音频：<a href="xxx.mp3">下载音频</a>
</audio>

音视频js相关属性

video 和 audio 相同部分：

属性	描述
duration	媒体总时间。（只读）
currentTime	开始播放到现在所用的时间。
volume	0-1 的音量相对值。
muted	是否静音。（比 volume 优先级要高）
paused	媒体是否暂停。（只读）
ended	媒体是否播放完毕。（只读）
error	媒体发生错误的时候，返回错误代码。（只读）
currentSrc	以字符串的形式返回媒体地址。（只读）

video 多的 js 属性：

属性	描述
poster	视频部分前的预览图片。
width	设置视频的宽度。
height	设置视频的高度。
videoWidth	视频的实际宽度。
videoHeight	视频的实际高度。

音视频js相关函数

1. play()：媒体播放。
2. pause()：媒体暂停。
3. load()：重新加载媒体。

注意：如果中途音视频的src发生改变，必须通过 load() 函数重新加载媒体，否则音视频不会生效。

音视频js相关事件

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