極客書

HTML5 - Audio & Video

HTML5的功能包括無需Flash的本地音頻和視頻支持。

HTML5<音頻>和<視頻>標記使向網站添加媒體變得簡單。您需要設置src公司屬性來標識媒體源並包含一個controls屬性，以便用戶可以播放和暫停媒體。

Embedding Video

以下是在網頁中嵌入視頻文件的最簡單形式;

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

當前的HTML5草案規範沒有指定瀏覽器應該在視頻標籤中支持哪些視頻格式。但最常用的視頻格式是&負;

  • Ogg−帶有dora視頻編解碼器和Vorbis音頻編解碼器的Ogg文件。

  • 帶H.264視頻編解碼器和AAC音頻編解碼器的mpeg4文件。

您可以使用<source>標記指定介質、介質類型和許多其他屬性。一個視頻元素允許多個源元素，瀏覽器將使用第一個識別的格式−

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

這將產生以下結果&負;

Video Attribute Specification

HTML5視頻標籤可以有許多屬性來控制控制項的外觀和各種功能;

Sr.No. Attribute & Description
1

自動播放

如果指定了此布爾屬性，視頻將在不停止加載數據的情況下自動開始播放。
2

自動緩衝

此布爾屬性如果指定，則視頻將自動開始緩衝，即使未設置爲自動播放。
3

控制項

如果存在此屬性，它將允許用戶控制視頻播放，包括音量、查找和暫停/恢復播放。
4

高度

此屬性指定視頻顯示區域的高度（以CSS像素爲單位）。
5

循環

此布爾屬性（如果指定）將允許視頻在到達結尾後自動返回到開始位置。
6

預載

此屬性指定視頻將在頁面加載時加載並準備運行。如果存在自動播放，則忽略。
7

海報

這是在用戶播放或查找之前要顯示的圖像的URL。
8

src公司

要嵌入的視頻的URL。這是可選的;您可以使用視頻塊中的<source>元素指定要嵌入的視頻。
9

寬度

此屬性指定視頻顯示區域的寬度（以CSS像素爲單位）。

Embedding Audio

HTML5支持<audio>標記，用於在HTML或XHTML文檔中嵌入聲音內容，如下所示。

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

當前的HTML5草案規範沒有指定瀏覽器應該在音頻標籤中支持哪些音頻格式。但最常用的音頻格式是ogg、mp3和wav。

您可以使用<source&ggt;標記指定媒體、媒體類型和許多其他屬性。一個音頻元素允許多個源元素，瀏覽器將使用第一個識別的格式−

Live Demo 
<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

這將產生以下結果&負;

Audio Attribute Specification

HTML5音頻標籤可以有許多屬性來控制控制項的外觀和各種功能;

Sr.No. Attribute & Description
1

自動播放

如果指定了此布爾屬性，音頻將在不停止加載數據的情況下自動開始播放。
2

自動緩衝

如果指定此布爾屬性，則音頻將自動開始緩衝，即使未設置爲自動播放。
3

控制項

如果此屬性存在，則允許用戶控制音頻播放，包括音量、搜索和暫停/恢復播放。
4

循環

此布爾屬性（如果指定）將允許音頻在到達結尾後自動返回到開頭。
5

預載

此屬性指定音頻將在頁面加載時加載並準備運行。如果存在自動播放，則忽略。
6

src公司

要嵌入的音頻的URL。這是可選的;您可以使用視頻塊中的<source>元素指定要嵌入的視頻。

Handling Media Events

HTML5音頻和視頻標籤可以有許多屬性來使用JavaScript控制控制項的各種功能;

S.No. Event & Description
1

中止

此事件在中止播放時生成。
2

（B）Canplay（B）

此事件是在有足夠的數據可供播放媒體時生成的。
3

結束

回放完成時生成此事件。
4

錯誤

發生錯誤時生成此事件。
5

加載數據

此事件在媒體的第一幀完成加載時生成。
6

下載開始

此事件在加載媒體開始時生成。
7

暫停

暫停播放時生成此事件。
8

播放

播放開始或繼續時生成此事件。
9

進展

此事件定期生成，以通知媒體下載的進度。
10

稅率變動

此事件在播放速度更改時生成。
11

探索者

搜索操作完成時生成此事件。
12

尋找

此事件在搜索操作開始時生成。
13

暫停

此事件是在暫停加載媒體時生成的。
14

體積變化

此事件在音頻音量更改時生成。
15

等待

當請求的操作（例如回放）被延遲以等待另一個操作（例如查找）的完成時，會生成此事件。

下面是允許播放給定視頻的示例;

Live Demo 
<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

這將產生以下結果&負;

Configuring Servers for Media Type

默認情況下，大多數伺服器不提供具有正確MIME類型的Ogg或mp4媒體，因此您可能需要爲此添加適當的配置。