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音频

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

?

1

2

3

4

5

6

7

8

9

<article class=”sample”>

    <header><h2>Drums</h2></header>

    <audio id="drums"controls>

        <source src="sounds/ogg/drump.ogg"type="audio/ogg">

        <source src="sounds/mp3/drump.mp3"type="audio/mpeg">

    </audio>

    //当浏览器对上面的两种音频格式都不支持时，可以提供音频资源的下载

    <a href="sounds/mp3/drump.mp3">DownLoad Drump.mp3</a>

</article>

 

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

?

1

2

3

4

5

6

7

8

9

10

<script type="text/javascript"

    charset="utf-8">

      

    $(function(){

        var canPlayAudioFiles=!!(document.createElement('audio').canPlayType);

    if(canPlayAudioFiles){

        $(".sample a").hide();

    };

    });

</script>