HTML5筆記2——HTML5音/視頻標簽詳解

音視頻的發展史早期：<embed>+<object>+文件問題：不是所有瀏覽器都支持，而且embed不是標準。現狀：Realplay、window media、Quick Time 、Flash 問題：每個廠商每個標準，網站編碼和格式也都不相同，flash的出現解決了面的問題，但是apple在 ...

音視頻的發展史

早期：<embed>+<object>+文件

問題：不是所有瀏覽器都支持，而且embed不是標準。

現狀：Realplay、window media、Quick Time 、Flash

問題：每個廠商每個標準，網站編碼和格式也都不相同，flash的出現解決了面的問題，但是apple在07年決定任何設備將不再支持flash。而安卓也在4.0版本之後不再支持Flash，

因為Flash很占記憶體。

HTML5認為瀏覽器應該原生支持音視頻，因為他們現在也是web中的一等公民了！

視頻格式的簡單介紹

常見的視頻格式

視頻的組成部分：畫面、音頻、編碼格式

視頻編碼：H.264、Theora、VP8(google開源)

其中H.264是收費的。

常見的音頻格式

視頻編碼：ACC、MP3、Vorbis

其中ACC、MP3是收費的。

HTML5支持的格式

HTML5能在完全脫離插件的情況下播放音視頻，但是不是所有格式都支持。

HTML5支持的視頻格式：

Ogg =帶有Theora視頻編碼+Vorbis音頻編碼的Ogg文件

支持的瀏覽器:F、C、O

MEPG4=帶有H.264視頻編碼+AAC音頻編碼的MPEG4文件

支持的瀏覽器: S、C

WebM=帶有VP8視頻編碼+Vorbis音頻編碼的WebM格式支持的瀏覽器: I、F、C、O

註：各瀏覽器簡寫（F：火狐、C：谷歌、O：蘋果、 I：IE 、 S：搜狗）

因為H.264是收費的，那麼MEPG4同樣也是收費的，MEPG4就是我們常說的MP4。MP4是一種很古老的視頻格式了，用過MP4的小伙伴應該知道。MP4各方面的技術也非常成熟，唯一不好的地方就是收費。

<Video>的使用

第一種

<video src="文件地址" controls="controls"></video>

此種方式，在不支持HTML5相關視頻格式的瀏覽器中顯示為空白，這很不友好。

第二種

<video src="文件地址" controls="controls">
         您的瀏覽器暫不支持video標簽。播放視頻
</video>

此方式將在不支持HTML5相關視頻格式的瀏覽器中顯示自定義的文字。若支持HTML5則顯示結果和第一種一樣。

第三種

<video  controls="controls"  width="300">
         <source src="move.ogg" type="video/ogg" >
         <source src="move.mp4" type="video/mp4" >
         您的瀏覽器暫不支持video標簽。播放視頻
</video>

此種方式可以讓瀏覽器來選擇支持的視頻格式進行播放，如上，如果ogg格式支持，則播放ogg視頻，如果ogg不支持，則判斷mp4是否支持，如果MP4支持，則播放mp4格式視頻。如果mp4格式也不支持，則顯示自定義文本。

Video的常見屬性

屬性	值	描述
Autoplay	Autoplay	視頻就緒自動播放
controls	controls	向用戶顯示播放控制項
Width	Pixels(像素)	設置播放器寬度
Height	Pixels(像素)	設置播放器高度
Loop	Loop	播放完是否繼續播放該視頻，迴圈播放
Preload	Proload	是否等載入完再播放
Src	url	視頻url地址
Poster	Imgurl	載入等待的畫面圖片
Autobuffer	Autobuffer	設置為瀏覽器緩衝方式，不設置Autoplay才有效

Video的API方法

方法	屬性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error

全屏操作

	全屏	退出全屏
Webkit (Safari5.1 /Chrome 15)	element.webkitRequestFullScreen();	document.webkitCancelFullScreen();
Firefox (works in nightly)	element.mozRequestFullScreen();	document.mozCancelFullScreen();
W3C 提議	element.requestFullscreen();	document.exitFullscreen();

Video的API屬性

屬性	說明
audioTracks	返回可用的音軌列表（MultipleTrackList對象）
autoplay	媒體載入後自動播放
buffered	返回緩衝部件的時間範圍(TimeRanges對象)
controller	返回當前的媒體控制器（MediaController對象）
controls	顯示播控控制項
crossOrigin	CORS設置
currentSrc	返回當前媒體的URL
currentTime	當前播放的時間，單位秒 (快進快退10秒)
defaultMuted	預設是否靜音
defaultPlaybackRate	播控的預設倍速（正數表示加速，負數表示減速）
duration	返回媒體的播放總時長，單位秒
ended	返回當前播放是否結束標誌
error	返回當前播放的錯誤狀態
initialTime	返回初始播放的位置
loop	是否迴圈播放
mediaGroup	當前音視頻所屬媒體組 (用來鏈接多個音視頻標簽)
muted	是否靜音
networkState	返回當前網路狀態
paused	是否暫停
playbackRate	播放的倍速(加速、減速播放)
played	當前播放部件已經播放的時間範圍(TimeRanges對象)
preload	頁面載入時是否同時載入音視頻
readyState	返回當前的準備狀態
seekable	返回當前可跳轉部件的時間範圍(TimeRanges對象)
seeking	返回用戶是否做了跳轉操作
src	當前音視頻源的URL
startOffsetTime	返回當前的時間偏移(Date對象)
textTracks	返回可用的文本軌跡(TextTrackList對象)
videoTracks	返回可用的視頻軌跡(VideoTrackList對象)
volume	音量值(0~1之間)

