HTML5視頻<video>/音頻<audio>的用法介紹

woff

HTML5裡引入的新標記<audio>和<video>實現了HTML對視頻播放和音頻播放的原生支持，有了這種原生的HTML5視頻播放器/音頻播放器，能將視頻/音頻嵌入到了網頁中。

如何嵌入視頻和音頻

在網頁裡嵌入HTML5音頻播放器和視頻播放器的方法非常簡單：

1. <video src="http://www.netyea.com/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
   
2.   Your browser does not support the <code>video</code> element.
   
3. </video>

複製代碼

上面這個例子顯示瞭如何播放一個視頻文件，並露出視頻播放控制按鈕。

下面這個例子是在HTML網頁裡嵌入音頻audio的方法：

1. <audio controls autoplay loop src="/test/audio.ogg">
   
2. <p>Your browser does not support the <code>audio</code> element.</p>
   
3. </audio>

複製代碼

這裡的src屬性裡可以填入一個音頻/視頻的URL，也可以是一個本地的文件。

1. <audio src="audio.ogg" controls autoplay loop>
   
2. <p>Your browser does not support the <code>audio</code> element </p>
   
3. </audio>

複製代碼

下面是<audio>和<video>兩個標記上控制屬性的含義：

• controls : 顯示標準的HTML5     視頻/音頻播放器控制條、控制按鈕。
• autoplay : 讓文件自動播放。
• loop : 讓文件循環播放。
  

1. <audio src="audio.mp3" preload="auto" controls></audio>

複製代碼

這裡的preload屬性是用來緩存大體積文件的。它有三個可選值：

• "none" 不緩存
• "auto" 緩存
• "metadata" 只緩存文件元信息
  

為了能夠兼容各種瀏覽器對不同媒體類型的支持，我們可以用多個<source>元素來提供多個不同的媒體類型。例如：

1. <video controls>
   
2.   <source src="foo.ogg" type="video/ogg">
   
3.   <source src="foo.mp4" type="video/mp4">
   
4.   Your browser does not support the <code>video</code> element.
   
5. </video>

複製代碼

支持Ogg格式視頻流的瀏覽器可以播放Ogg文件。如果不支持，可以播放MPEG-4文件。查看各種瀏覽器對各種媒體類型的支持情況，請查看這裡。

我們還可以指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻：

1. <video controls>
   
2.   <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
   
3.   Your browser does not support the <code>video</code> element.
   
4. </video>

複製代碼

上面，我們指定了這個視頻需要使用Dirac 和Speex 解碼器。如果瀏覽器支持Ogg 格式，但沒有指定的解碼器，那麼，視頻將不會被加載。

如果沒有提供type屬性，則瀏覽器會向服務器詢問媒體類型，看看是否支持；如果不支持，瀏覽器將會去檢查下一個source屬性。

用JavaScript控制視頻/音頻播放

一旦視頻文件正確的嵌入到了HTML網頁裡，我們就可以使用JavaScript裡控制它的部分，獲取它的播放信息。比如，用JavaScript啟動視頻播放：

1. var v = document.getElementsByTagName("video")[0];
   
2. v.play();

複製代碼

用JavaScript可控制HTML5視頻播放器實現播放、暫停、快進，快退、音量等。

1. <audio id="demo" src="audio.mp3"></audio>
   
2. <div>
   
3.   <button onclick="document.getElementById('demo').play()">播放</button>
   
4.   <button onclick="document.getElementById('demo').pause()">暂停</button>
   
5.   <button onclick="document.getElementById('demo').volume+=0.1">降低音量</button>
   
6.   <button onclick="document.getElementById('demo').volume-=0.1">提高音量</button>
   
7. </div>

複製代碼

停止下載視頻文件

雖然我們可以使用pause()方法裡讓視頻文件停止播放，但瀏覽器並未停止下載媒體文件，除非它達到了一定的緩存量。

下面是讓瀏覽器如何停止下載視頻文件的方法：

1. var mediaElement = document.getElementById("myMediaElementID");
   
2. mediaElement.pause();
   
3. mediaElement.src='';
   
4. //或
   
5. mediaElement.removeAttribute("src");

複製代碼

通過刪除src屬性(或者設置為空值)，這樣就能停止文件的網絡下載。

設定播放的時間點定位

我們可以指定視頻從某時某分某秒開始播放，這是通過設置currentTime屬性來實現。

我們可以通過seekable屬性來獲得視頻有效的播放時間範圍。它會返回一個TimeRanges對象，能夠告訴你有效的開始時間和結束時間。

1. var mediaElement = document.getElementById('mediaElementID');
   
