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

音視頻的發展史

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

問題：不是全部瀏覽器都支持，並且embed不是標準。

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

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

由於Flash很佔內存。

HTML5認爲瀏覽器應該原生支持音視頻，由於他們如今也是web中的一等公民了！

視頻格式的簡單介紹

常見的視頻格式

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

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

其中H.264是收費的。

常見的音頻格式

         視頻編碼：ACC、MP三、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="">
    <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 / 3;//慢速播放(慢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>