HTML5:向網頁中新增視訊和音訊
向網頁中新增視訊:video標籤的使用
video標籤有很多屬性用於控制視訊的播放:
- src 用於指定視訊檔案的路徑。
- poster 用於指定一個影象,在當前視訊播放之前或視訊資料無效時顯示(預覽圖)。視訊資料無效可能是視訊正在載入,可能是視訊地址錯誤等等。
- controls 用於向瀏覽器指明頁面製作者沒有使用指令碼生成播放控制器,需要瀏覽器提供預設的播放控制元件(須包括播放暫停控制、播放進度控制、音量控制等)。
- loop 用於指定視訊是否迴圈播放,是一個布林屬性。
autoplay 用於設定視訊是否自動播放,是一個布林屬性。
注意:HTML中布林屬性的值不是true和false。正確的用法是,在標籤中使用此屬性表示true,此時屬性要麼沒有值,要麼其值恆等於它的名字;而在標籤中不使用此屬性表示false。
preload 用於在沒有設定autoplay時定義視訊是否預載入,它有三個可選擇的值:none、metadata、auto。如果不使用此屬性,預設為auto。
None:不進行預載入。使用此屬性值,可能是頁面製作者認為使用者不期望此視訊,或者減少HTTP請求。
Metadata:部分預載入。使用此屬性值,代表頁面製作者認為使用者不期望此視訊,但為使用者提供一些元資料(包括尺寸、首幀影象、播放列表、持續時間等)。
Auto:全部預載入。
video標籤內可以包含多個source標籤:
source標籤 用於給媒體指定多個可選擇的(瀏覽器最終只能選一個)檔案地址,且只能在video標籤沒有使用src屬性時使用。瀏覽器按source標籤的順序檢測標籤指定的媒體是否能夠播放(可能是媒體格式不支援,媒體不存在等等),如果不能播放,換下一個。此方法多用於相容不同的瀏覽器。source標籤本身不代表任何含義,不能單獨出現。
此標籤包含src、type、media三個屬性:
- src用於指定媒體的地址,和video標籤的一樣。
- type:用於說明src屬性指定媒體的型別,幫助瀏覽器在獲取媒體前判斷是否支援此類別的媒體格式。
- media:用於說明媒體在何種媒介中使用,不設定時預設值為all,表示支援所有媒介。
除此之外,video標籤內還可以包含當指定的視訊都不能播放時,返回的內容。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Adding HTML5 Video</title >
</head>
<body>
<video src="video/snow.mp4"
poster="images/snow.jpg"
width="320" height="240"
controls
autoplay
loop>
<p>A video of snow in WHU</p>
</video>
</body>
</html>
向網頁中新增音訊:audio標籤的使用
audio標籤有很多屬性用於控制音訊的播放:
- src 用於指定音訊檔案的路徑。
- controls 用於表明播放器是否顯示播放控制元件。如果沒有該特性,播放控制元件就會預設隱藏。
- loop 用於指定音訊是否迴圈播放,是一個布林屬性。
- autoplay 用於設定音訊是否自動播放,是一個布林屬性。
- preload 用於在沒有設定autoplay時定義音訊是否預載入。它可選用的值與video標籤的可選值相同。
audio標籤內可以包含多個source標籤,其用法與video內的相同。
類似地,audio標籤內還可以包含當指定的音訊都不能播放時,返回的內容。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Adding HTML5 Audio</title>
</head>
<body>
<audio controls autoplay loop>
<source src="happy birthday.mp3" type="audio/mpeg">
<source src="happy birthday.ogg" type="audio/ogg">
<p>This browser does not support our audio format.</p>
</audio>
</body>
</html>