1. 程式人生 > >HTML5:向網頁中新增視訊和音訊

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>