多媒體標簽 · HTML 教程

# 多媒體標簽除了圖像，網頁還可以放置視頻和音頻。 ## `<video>` `<video>`標簽是一個塊級元素，用于放置視頻。如果瀏覽器支持加載的視頻格式，就會顯示一個播放器，否則顯示`<video>`內部的子元素。 ```html <video src="example.mp4" controls> 你的瀏覽器不支持 HTML5 視頻，請下載<a href="example.mp4">視頻文件</a>。 </video> ``` 上面代碼中，如果瀏覽器不支持該種格式的視頻，就會顯示`<video>`內部的文字提示。 `<video>`有以下屬性。 - `src`：視頻文件的網址。 - `controls`：播放器是否顯示控制欄。該屬性是布爾屬性，不用賦值，只要寫上屬性名，就表示打開。如果不想使用瀏覽器默認的播放器，而想使用自定義播放器，就不要使用該屬性。 - `width`：視頻播放器的寬度，單位像素。 - `height`：視頻播放器的高度，單位像素。 - `autoplay`：視頻是否自動播放，該屬性為布爾屬性。 - `loop`：視頻是否循環播放，該屬性為布爾屬性。 - `muted`：是否默認靜音，該屬性為布爾屬性。 - `poster`：視頻播放器的封面圖片的 URL。 - `preload`：視頻播放之前，是否緩沖視頻文件。這個屬性僅適合沒有設置`autoplay`的情況。它有三個值，分別是`none`（不緩沖）、`metadata`（僅僅緩沖視頻文件的元數據）、`auto`（可以緩沖整個文件）。 - `playsinline`：iPhone 的 Safari 瀏覽器播放視頻時，會自動全屏，該屬性可以禁止這種行為。該屬性為布爾屬性。 - `crossorigin`：是否采用跨域的方式加載視頻。它可以取兩個值，分別是`anonymous`（跨域請求時，不發送用戶憑證，主要是 Cookie），`use-credentials`（跨域時發送用戶憑證）。 - `currentTime`：指定當前播放位置（雙精度浮點數，單位為秒）。如果尚未開始播放，則會從這個屬性指定的位置開始播放。 - `duration`：該屬性只讀，指示時間軸上的持續播放時間（總長度），值為雙精度浮點數（單位為秒）。如果是流媒體，沒有已知的結束時間，屬性值為`+Infinity`。下面是一個例子。 ```html <video width="400" height="400" autoplay loop muted poster="poster.png"> </video> ``` 上面代碼中，視頻播放器的大小是 400 x 400，會自動播放和循環播放，并且靜音，還帶有封面圖。這是網站首頁背景視頻的常見寫法。 HTML 標準沒有規定瀏覽器需要支持哪些視頻格式，完全由瀏覽器廠商自己決定。為了避免瀏覽器不支持視頻格式，可以使用`<source>`標簽，放置同一個視頻的多種格式。 ```html <video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> 你的瀏覽器不支持 HTML5 視頻，請下載<a href="example.mp4">視頻文件</a>。 </video> ``` 上面代碼中，`<source>`標簽的`type`屬性的值是視頻文件的 MIME 類型，上例指定了兩種格式的視頻文件：MP4 和 WebM。如果瀏覽器支持 MP4，就加載 MP4 格式的視頻，不再往下執行了。如果不支持 MP4，就檢查是否支持 WebM，如果還是不支持，則顯示提示。 ## `<audio>` `<audio>`標簽是一個塊級元素，用于放置音頻，用法與`<video>`標簽基本一致。 ```html <audio controls> <source src="foo.mp3" type="audio/mp3"> <source src="foo.ogg" type="audio/ogg"> 你的瀏覽器不支持 HTML5 音頻，請直接下載<a href="foo.mp3">音頻文件</a>。 </audio> ``` 上面代碼中，`<audio>`標簽內部使用`<source>`標簽，指定了兩種音頻格式：優先使用 MP3 格式，如果瀏覽器不支持則使用 Ogg 格式。如果瀏覽器不能播放音頻，則提供下載鏈接。 `<audio>`標簽的屬性與`<video>`標簽類似，參見上一節。 - `autoplay`：是否自動播放，布爾屬性。 - `controls`：是否顯示播放工具欄，布爾屬性。如果不設置，瀏覽器不顯示播放界面，通常用于背景音樂。 - `crossorigin`：是否使用跨域方式請求。 - `loop`：是否循環播放，布爾屬性。 - `muted`：是否靜音，布爾屬性。 - `preload`：音頻文件的緩沖設置。 - `src`：音頻文件網址。 ## `<track>` `<track>`標簽用于指定視頻的字幕，格式是 WebVTT （`.vtt`文件），放置在`<video>`標簽內部。它是一個單獨使用的標簽，沒有結束標簽。 ```html <video controls src="sample.mp4"> <track label="英文" kind="subtitles" src="subtitles_en.vtt" srclang="en"> <track label="中文" kind="subtitles" src="subtitles_cn.vtt" srclang="cn" default> </video> ``` 上面代碼指定視頻文件的英文字幕和中文字幕。 `<track>`標簽有以下屬性。 - `label`：播放器顯示的字幕名稱，供用戶選擇。 - `kind`：字幕的類型，默認是`subtitles`，表示將原始聲音成翻譯外國文字，比如英文視頻提供中文字幕。另一個常見的值是`captions`，表示原始聲音的文字描述，通常是視頻原始使用的語言，比如英文視頻提供英文字幕。 - `src`：vtt 字幕文件的網址。 - `srclang`：字幕的語言，必須是有效的語言代碼。 - `default`：是否默認打開，布爾屬性。 ## `<source>` `<source>`標簽用于`<picture>`、`<video>`、`<audio>`的內部，用于指定一項外部資源。單標簽是單獨使用的，沒有結束標簽。它有如下屬性，具體示例請參見相應的容器標簽。 - `type`：指定外部資源的 MIME 類型。 - `src`：指定源文件，用于`<video>`和`<audio>`。 - `srcset`：指定不同條件下加載的圖像文件，用于`<picture>`。 - `media`：指定媒體查詢表達式，用于`<picture>`。 - `sizes`：指定不同設備的顯示大小，用于`<picture>`，必須跟`srcset`搭配使用。 ## `<embed>` `<embed>`標簽用于嵌入外部內容，這個外部內容通常由瀏覽器插件負責控制。由于瀏覽器的默認插件都不一致，很可能不是所有瀏覽器的用戶都能訪問這部分內容，建議謹慎使用。下面是嵌入視頻播放器的例子。 ```html <embed type="video/webm" src="/media/examples/flower.mp4" width="250" height="200"> ``` 上面代碼嵌入的視頻，將由瀏覽器插件負責控制。如果瀏覽器沒有安裝 MP4 插件，視頻就無法播放。 `<embed>`標簽具有如下的通用屬性。 - `height`：顯示高度，單位為像素，不允許百分比。 - `width`：顯示寬度，單位為像素，不允許百分比。 - `src`：嵌入的資源的 URL。 - `type`：嵌入資源的 MIME 類型。瀏覽器通過`type`屬性得到嵌入資源的 MIME 類型，一旦該種類型已經被某個插件注冊了，就會啟動該插件，負責處理嵌入的資源。下面是 QuickTime 插件播放 MOV 視頻文件的例子。 ```html <embed type="video/quicktime" src="movie.mov" width="640" height="480"> ``` 下面是啟動 Flash 插件的例子。 ```html <embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> ``` 上面代碼中，如果瀏覽器沒有安裝 Flash 插件，就會提示去`pluginspage`屬性指定的網址下載。 ## `<object>`，`<param>` `<object>`標簽作用跟`<embed>`相似，也是插入外部資源，由瀏覽器插件處理。它可以視為`<embed>`的替代品，有標準化行為，只限于插入少數幾種通用資源，沒有歷史遺留問題，因此更推薦使用。下面是插入 PDF 文件的例子。 ```html <object type="application/pdf" data="/media/examples/In-CC0.pdf" width="250" height="200"> </object> ``` 上面代碼中，如果瀏覽器安裝了 PDF 插件，就會在網頁顯示 PDF 瀏覽窗口。 `<object>`具有如下的通用屬性。 - `data`：嵌入的資源的 URL。 - `form`：當前網頁中相關聯表單的`id`屬性（如果有的話）。 - `height`：資源的顯示高度，單位為像素，不能使用百分比。 - `width`：資源的顯示寬度，單位為像素，不能使用百分比。 - `type`：資源的 MIME 類型。 - `typemustmatch`：布爾屬性，表示`data`屬性與`type`屬性是否必須匹配。下面是插入 Flash 影片的例子。 ```html <object data="movie.swf" type="application/x-shockwave-flash"></object> ``` `<object>`標簽是一個容器元素，內部可以使用`<param>`標簽，給出插件所需要的運行參數。 ```html <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object> ```