8 HTML5中新增多媒體播放元素
在HTML5之前休弃，要在網(wǎng)站上展示視頻介牙、音頻逻杖、動畫等多媒體信息奋岁，除了使用第三方自主開發(fā)的播放器之外， 使用的最多的工具應(yīng)該算是FLASH了, 但是它們都需要在瀏覽器中安裝各種插件才能使用荸百， 有時(shí)速度很慢闻伶。
HTML5的出現(xiàn)使這一局面得到了改觀。在HTML5中够话，提供了音頻的標(biāo)準(zhǔn)接口蓝翰，多媒體播放再也不需要安裝插件了光绕， 只需要一個支持HTML5的瀏覽器就可以了。
介紹video元素和audio兩個HTML5新增加的元素, 它們分別用來處理視頻與音頻數(shù)據(jù)畜份。目前Safari 3以上诞帐、Firefox 4以上、Opera 10以上爆雹，以及時(shí)Google chrome 3.0以上的瀏覽器都實(shí)了對這兩個媒體元素的支持停蕉。以audio元素為例，只要把播放視頻的url地址指定給該元素的src屬性就可以了钙态。
18.png
19.png
20.png
還有一些屬性慧起、一些方法和多個事件可用，但需要結(jié)合JavaScript來實(shí)現(xiàn)一些特定的效果册倒。例如蚓挤，通過error屬性可以處理出現(xiàn)的錯誤等，使用networkState屬性讀取當(dāng)前網(wǎng)絡(luò)狀態(tài)驻子。使用play方法來播放媒體灿意，使用load方法重新載入媒體進(jìn)行播放等，通過timeupdate事件來通知當(dāng)前播放位置的改變崇呵，再結(jié)合JavaScript來顯示當(dāng)前的播放進(jìn)度等脾歧。
test.html
<!doctype html>
<meta charset="utf-8">
<!-- audio controls autoplay>
<source src="test.mp3" type="audio/mp3"/>
<source src="test.ogg" type="audio/ogg"/>
<source src="test.wav" type="audio/wav"/>
你的瀏覽器不支支持媒體格式!
</audio -->
<video controls autoplay loop width="500" height="200" poster="test.jpg">
<source src="test.webm" type="audio/webm"/>
<source src="test.ogg" type="audio/ogg"/>
你的瀏覽器不支支持媒體格式!
</video>
3.html
<!doctype html>
<meta charset="utf-8">
<!--視頻標(biāo)簽-->
<video src="test.webm" controls loop width="1600" height="1000" >
您的破瀏覽器不支持視頻video標(biāo)簽
</video>
<!--完整視頻格式-->
<video controls>
<source src="test.webm" type="video/webm">
<source src="test.ogg" type="video/ogg">
您的破瀏覽器不支持視頻video標(biāo)簽
</video>
2.html
<!doctype html>
<meta charset="utf-8">
<!--音頻標(biāo)簽-->
<audio src="_WStyle.mp3" controls >您的瀏覽器不支持音頻功能</audio>
<hr>
<!--完整音頻格式-->
<audio controls >
<source src="_WStyle.mp3" type="audio/mp3" >
<source src="_WStyle.ogg" type="audio/ogg" >
<source src="_WStyle.wav" type="audio/wav" >
您的瀏覽器不支持音頻功能
</audio>
