HTML5里引入的新標(biāo)記 <audio> 和 <video> 實(shí)現(xiàn)了HTML對(duì)視頻播放和音頻播放的原生支持，有了這種原生的HTML5視頻播放器/音頻播放器，我們不再需要flash技術(shù)，而直接能將視頻/音頻嵌入到了網(wǎng)頁(yè)中。
如何嵌入視頻和音頻
在網(wǎng)頁(yè)里嵌入HTML5音頻播放器和視頻播放器的方法非常簡(jiǎn)單：
<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>
上面這個(gè)例子顯示了如何播放一個(gè)視頻文件，并露出視頻播放控制按鈕。
下面這個(gè)例子是在HTML網(wǎng)頁(yè)里嵌入音頻 audio 的方法：
<audio controls autoplay loop src="/test/audio.ogg"> <p>Your browser does not support the <code>audio</code> element.</p> </audio>
這里的 src 屬性里可以填入一個(gè)音頻/視頻的URL，也可以是一個(gè)本地的文件。
<audio src="audio.ogg" controls autoplay loop> <p>Your browser does not support the <code>audio</code> element </p> </audio>
下面是<audio> 和 <video> 兩個(gè)標(biāo)記上控制屬性的含義：
- controls : 顯示標(biāo)準(zhǔn)的 HTML5 視頻/音頻播放器控制條、控制按鈕。
- autoplay : 讓文件自動(dòng)播放。
- loop : 讓文件循環(huán)播放。
<audio src="audio.mp3" preload="auto" controls></audio>
這里的 preload 屬性是用來(lái)緩存大體積文件的。它有三個(gè)可選值：
-
"none" 不緩存
-
"auto" 緩存
-
"metadata" 只緩存文件元信息
為了能夠兼容各種瀏覽器對(duì)不同媒體類(lèi)型的支持，我們可以用多個(gè)<source> 元素來(lái)提供多個(gè)不同的媒體類(lèi)型。例如：
<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 文件。查看各種瀏覽器對(duì)各種媒體類(lèi)型的支持情況，請(qǐng)查看這里。
我們還可以指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻：
<video controls> <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> Your browser does not support the <code>video</code> element. </video>
上面，我們指定了這個(gè)視頻需要使用 Dirac 和 Speex 解碼器。如果瀏覽器支持 Ogg 格式，但沒(méi)有指定的解碼器，那么，視頻將不會(huì)被加載。
如果沒(méi)有提供 type 屬性，則瀏覽器會(huì)向服務(wù)器詢(xún)問(wèn)媒體類(lèi)型，看看是否支持;如果不支持，瀏覽器將會(huì)去檢查下一個(gè) source 屬性。
用JavaScript控制視頻/音頻播放
一旦視頻文件正確的嵌入到了HTML網(wǎng)頁(yè)里，我們就可以使用JavaScript里控制它的部分，獲取它的播放信息。比如，用JavaScript啟動(dòng)視頻播放：
var v = document.getElementsByTagName("video")[0];
v.play();用JavaScript可控制HTML5視頻播放器實(shí)現(xiàn)播放、暫停、快進(jì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()方法里讓視頻文件停止播放，但瀏覽器并未停止下載媒體文件，除非它達(dá)到了一定的緩存量。
下面是讓瀏覽器如何停止下載視頻文件的方法：
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//或
mediaElement.removeAttribute("src"); 通過(guò)刪除 src 屬性(或者設(shè)置為空值)，這樣就能停止文件的網(wǎng)絡(luò)下載。
設(shè)定播放的時(shí)間點(diǎn)定位
我們可以指定視頻從某時(shí)某分某秒開(kāi)始播放，這是通過(guò)設(shè)置 currentTime屬性來(lái)實(shí)現(xiàn)。
我們可以通過(guò) seekable 屬性來(lái)獲得視頻有效的播放時(shí)間范圍。它會(huì)返回一個(gè) TimeRanges 對(duì)象，能夠告訴你有效的開(kāi)始時(shí)間和結(jié)束時(shí)間。
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0); // 返回開(kāi)始時(shí)間 (秒)
mediaElement.seekable.end(0); // 返回結(jié)束時(shí)間 (秒)
mediaElement.currentTime = 122; // 定位到第 122 秒播放
mediaElement.played.end(0); // 返回已經(jīng)播放的時(shí)間長(zhǎng)度(秒)設(shè)定播放范圍
當(dāng)在網(wǎng)頁(yè)里嵌入視頻/音頻文件時(shí)， <audio> 或 <video> 元素允許我們提供一些額外的信息來(lái)指定播放哪一時(shí)間段。實(shí)現(xiàn)的方法是在媒體文件后面跟隨(“#”)格式的信息。
它的具體語(yǔ)法是這樣的：
#t=[開(kāi)始時(shí)間][,結(jié)束時(shí)間]
時(shí)間的表示方法可以使用秒數(shù)，也可以提供一個(gè) ”時(shí):分:秒“ 格式的時(shí)間(例如 2:05:01 )。
舉例：
http://www.webhek.com/video.ogg#t=10,20
指定視頻從10秒開(kāi)始播放，到20秒處結(jié)束。
http://www.webhek.com/video.ogg#t=,10.5
指定視頻從頭開(kāi)始播放到 10.5 秒處。
http://www.webhek.com/video.ogg#t=,02:00:00
指定視頻播放2小時(shí)。
http://www.webhek.com/video.ogg#t=60
指定視頻從第60秒開(kāi)始播放，播放到結(jié)束。
來(lái)源：http://www.webhek.com/using_html5_audio_and_video