詳解HTML5新增的多媒體標籤

本篇文章給大家介紹HTML常用的多媒體標籤及HTML5新增的多媒體標籤，希望對需要的朋友有幫助！

HTML5新增的多媒體標籤

一：視訊<video>

當前<video>元素支援三種視訊格式：儘量使用MP4格式

瀏覽器	MP4	WebM	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES 從Firefox21版本開始Linux系統從Firefox 30開始	YES	YES
Safari	YES	NO	NO
Opera	YES 從Opera25版本開始	YES	YES

<video controls="controls" autoplay="autoplay" muted="muted" width="500px" height="400px" loop="loop" poster="images/tudou.jpg" preload="none">
    <source src="medio/mov_bbb.mp4">
    <source src="medio/mov_bbb.ogg">
    您的瀏覽器暫不支援<video>標籤播放視訊</video>

視訊<video>——常見屬性

屬性	值	描述
autoplay	autoplay	視訊就緒自動播放（谷歌瀏覽器需新增muted來解決自動播放問題）
controls	controls	向使用者顯示播放控制元件
width	pixels（畫素）	設定播放器寬度
height	pixels（畫素）	播放器高度
loop	loop	迴圈播放
src	url	視訊url地址
poster	imageurl	載入等待的話面圖片
muted	muted	靜音播放

二：音訊<audio>

瀏覽器	MP3	Wav	Ogg
IE 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HTML5音訊標籤</title></head><body>
   <audio controls="controls" autoplay="autoplay" muted="muted" loop="loop">
   <source src="medio/music.mp3" type="audio/mpeg">
   您的瀏覽器不支援audio元素</audio>
   </body>
   </html>

谷歌瀏覽器把音訊和視訊自動播放禁止了

屬性	值	描述
autoplay	autoplay	自動播放
controls	controls	向使用者顯示播放控制元件
loop	loop	迴圈播放
src	url	視訊url地址
muted	muted	靜音播放

多媒體標籤總結

音訊標籤和視訊標籤使用方式基本一致
瀏覽器支援情況不同
谷歌瀏覽器把音訊和視訊自動播放禁止了
我們可以給視訊標籤加muted屬性來靜音播放視訊，音訊不可以（可以通過JavaScript來解決）
視訊標籤是重點，我們經常設定自動播放，不適用conrols控制元件，迴圈和設定大小屬性

【相關推薦：】

以上就是詳解HTML5新增的多媒體標籤的詳細內容，更多請關注TW511.COM其它相關文章！