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

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

<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元素的浏览器进行代码隐藏

<script type="text/javascript"
	charset="utf-8">
	
	$(function(){
		var canPlayAudioFiles=!!(document.createElement('audio').canPlayType);
	if(canPlayAudioFiles){
		$(".sample a").hide();
	};
	});
</script>