<video> 标签

<video> 标签

<video> 允许你轻松地嵌入一段视频。一个简单的例子如下：

    <video id="video" controls autoplay>
      <source src="http://localhost:8080/img/hmbb.mp4"/>
       您的浏览器不支持 video 标签。
    </video>

在标签中 的 source 可以指定多种类型的媒体内容。

媒体文件的内容

像 MP3、MP4、WebM 这些 视频格式，定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。

比如：一个格式为 WebM 的电影包含了

• 视频轨道
• 音频轨道
• 和文本轨道

其中视频轨道包含一个主视频轨道和一个可选的 Angle 轨道； 音频轨道包含英语和西班牙语的音频轨道，还有一个英语评论的音频轨道； 文字轨道包含英语和西班牙语的字幕轨道，如下图所示：

image.png

编解码器

音频和视频轨道以适合的格式保存。音频轨道和视频轨道使用不同的格式。

• 音频轨道都使用音频编解码器进行编码
• 视频轨道则使用视频编解码器进行编码

不同的浏览器支持不同的视频和音频格式, 例如:

• WebM 容器通常包括了 Opus 或 Vorbis 音频和 VP8/VP9 视频。这在所有的现代浏览器中都支持，除了他们的老版本。
• MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。这在所有的现代浏览器中都支持，还有 Internet Explorer。
• 老式的 Ogg 容器往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持，不过这个容器已经被更强大的 WebM 容器所取代

如何使用

一般来说，在页面里签入 <video>标签，结合一些播放器来使用。比如 https://github.com/bilibili/flv.js 等。

END

参考资料

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content