web 中的音频和视频
<video> 标签
<video>
允许你简单的嵌入一段视频
src
同 <img>
标签使用方式相同,src 属性指向你想要嵌入网页当中的视频资源
controls
用户必须能够控制视频和音频的回放功能。你可以使用浏览器提供的控制接口,同时你也可以在 JavaScript (JavaScript API)当中使用这些控制接口。
<video>
标签内的段落这个叫做后备内容 — 当浏览器不支持 <video>
标签的时候,它将会显示出来,它使我们能够对旧的浏览器做一些兼容处理。
多格式支持
不同的浏览器对视频格式的支持不同。
像 MP3、MP4、WebM这些术语叫做容器格式。他们是用不同的方式来播放音频或者视频的 — 也就是说这些容器是用不同的音频轨道、视频轨道、元数据来呈现媒体文件的
视频和音频都有不同的格式,如下:
- WebM 容器通常包括了 Ogg Vorbis 音频和 VP8/VP9 视频。主要在 FireFox 和 Chrome 当中支持。
- MP4 容器通常包括 AAC 以及 MP3 音频和 H.264 视频。主要在 Internet Explorer 和 Safari 当中支持。
- 老式的 Ogg 容器往往支持 Ogg Vorbis 音频和 Ogg Theora 视频。主要在 Firefox 和 Chrome 当中支持,不过这个容器已经被更强大的 WebM 容器所取代。
音频播放器将会直接播放音频文件,,例如 MP3 和 Ogg 文件。这些不需要容器。
面对不同浏览器支持不同格式我们该怎么做呢?
<video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p> </video>
将 src
属性从 <video>
标签中移除,转而将它放在几个单独的标签 <source>
当中。在这个例子当中,浏览器将会检查 <source>
标签,并且播放第一个与其自身 codec 相匹配的媒体。
每个 <source>
标签页含有一个 type
属性,这个属性是可选的,它包含了视频文件的 MIME types。浏览器会通过检查这个属性来迅速的跳过那些不支持的格式。
如果你没有添加 type
属性,浏览器会尝试加载每一个文件,直到找到一个能正确播放的格式,这样会消耗掉大量的时间和资源。
其他 <video> 特性
width
和 height
你可以用属性控制视频的尺寸,也可以用 CSS 来控制视频尺寸
autoplay
这个属性会使音频和视频内容立即播放,即使页面的其他部分还没有加载完全。
loop
这个属性可以让音频或者视频文件循环播放。
muted
这个属性会导致媒体播放时,默认关闭声音。
poster
这个属性指向了一个图像的URL,这个图像会在视频播放前显示。通常用于粗略的预览或者广告。
这个属性被用来缓冲较大的文件,有3个值可选:
"none"
:不缓冲"auto"
:页面加载后缓存媒体文件"metadata"
:仅缓冲文件的元数据
<audio> 标签
<audio>
标签与 <video>
标签的使用方式几乎完全相同,有一些细微的差别比如下面的边框不同
<audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>你的浏览器不支持 HTML5 音频,可点击<a href="viper.mp3">此链接</a>收听。</p> </audio>
显示音轨文本
显示字幕
WebVTT 是一个格式,用来编写文本文件,这个文本文件包含了众多的字符串,这些字符串会带有一些元数据,它们可以用来描述这个字符串将会在视频中显示的时间,甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ,你可以根据不同的需求来显示不同的样式,最常见的如下:
- subtitle
- 通过添加翻译字幕,来帮助那些听不懂外国语言的人们理解音频当中的内容。
- captions
- 同步翻译对白,或是描述一些有重要信息的声音,来帮助那些不能听音频的人们理解音频中的内容。
- timed descriptions
- 将文字转换为音频,用于服务那些有视觉障碍的人
WEBVTT
1
00:00:22.230 --> 00:00:24.606
第一段字幕
2
00:00:30.739 --> 00:00:34.074
第二段
...
让其与 HTML 媒体一起显示
- 以 .vtt 后缀名保存文件。
- 用
<track>
标签链接 .vtt 文件,<track>
标签需放在<audio>
或<video> 标签当中
,同时需要放在所有 <source> 标签之后。使用kind
属性来指明是哪一种类型,如 subtitles 、 captions 、 descriptions。然后,使用srclang
来告诉浏览器你是用什么语言来编写的 subtitles。
<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>