Html5系列（十）播放视频

当我们播放视频时有的播放器用软件来解码视频，这样慢还会占用大量的CPU，有的播放器用硬件解码，却限制了可播放的视频格式。

知识点一：视频编解码器

1、H.264

2、Theora（Xiph.Org公司发布）

3、VP8（Google公司发布）

知识点二：音频编解码器

1、AAC（Apple公司使用在iTunes Store上的音频格式）

2、Vorbis（OGG）

3、MP3

知识点三：容器要与编解码器同时工作才能播放视音频

1、OGG容器：含Theora视频和Vorbis音频

2、MP4容器：含H.264视频和AAC音频

3、WebM容器：含VP8视频和Vorbis音频

对浏览器兼容性的设置如下面要在页面中嵌入音频资源

class =”sample”>
    Drums
    "drums" controls>
        "sounds/ogg/drump.ogg" type= "audio/ogg" >
        "sounds/mp3/drump.mp3" type= "audio/mpeg" >

    //当浏览器对上面的两种音频格式都不支持时，可以提供音频资源的下载
    "sounds/mp3/drump.mp3" >DownLoad Drump.mp3

 

同时还可以用js来对不兼容audio元素的浏览器进行代码隐藏

<code class="java string">"text/javascript"</code> </div> <div class="line number2 index1 alt1"> <code class="java spaces">    </code> <code class="java plain">charset=</code> <code class="java string">"utf-8"</code> <code class="java plain">></code> </div> <div class="line number3 index2 alt2"> <code class="java spaces">     </code>  </div> <div class="line number4 index3 alt1"> <code class="java spaces">    </code> <code class="java plain">$(function(){</code> </div> <div class="line number5 index4 alt2"> <code class="java spaces">        </code> <code class="java plain">var canPlayAudioFiles=!!(document.createElement(</code> <code class="java string">'audio'</code> <code class="java plain">).canPlayType);</code> </div> <div class="line number6 index5 alt1"> <code class="java spaces">    </code> <code class="java keyword">if</code> <code class="java plain">(canPlayAudioFiles){</code> </div> <div class="line number7 index6 alt2"> <code class="java spaces">        </code> <code class="java plain">$(</code> <code class="java string">".sample a"</code> <code class="java plain">).hide();</code> </div> <div class="line number8 index7 alt1"> <code class="java spaces">    </code> <code class="java plain">};</code> </div> <div class="line number9 index8 alt2"> <code class="java spaces">    </code> <code class="java plain">});</code> </div> <div class="line number10 index9 alt1"> <code class="java plain">