<video> 标签
<video> 允许你轻松地嵌入一段视频。一个简单的例子如下:
代码语言:javascript复制 <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