在HTML5之前，網頁中只能處理文字和圖像數據，在HTML5中爲網頁提供了處理視頻數據和音頻數據的能力，本節針對HTML5提供的音頻與視頻處理標籤進行詳細講解。
<video>標籤的使用
在HTML5中，使用<video>標籤來定義視頻播放器，它不僅是一個播放視頻的標籤，其控制欄還實現了包括播放、暫停、進度和音量控制、全屏等功能，更重要的是用戶可以自定義這些功能和控制欄的樣式。
視頻可以理解爲一系列連續的圖片，<video>標籤的使用方法與<img>標籤非常相似，具體語法如下: .
<video src="視頻文件路徑" controls>你的瀏覽器不支持video標籤</video>
在上面語法中，src 屬性用於設置視頻文件的路徑，也可以爲該標籤設置width和height的值，controls 屬性用於爲視頻提供播放控件，src 和controls是<video>標籤的基本屬性。並且，<video> 和</video>之間還可以插入文字，用於在瀏覽器不能支持時顯示。
使用<img>標籤時會涉及圖片格式的問題，如jpg. gif等，視頻文件也有不同的格式，<video>標籤支持以下3種視頻格式：
(1) Ogg: 帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件。
(2) MPEG4:帶有H.264視頻編碼和AAC音頻編碼的MPEG 4文件。
(3) WebM:帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。
瀏覽器對視頻文件的支持情況如表1所示。
表1 瀏覽器對視頻文件的支持情況
src屬性其實就是source的縮寫,這裏指的是路徑。從表1中可以看出，到目前爲止，沒有一種視頻格式讓所有瀏覽器都支持，爲此，HTML5中提供了<source> 標籤，用於指定多個備用的不同格式的文件路徑，語法如下:
<video controls>
<source src="視頻文件地址" type="video/格式">
<source src="視頻文件地址" type="video/ 格式">
……
</video>
對<video>標籤有了基本瞭解後，下面通過一個案例來演示標籤的具體使用方法，如示例所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video元素</title>
</head>
<body>
<video src="video/movie.mp4">您的瀏覽器不支持video標籤</video>
<video src="video/movie.mp4" controls>您的瀏覽器不支持video標籤</video>
</body>
</html>
用瀏覽器打開示例，頁面效果如圖1所示。
圖1 頁面效果
在圖1中，上面部分是<video>標籤不添加controls屬性的效果，controls 屬性用於設置或返回瀏覽器應當顯示標準的音視頻控件。單擊播放按鈕，視頻開始播放，如圖2所示。
圖2 視頻開始播放的效果
圖2下方爲標準的音視頻控件，包括7項功能：播放、暫停、進度條、音量、全屏切換(供視頻)、字幕(當可用時)、軌道(當可用時)。沒有音視頻控件的情況下視頻也是可以播放的，可以利用<video>標籤的autoplay屬性，設置視頻自動播放，如示例所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video元素</title>
</head>
<body>
<video src="video/movie.mp4" autoplay>您的瀏覽器不支持video標籤</video>
<br/><br/>
<video src="video/movie.mp4" controls>您的瀏覽器不支持video標籤</video>
</body>
</html>
用瀏覽器打開示例，頁面效果如圖3所示。
圖3 頁面效果
在圖3中，上面的視頻設置了自動播放，<video> 標籤還支持循環播放的功能，也是通過屬性來控制。<video> 標籤用於控制視頻播放的常用屬性如表2所示。
表2 標籤用於視頻播放的常用屬性
HTML DOM Video 對象
HTML5爲Video對象提供了用於DOM操作的方法和事件，常用方法如表3所示。
表3 Video 對象的常用方法和事件
Video對象用於DOM操作的常用屬性，如表4所示。
表4 Video 對象的常用屬性
Video對象用於DOM操作的常用事件如表5所示。
表5 Video 對象的常用事件
瞭解了Video 對象的屬性、方法和事件後，下面通過一個案例來演示如何用JavaScript代碼操作Video對象，具體使用方法如示例所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript操作video對象</title>
</head>
<body>
<video id="myVideo" src="video/myVideo.ogv">您的瀏覽器不支持video標籤</video>
<br/><br/>
<input type="button" value="播放/暫停" onclick="playPause()"/>
</body>
<script>
var myVideo=document.getElementById("myVideo");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
</html>
圖4 頁面效果
在示例中，定義了一個用於控制播放或者暫停的按鈕，然後爲該按鈕的onclick 事件定義方法playPause()，使用JavaScript中的if條件語句進行狀態判斷，當該播放器的狀態爲暫停(默認沒有播放的視頻會被識別爲暫停狀態)時調用play)方法，切換爲播放，單擊“播放/暫停”按鈕會切換到播放的狀態，如圖5所示。
圖5 播放狀態
再次單擊“播放/暫停”按鈕會切換到暫停狀態。
<audio> 標籤的使用
目前，在網頁中播放音頻沒有固定的標準，大多數音頻是通過插件(比如Flash)來播放的，但並非所有瀏覽器都有同樣的插件，HTML5 中提供<audio>標籤來定義Web上的聲音文件或音頻流。其使用方法與<video>標籤基本相同，語法如下:
<audio src="音頻文件路徑" controls>您的瀏覽器不支持audio標籤</audio>
<audio>標籤同樣支持引入多個音頻源，提到多個音頻源就涉及音頻的格式問題，當前<audio>標籤支持以下3種格式:
(1) Vorbis: 類似ACC (Advanced Audio Coding, 高級音頻編碼)的另一種免費、開源的音頻編碼，是用於替代MP3的下一代音頻壓縮技術。
(2) MP3:一種音頻壓縮技術，其全稱是動態影像專家壓縮標準音頻層面3 (Moving Picture Experts Group Audio Layer 11)，簡稱爲MP3。它被設計用來大幅度地降低音頻數據量。
(3) Wav:錄音時用的標準的Windows文件格式，文件的擴展名爲WAV，數據本身的格式爲PCM或壓縮型，屬於無損音樂格式的一種。
與視頻的支持情況相似，目前沒有一種瀏覽器支持所有的音頻格式，具體如表6所示。
表6 瀏覽器對音頻文件的支持情況
多個音頻源使用<source>標籤來定義，語法如下:
<audio controls>
<source src="音頻文件路徑" type="audio/格式">
<source src="音頻文件路徑" type="audio/格式">
您的瀏覽器不支持audio標籤
</audio>
<audio>標籤中也包含很多用於控制音頻播放的常用屬性，如表7所示。
表7 標籤的屬性
從表7中可以看出，與<video>標籤相比，<audio> 標籤沒有width和height屬性，其他屬性名稱都相同。
<audio>標籤的具體用法如示例所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio標籤的使用</title>
</head>
<body>
<audio src="audio/music.mp3" controls></audio>
</body>
</html>
用瀏覽器打開示例，頁面效果如圖6所示。
圖6 頁面效果
圖6所示的音頻播放器效果類似於視頻播放器的播放控件，在不添加controls屬性的情況下頁面看到的應該是空白，可以通過JavaScript控制音頻的播放。
HTML DOM Audio對象
HTML5爲Audio對象提供了用於DOM操作的方法和事件，常用方法如表8所示。
表8 Audio 對象的常用方法
Audio對象用於DOM操作的常用屬性，如表9所示。
表9 Audio 對象的常用屬性
Audio對象用於DOM操作的常用事件如表10所示。
表10 Audio 對象的常用事件
以上方法、屬性和事件可以通過JavaScript來操作，用法與Video對象中的方法屬性等非常相似。例如，使用按鈕來控制音頻的播放，如示例所示。
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript操作audio對象</title>
</head>
<script>
//頁面加載完畢後執行
window.onload=function(){
//通過標籤名獲取button按鈕
document.getElementsByTagName("button")[0].onclick=function(){
//通過標籤名獲取audio對象
document.getElementsByTagName("audio")[0].load();
document.getElementsByTagName("audio")[0].play();
}
}
</script>
<body>
<audio src="audio/music.mp3"></audio>
<button >播放音樂</button>
</body>
</html>
用瀏覽器打開示例，頁面效果如圖7所示。
圖7 頁面效果
在示例中，使用標籤名來獲取某個標籤時，默認得到的是數組對象，數組對象的下標從0開始，這裏每種標籤只有一個，所以使用下標0來獲取對象，單擊圖7中的“播放音樂”按鈕，音樂開始播放。
超全面的測試IT技術課程，0元立即加入學習！有需要的朋友戳：
騰訊課堂測試技術學習地址
歡迎轉載，但未經作者同意請保留此段聲明，並在文章頁面明顯位置給出原文鏈接。