HTML 音频视频元素

本文将简单介绍 HTML 中音频和视频元素的使用。

视频和音频有不同的格式

• WebM 容器通常包括了Ogg Vorbis音频和 VP8/VP9 视频，主要在 FireFox 和 Chrome 中支持。
• MP4 容器通常包括了AAC 以及 MP3 音频和 H.264 视频，主要在 Internet Explorer 和 Safari 中支持。
• 老式的 Ogg 容器支持 Ogg Vorbis 音频和 Ogg Theora 视频，主要在 FireFox 和 Chrome 中支持，不过这个容器已经被更强大的 WebM 容器所取代。

音视频元素浏览器兼容表

为了兼容不同的浏览器，我们需要准备不同的音视频格式。

<!-- 只有一种格式，不能兼容Safari或Internet Explorer -->
<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

<!-- 使用多种格式的文件 -->
<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

将src属性移除，将其放在单独的source标签中，浏览器会检查<source>标签，并且播放第一个与其自身codec相匹配的媒体。

应包括WebM和MP4两种格式，目前已经足够支持大多数平台和浏览器

每个<source>标签有一个type属性，它包含了视频文件的 MIME types，同时浏览器会通过检查该属性来迅速跳过不支持的格式，该属性可选，但是如果没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这会消耗大量的时间和资源。

<video>标签的poster属性，指向一个图象的 URL，该图象会在视频播放前显示，通常用于粗略的预览或者广告显示。如果使用autoplay属性，当页面一加载就开始播放视频的话，就不会看到 poster 属性的效果了。

显示音轨文件

WebVTT 格式，通过<track>标签使用：

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

使用方法：

1. 编辑 WebVTT 文件，并以.vtt后缀名保存

   WEBVTT
   
   1
   00:00:22.230 --> 00:00:24.606
   This is the first subtitle.
   
   2
   00:00:30.739 --> 00:00:34.074
   This is the second.
   
     ...

2. 用<track>标签链接.vtt文件，<track>标签需放在<audio>或<video>标签中，同时放在所有<source>标签之后。使用kind属性来指明是哪一种类型，如 subtitles 、 captions 、 descriptions。然后使用srclang属性来告诉浏览器所使用的语言。

音视频格式转换软件

• Miro Video Converter
• Audacity