第六十六节，htnl音频视频

htnl音频视频

 

学习要点：

    1.音频和视频概述

    2.video视频元素

    3.audio音频元素

本章主要探讨HTML5中音频和视频元素，经过这两个原生的媒体元素向HTML页面中嵌入音频和视频。

 

一．音频和视频概述

首先，咱们要理解两个概念：容器（container）和编解码器(codec)。

1.视频容器

音频文件或视频文件，都只是一个容器文件。视频文件包含了音频轨道、视频轨道和其余一些元数据。视频播放时，音频轨道和视频轨道是绑定在一块儿的。元数据包含了视频的封面、标题、子标题、字幕等相关信息。主流视频容器支持的格式为：.avi、.flv、.mp四、.mkv、 .ogg、.webm。

 

2.编解码器

 音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频可以播放。原始的媒体文件体积很是巨大，若是不对其进行编码，那么数据量是 很是惊人的，在互联网上传播则要耗费没法忍受的时间；若是不对其进行解码，就没法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-三、Ogg Voribs，视频编解码器：H.26四、VP八、Ogg Theora。

 

3.浏览器支持状况

 起初，HTML5规范原本打算指定编解码器，但实施起来极为困难。部分厂商已有本身的标准，不肯实现标准；而有一些编解码器受专利保护，须要支付昂贵费用。最终放弃了统一 规范的要求，致使各个浏览器实现本身的标准。

       容器格式        视频编解码 音频编解码 IE9+ Firefox5+ Chrome13+

         WebM         VP8        Vorbis      ×        √           √

          OGG        Theora      Vorbis      ×        √           √

        MPEG-4       H.264        AAC        √        ×         疑问？

除了上面三款浏览器，还有Safari5+支持MPEG-4,Opera11支持WebM和OGG，经过这组数据，只要备好MP4和OGG格式的便可，但对于新的高清标准WebM，固然是很是必要的。由于WebM不但清晰度高，并且免费，不受限制许可的使用源码和专利权。目前Chrome浏览器，为了推广WebM格式的视频。声称将来将放弃H.264编码的视频，因此有可能在之后的版本中没法播放MP4的视频。固然，目前演示的版本仍是支持的。

 

二．video视频元素

以往的视频播放，须要借助Flash插件才能够实现。但Flash插件的不稳定性常常让浏览器致使崩溃，所以不少浏览器或系统厂商开始抛弃它。而取代它的正是HTML5的video元素。

 <video>元素的属性

        属性名称                                 说明

           src       视频资源的URL

         width       视频宽度

         height      视频高度

        autoplay     设置后，表示马上开始播放视频

        preload      设置后，表示预先载入视频

        controls     设置后，表示显示播放控件

          loop       设置后，表示反复播放视频

         muted       设置后，表示视频处于静音状态

         poster      指定视频数据载入时显示的图片

 

 1.嵌入一个WebM视频

 <video src="3456.mp4" width="800" height="600"></video>

解释：<video>插入一个视频，主流的视频为.webm，.mp4，.ogg等。src表示资源URL；width表示宽度；height表示高度。

 

2.附加一些属性

  <video src ="3456.mp4" width="800" height="600" autoplay controls loop muted></video>

效果：

 解释：autoplay表示自动开始播放；controls表示显示播放控件；loop表示循环播放；muted表示静音。

 

3.预加载设置

 <video src="3456.mp4"width="800" height="600"controls preload="none"></video>

 解释：preload属性有三个值：none表示播放器什么都不加载；metadata表示播放以前只能加载元数据（宽高、第一帧画面等信息）；auto表示请求浏览器尽快下载整个视 频。

 

4.使用预览图，定义缩略图

<video src="3456.mp4" width="600" height="400" controls poster="22.png"></video>

效果：

 解释：poster属性表示在视频的第一帧，作一张预览图。

 

5.兼容多个浏览器

 <video width="800" height="600" controls poster="img.png"> <!--设置宽度和高度，和缩略图-->
    <source src="test.webm"> <!--不一样的浏览器，支持不一样的格式，浏览器会根据本身支持的格式来选择播放-->
    <source src="test.mp4">
    <source src="test.ogg">
    <object>这里引入flash播放器实现IE9如下，但不必了</object>
 </video>

 解释：经过<source>元素引入多种格式的视频，让更多的浏览器保持兼容。

 

二．audio音频元素

和video元素同样，audio元素用于嵌入音频内容，而音频元素的属性和视频元素相似。音频的支持度和视频相似，使用<source>元素引入多种格式兼容便可。主流的音频格式有：.mp3，.m4a，.ogg，.wav。

        属性名称                                 说明

           src       视频资源的URL

        autoplay     设置后，表示马上开始播放视频

        preload      设置后，表示预先载入音频

        controls     设置后，表示显示播放控件

 

1.嵌入一个音频

 <audio src="666.mp3" controls autoplay></audio>

效果：

解释：和嵌入视频一个道理。

 

2.兼容多个浏览器

<audio controls> <!--定义音频文件，显示控件-->
    <source src="666.mp3"> <!--各类浏览器支持不一样的格式，浏览器根据支持状况选择播放-->
    <source src="test.m4a">
    <source src="test.wav">
</audio>

解释：略。

PS：更多设计到API的JavaScript控制，将在之后的基于JavaScript基础后讲解。