音視頻的發展史
早期：<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：opera、 I：IE 、 S：safari（蘋果））
因為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>
