HTML5視頻標簽video和音頻標簽audio標簽的正確用法

來源：本站原創(chuàng)|時間：2020-01-11|欄目：CSS/HTML|點擊：次

如何嵌入視頻和音頻

在網(wǎng)頁里嵌入HTML5音頻器和視頻器的方法非常簡單：

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

上面這個例子顯示了如何一個視頻文件，并露出視頻控制按鈕。

下面這個例子是在HTML網(wǎng)頁里嵌入音頻 audio 的方法：

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

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

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

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

controls : 顯示標準的 HTML5 視頻/音頻器控制條、控制按鈕。
autoplay : 讓文件自動。
loop : 讓文件循環(huán) 。

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

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

"none" 不緩存
"auto" 緩存
"metadata" 只緩存文件元信息
為了能夠兼容各種瀏覽器對不同媒體類型的支持，我們可以用多個 <source> 元素來提供多個不同的媒體類型。例如：

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

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

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

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

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

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

用JavaScript控制視頻/音頻

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

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

用JavaScript可控制HTML5視頻器實現(xiàn) 、暫停、快進，快退、音量等。

<audio id="demo" src="audio.mp3"></audio>
<div>
 <button onclick="document.getElementById('demo').play()">      </button>
 <button onclick="document.getElementById('demo').pause()">暫停</button>
 <button onclick="document.getElementById('demo').volume+=0.1">降低音量</button>
 <button onclick="document.getElementById('demo').volume-=0.1">提高音量</button>
</div>

停止下載視頻文件

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

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

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//或
mediaElement.removeAttribute("src");

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

設定的時間點定位

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

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

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0); // 返回開始時間 (秒)
mediaElement.seekable.end(0);  // 返回結(jié)束時間 (秒)
mediaElement.currentTime = 122; // 定位到第 122 秒      
mediaElement.played.end(0);   // 返回已經(jīng)      的時間長度(秒)

設定范圍

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

它的具體語法是這樣的：

#t=[開始時間][,結(jié)束時間]
時間的表示方法可以使用秒數(shù)，也可以提供一個 ”時:分:秒“ 格式的時間(例如 2:05:01 )。/p>

舉例：

//www.jb51.net/video.ogg#t=10,20
指定視頻從10秒開始，到20秒處結(jié)束。
//www.jb51.net/video.ogg#t=,10.5
指定視頻從頭開始到 10.5 秒處。
//www.jb51.net/video.ogg#t=,02:00:00
指定視頻 2小時。
//www.jb51.net/video.ogg#t=60
指定視頻從第60秒開始，到結(jié)束。

設置視頻封面(poster參數(shù))

當視頻不是自動時，在有些瀏覽器里，視頻在未前的缺省界面是空白，這樣很沒有意義，我們可以給視頻設定一個封面，用視頻里的某個比較具有代表意義的畫面截圖作為視頻的封面，設定視頻封面的參數(shù)是 poster:

<video poster='cover.jpg' src="http://www.jb51.net/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
 Your browser does not support the <code>video</code> element.
</video>

當視頻加載遇到錯誤時的補救方法
有時候視頻資源會失效，或加載失敗，或者瀏覽器不能解碼當前視頻格式，當遇到這種情況，我們應該給與補救措施，替換當前視頻資源地址，或用其它措施補救，比如將video對象替換成圖片。我們可以使用JavaScript對視頻加載中的“error”事件進行監(jiān)聽，比如對于下面的視頻資源：

<video controls>
 <source src="dynamicsearch.mp4" type="video/mp4"></source>
 <a href="dynamicsearch.mp4" rel="external nofollow" >
  <img data-original="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
 </a>
 <p>Click image to play a video demo of dynamic app search</p>
</video>

我們使用下面的js代碼進行補救：

var v = document.querySelector('video'),
  sources = v.querySelectorAll('source'),
  lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
 var d = document.createElement('div');
 d.innerHTML = v.innerHTML;
 v.parentNode.replaceChild(d, v);
}, false);

更多關(guān)于HTML5視頻器video標簽和音頻器audio標簽的正確用法請點擊查看下面的相關(guān)文章

上一篇：詳解IE6中的position：fixed問題與隨滾動條滾動的效果

欄目：CSS/HTML

下一篇：html5手機觸屏touch事件介紹

本文標題：HTML5視頻標簽video和音頻標簽audio標簽的正確用法

本文地址：http://mengdiqiu.com.cn/a1/CSS_HTML/11488.html

更多CSS/HTML