Video的常用事件

事件	描述
abort	當音視頻載入被異常終止時產生該事件
canplay	當瀏覽器可以開始播放該音視頻時產生該事件
canplaythrough	當瀏覽器可以開始播放該音視頻到結束而無需因緩衝而停止時產生該事件
durationchange	當媒體的總時長改變時產生該事件
emptied	當前播放列表為空時產生該事件
ended	當前播放列表結束時產生該事件
error	當載入媒體發生錯誤時產生該事件
loadeddata	當載入媒體數據時產生該事件
loadedmetadata	當收到總時長，解析度和字軌等metadata時產生該事件
loadstart	當開始查找媒體數據時產生該事件
pause	當媒體暫停時產生該事件
play	當媒體播放時產生該事件
playing	當媒體從因緩衝而引起的暫停和停止恢復到播放時產生該事件
progress	當獲取到媒體數據時產生該事件
ratechange	當播放倍數改變時產生該事件
seeked	當用戶完成跳轉時產生該事件
seeking	當用戶正執行跳轉時操作的時候產生該事件
stalled	當試圖獲取媒體數據，但數據還不可用時產生該事件
suspend	當獲取不到數據時產生該事件
timeupdate	當前播放位置發生改變時產生該事件
volumechange	當前音量發生改變時產生該事件
waiting	當視頻因緩衝下一幀而停止時產生該事件

HTML5支持的音頻格式

HTML5在不使用插件的情況下也可以原生的支持音頻格式文件的播放，當然支持格式是有限的

HTML5支持的音頻格式：

Ogg 免費支持的瀏覽器:C、F、O

MP3 收費支持的瀏覽器: I、C、S

Wav 收費支持的瀏覽器: F、O、S

<audio>的使用

同樣支持三中方式

方式一

<audio  src="文件地址" controls="controls"></audio>

方式二

<audio src="文件地址" controls="controls">
         您的瀏覽器暫不支持audio標簽。播放視頻
</video>

方式三

<audio controls="controls"  >
         <source src="happy.MP3" type="video/mpeg" >
         <source src="happy.ogg" type="video/ogg" >
         您的瀏覽器暫不支持audio標簽。播放視頻
</audio>

audio的常見屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音頻在就緒後馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控制項，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放。
preload	preload	如果出現該屬性，則音頻在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的音頻的 URL。

Demo，這裡我用的是FF瀏覽器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div style="background-color:lightblue;">
    <input type="button" value="播放" onclick="play();" />
    <input type="button" value="暫停" onclick="pause();"/>
    <input type="button" value="全屏" onclick="requestFullscreen();"/>
    <input type="button" value="退出全屏" onclick="exitFullscreen()"/>
    <input type="button" value="快進" onclick="speed()"/>
    <input type="button" value="快退" onclick="back()" />
    <input type="button" value="加速" onclick="speedUp()" />
    <input type="button" value="減速" onclick="speedDown()" />
    <input type="button" value="正常" onclick="speedNormal()" />
    <input type="button" value="調高音量" onclick="upper()" />
    <input type="button" value="降低音量" onclick="lower()" />
    </div>
    <video id="video" src="/video/多情俠客 鄭少秋 140120_高清.mp4" controls="controls" width="600" height="500" poster="/img/zsq.png">
        您的瀏覽器暫不支持video標簽播放視頻
    </video>
    <script type="text/javascript">
        var video = document.getElementById("video");
        //播放
        function play() {
            video.play();
        }
        //暫停
        function pause() {
            video.pause();
        }
        //全屏
        function requestFullscreen() {
            video.mozRequestFullScreen();
        }
        //退出全屏
        function exitFullscreen() {
            video.mozCancelFullScreen();
        }
        //快進
        function speed() {
            video.currentTime += 10; //快進10秒
        }
        //快退
        function back() {
            video.currentTime -= 10;//快退10秒
        }
        //加速
        function speedUp() {
            video.playbackRate = 2; //加速播放(2倍速度)
        }
        //減速
        function speedDown() {
            video.playbackRate = 1 / 2;//慢速播放(慢2倍)
        }
        //正常播放
        function speedNormal() {
            video.playbackRate = 1;//預設的播放倍速是1
        }
        //調高聲音
        function upper() {
            video.volume += 0.1;//聲音值的範圍是0-1
        }
        //調低聲音
        function lower() {
            video.volume -= 0.1;
        }
    </script>
</body>
</html>

運行效果如下：

音頻Demo，用法和video相似。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    音頻標簽的使用<br />
    <audio src="/audio/逃跑計劃 - 夜空中最亮的星.mp3" controls="controls">
        您的瀏覽器該升級了，趕緊換了吧，便於欣賞中國好聲音。
    </audio>
</body>
</html>