你的位置:首页 > 网页设计

[网页设计]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>