HTML5视频和音频

音视频容器

 

无论是音频文件还是视频文件，实际上都是一个容器文件，这一点有点类似于压缩了一组文件的ZIP文件。

 

我们可以把视频文件看作是AVI文件或者MP4文件。AVI和MP4仅仅是视频文件的格式。视频文件格式只是定义了如何在容器中存储东西，而不是定义可以存储什么类型的数据。

 

视频容器（文件）包含音频轨道、视频轨道和其他一些元数据（封面，标题，字幕等）。

 

视频的容器格式有很多，目前比较重要的有：

 

1. Flash 通常以 .flv结尾。
2. MPEG-4 通常以 .mp4或则.m4v为扩展名。
3. OGG 通常以 .ogv作为扩展名。
4. Vudio Video Interleave 通常以 .avi结尾。
5. WebM WebM是一种新的容器格式。

 

音视频编解码器

 

音频和视频编解码器是一组算法，用来对一段特定音频或者视频流进行解码和编码，以便音频和视频能够正常播放。原始的媒体文件体积非常大，如果不对其进行编码，那么构成一段音频和视频的数据会非常庞大，以至于在网络上传输耗费时间过长。编解码器可以读懂特定的容器格式，并能对其中的音频轨道和视频轨道进行解码。解码的过程就是把编码过的数据重组为原始的媒体数据。

 

1. HTML5中使用最多的音频编解码器：AAC、MPEG-3、Ogg Vorbis
2. HTML5中使用最多的视频编解码器：H.264（H265）、VP8、Ogg Theora

 

使用标签

 

audio

    <audio></audio>

     音频标签      

     使用controls=""将控件展示出来

 

 

video 

     <video></video>

     视频标签      

     使用controls=""将控件展示出来

source

     <source src=”sr1”></srouce>

     使用source标签可以设置多个源     

  

 

使用video元素播放视频

 

在HTML4版本之前，大多数视频是通过插件来显示的（比如flash插件），然而并不是所有的浏览器都装有相同的插件。解决了HTML4版本之前必须使用第三方插件显示视频的问题，HTML5提出了一种通过video元素来引入视频的标准方法。

 

<video>标签的属性有很多，常见的属性如下：

 

1. controls  ：显示或隐藏用户控制界面
2. autoplay  ：媒体是否自动播放
3. loop     ：媒体是否循环播放
4. width/height：设置播放器的宽和高，只能使用绝对值，比320px。
5. poster：用于指定一张图片，在当前视频数据无效时显示。视频数据无效可能是视频正在加载，也可能是视频地址错误等。
6. muted：布尔属性，用来指示是否静音，默认值为false，表示视频播放时，音频也会播放。
7. preload：none，不预先加载数据；metedata，预先加载媒体文件基本信息（时长，大小）；auto，由浏览器自动加载合适的数据（元数据和视频数据）。

  

video元素的属性和方法：

 

1. controls: true 是否显式控件
2. loop: true 是否循环播放
3. currentTime  : 当前的播放进度（已经播放多长时间）目前播放的时间点
4. duration  :  （只读）媒体总播放时长
5. volume  :   音量相对值，范围是0.0-1.0
6. muted  :   指示媒体是否处于静音状态，false，没有静音，true，静音
7. paused  :   （只读）指示媒体是否处于暂停状态，true表示处于暂停状态。
8. ended   :   （只读）指示媒体是否播放完毕，false表示没有播放完毕。
9. error   :  （只读）媒体发生错误的时候，返回错误代码
10. currentSrc  :   （只读）以字符串的形式返回媒体地址
11. videoWidth/videoHeight：（只读）视频的实际尺寸
12. play()  :  媒体播放
13. pause()  :  媒体暂停
14. load()  :  重新加载媒体文件

 

 

不同的浏览器使用的编解码器可能也不同，如果想要在更多的浏览器上都能正常地播放视频，那么就需要为video元素提供至少两种不同的视频文件，这时就用到了一种新的元素：<source>元素。

 

<source>元素可以用来链接不同的媒体文件，例如音频和视频。常用的属性如下：

 

1. src 提供媒体源的URL地址。
2. type 包含媒体源的播放类型，通常用在视频格式中。

 

Video元素允许有多个source元素，浏览器将选择第一个可识别的文件地址，如果不能正常播放，换下一个。一旦找到后，就播放该文件并忽略其他文件。具体代码如下：

 

<video autoplay="true" controls="true" loop="true" width="320" height="240" poster="img/b.jpg">

  <source src="res/Intermission-Walk-in_512kb.mp4" type="video/mp4">

  <source src="res/Intermission-Walk-in.ogv" type="video/ogv">

</video>

 

使用audio元素播放音频

 

Audio元素能够用来播放声音文件或者音频流。Audio元素的属性和video元素相比少了三个属性，这三个属性分别是width、height、poster。除了这三个属性之外，其他的都跟video元素的属性一样。