HTML5裏引入的新標記 <audio>
和 <video>
實現了HTML對視頻播放和音頻播放的原生支持,有了這種原生的HTML5視頻播放器/音頻播放器,我們不再需要flash技術,而直接能將視頻/音頻嵌入到了網頁中。
如何嵌入視頻和音頻
在網頁裏嵌入HTML5音頻播放器和視頻播放器的方法非常簡單:
<video src="http://www.webhek.com/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
Your browser does not support the <code>video</code> element.
</video>
上面這個例子顯示瞭如何播放一個視頻文件,並露出視頻播放控制按鈕。
下面這個例子是在HTML網頁裏嵌入音頻 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
: 讓文件循環播放。
<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網頁裏,我們就可以使用JavaScript裏控制它的部分,獲取它的播放信息。比如,用JavaScript啓動視頻播放:
var v = document.getElementsByTagName("video")[0]; v.play();
用JavaScript可控制HTML5視頻播放器實現播放、暫停、快進,快退、音量等。
<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
屬性(或者設置爲空值),這樣就能停止文件的網絡下載。
設定播放的時間點定位
我們可以指定視頻從某時某分某秒開始播放,這是通過設置 currentTime
屬性來實現。
我們可以通過 seekable
屬性來獲得視頻有效的播放時間範圍。它會返回一個 TimeRanges
對象,能夠告訴你有效的開始時間和結束時間。
var mediaElement = document.getElementById('mediaElementID'); mediaElement.seekable.start(0); // 返回開始時間 (秒) mediaElement.seekable.end(0); // 返回結束時間 (秒) mediaElement.currentTime = 122; // 定位到第 122 秒播放 mediaElement.played.end(0); // 返回已經播放的時間長度(秒)
設定播放範圍
當在網頁裏嵌入視頻/音頻文件時, <audio>
或 <video>
元素允許我們提供一些額外的信息來指定播放哪一時間段。實現的方法是在媒體文件後面跟隨(“#”)格式的信息。
它的具體語法是這樣的:
#t=[開始時間][,結束時間]
時間的表示方法可以使用秒數,也可以提供一個 ”時:分:秒“ 格式的時間(例如 2:05:01 )。/p>
舉例:
- http://www.webhek.com/video.ogg#t=10,20
- 指定視頻從10秒開始播放,到20秒處結束。
- http://www.webhek.com/video.ogg#t=,10.5
- 指定視頻從頭開始播放到 10.5 秒處。
- http://www.webhek.com/video.ogg#t=,02:00:00
- 指定視頻播放2小時。
- http://www.webhek.com/video.ogg#t=60
- 指定視頻從第60秒開始播放,播放到結束。
設置視頻封面(poster參數)
當視頻不是自動播放時,在有些瀏覽器裏,視頻在未播放前的缺省界面是空白,這樣很沒有意義,我們可以給視頻設定一個封面,用視頻裏的某個比較具有代表意義的畫面截圖作爲視頻的封面,設定視頻封面的參數是 poster
:
<video poster='cover.jpg' src="http://www.webhek.com/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
Your browser does not support the <code>video</code> element.
</video>
當視頻加載遇到錯誤時的補救方法
有時候視頻資源會失效,或加載失敗,或者瀏覽器不能解碼當前視頻格式,當遇到這種情況,我們應該給與補救措施,替換當前視頻資源地址,或用其它措施補救,比如將video
對象替換成圖片。我們可以使用JavaScript對視頻加載中的“error”事件進行監聽,比如對於下面的視頻資源:
<video controls>
<source src="dynamicsearch.mp4" type="video/mp4"></source>
<a href="dynamicsearch.mp4">
<img src="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);