9.HTML音频和视频

                                             第九章 音频和视频

一、音频和视频的概念

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

   1、视频容器：视频文件包含音频轨道，视频轨道，其他的元数据。

            视频在播放时音频轨道和视频轨道绑在一起

        主流视频格式为：.avi/.flv/.mp4/.mkv/.ogg/.webm

   2、编解码器：是一组算法，

        主流的音频解码器：AAC/MPEG-3/Ogg/Voribs

        视频解码器：H.264/VP8/Ogg/Theora

   3、浏览器支持情况

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

       WebM（主流）              VP8          Vorbis      ×        √          √

         OGG（）               Theora         Vorbis      ×        √          √

    MPEG-4（兼容性最好）        H.264          AAC        √        ×         疑问？（现在支持，以后可能不支持）

          

            WebM不但清晰度高，还免费，不受限制许可的使用源码和专利权。

二、video视频元素

   1、src/width/height  上面讲过。

   2、autoplay  设置后，表示立刻开始播放视频。

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

       *预加载设置：preload有三个属性，none  表示播放器什么都不加载，第一帧也不加载，只有点击进去后才会慢慢加载。

                                       metadata  表示播放之前只能加载元数据（宽高，第一帧等信息）。

                                       auto  表示请求浏览器尽快下载整个视频。（未点进去之前就已经在加载了）

             <video src="http://li.cc/text.webm" width="640" height="480" controls preload></video>   //进去后会先缓存后面的视频内容。

             

 

   4、controls  设置后，表示显示播放控制。

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

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

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

         例一、<video src="text.webm" width="640" height="480" controls autoplay loop muted></video>

               <video src="text.webm" width="640" height="480" controls poster="图片"></video>     //视频未点进去时的画面

      

       *兼容多个浏览器

         例二、<video width="640" height="480" controls>

                  <source src="text.webm">                 }

                  <source src="text.mp4">                  } 里边可以写多个同一个视频格式，来保证可以在大多数浏览器支持播放

                  <source src="text.ogg">                  }

               </video>

 

 

三、audio 音频元素：除了没有宽高，和视频元素基本一样。

 

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

 

 

 

让视频在页面水平居中

<center><video class="video" src="cehui.mp4" width="640" height="400" controls loop preload poster=".."></video></center>