2. mediaElement.seekable.start(0); //返回開始時間(秒)
   
3. mediaElement.seekable.end(0); //返回結束時間(秒)
   
4. mediaElement.currentTime = 122; //定位到第122秒播放
   
5. mediaElement.played.end(0);  //返回已經播放的時間長度(秒)

複製代碼

設定播放範圍

當在網頁裡嵌入視頻/音頻文件時，<audio>或<video>元素允許我們提供一些額外的信息來指定播放哪一時間段。實現的方法是在媒體文件後面跟隨(“#”)格式的信息。

它的具體語法是這樣的：

1. #t=[開始時間][,結束時間]

複製代碼

時間的表示方法可以使用秒數，也可以提供一個”時:分:秒“ 格式的時間(例如2:05:01)。

舉例：
http://www.netyea.com/video.ogg#t=10,20

指定視頻從10秒開始播放，到20秒處結束。

http://www.netyea.com/video.ogg#t=,10.5

指定視頻從頭開始播放到10.5 秒處。

http://www.netyea.com/video.ogg#t=,02:00:00

指定視頻播放2小時。

http://www.netyea.com/video.ogg#t=60

指定視頻從第60秒開始播放，播放到結束。

如要加圖片預覽

1. <video id="movie" preload controls loop poster="poster.png" width="640" height="360">
   
2.   <source src="aaa.mp4" type="video/mp4" />
   
3.   <source src="aaa.ogv" type="video/ogg" />
   
4.   <source src="aaa.webm" type="video/web" />
   
5.   您的瀏覽器不支援HTML 5影片播放標籤<video>格式。
   
6.   Your browser doesn't support the <video> tag.
   
7. </video>

複製代碼

標籤解釋

• 首先整個HTML我們是使用<video></video>兩的標籤來包著，前面代表開始，後面代表結束。
• <video>標籤裡面有幾個屬性，你可以使用，用法如下：
  
  • autoplay(自動播放)：你可以輸入"autoplay"(開啟自動播放)、"" (空白字串，開啟自動播放)、或不輸入(開啟自動播放)。
  • preload(預先載入)：你可以輸入"none"(關閉預先載入)、"metadata"(開啟預先載入)、"auto"(自動)、"" (空白字串，開啟預先載入)、或不輸入(開啟預先載入)。
  • controls(控制按鈕)：你可以輸入"controls"(開啟控制按鈕)、"" (空白字串，開啟)、或不輸入(開啟)。
  • 瀏覽器預設是沒有其他控制項目的，如果你開啟，你可以提供一些播放控制元件，播放、暂停、定位、音量、全螢幕、字幕（如果可用）、聲道（如果可用），這些可以透過額外的Javascript來完成。
  • loop(播放循環)：你可以輸入"loop"(開啟循環)、"" (空白字串，開啟)、或不輸入(開啟)。
  • poster(預覽圖片)：用來選擇影片播放前，所顯示的圖片，不能空白，若要使用此屬性則請輸入圖片網址。
  • height(影片高度)：請輸入非負的整數，不需輸入單位(px，pixel)。
  • width(影片寬度)：請輸入非負的整數，不需輸入單位(px，pixel)。
  • muted(靜音)：你可以輸入"muted" (開啟靜音)、"" (空白字串，開啟)、或不輸入(開啟)。
  • src(影片位置)：放置影片原始檔的網址，或相對位址。
    
  所以上面提供的範例意思是「這個影片我要有控制按鈕，要預先載入影片，然後影片結束之後要循環播放，在開始播放之前，顯示預覽圖片，寬是640px，高是360px」。
• 再來是中間的<source … />標籤，意思是影片的原始檔位置與類型。
  
  • 檔案位置請用「src="檔案位置"」，這個屬性，如果影片和網站在相同的資料夾，則在「檔案位置」中直接輸入影片檔名(主檔名+副檔名)，如果不是，你可以直接輸入網址如<source src="https://…/~.mp4″ />，例如： <source src="https://example/html5-video-tag/Yif-Magic.mp4″ />
  • 類型的選擇請用「type="video/檔案類型"」，例如，如果附檔名是「.mp4」，則類型的選擇請寫「type="video/mp4″」；如果是「.webm」，則寫「type="video/web"」；注意，如果是「.ogv」，則類型的選擇請寫「type="video/ogg“」，不要問我為什麼，因為我也不知道這個地方就會不一樣。如果想知道個多可以上網Google。
    
• 再來是針對那些無法播放影片的瀏覽者，告訴他們原因，所以我們在</video>的前面告訴他們：「您的瀏覽器不支援HTML 5影片播放標籤<video>格式。」
  

文章來源