05. Web大前端時代之：HTML5+CSS3入門系列~H5 多媒體系

Web大前端時代之：HTML5+CSS3入門系列：http://www.cnblogs.com/dunitian/p/5121725.html

1.引入

概述

音頻文件或視頻文件均可以看作是一個容器文件（相似於壓縮的zip）

編解碼器就是讀取特定的容器格式，對其中的音頻與視頻軌進行解碼，而後實現播放

解碼器

解碼器（decoder），是一種輸入模擬視頻信號並將它轉換爲數字信號格式，以進一步壓縮和傳輸的硬件/軟件設備

視頻格式

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

MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

支持情況

audio的canPlayType能夠檢測瀏覽器支持的文件格式

在線檢測（右擊查看源碼）

http://dnt.dkill.net/DNT/HTML5/demo/check.html

2.video

逆天測試僅供參考

測試瀏覽器：谷歌，360，火狐，Edge，IE ：mp4格式的基本上都支持了，wmv格式的基本上都不支持，avi格式的火狐不支持

 

案例

1.簡單案例：

<video src="images/big.mp4" controls loop>你的瀏覽器不支持</video>

<video src="images/big.mp4" poster="http://dnt.dkill.net/Images/banner.jpg" controls loop></video>

說明：

loop循環播放

controls顯示工具欄

<video src="images/big.mp4" controls>你的瀏覽器不支持</video>

poster 視頻預覽圖

<video src="images/big.mp4" poster="http://dnt.dkill.net/Images/banner.jpg" controls loop></video>

autoplay自動播放

<video src="images/big.mp4" controls autoplay loop>你的瀏覽器不支持</video>

preload是否在頁面加載後載入視頻若是設置了 autoplay 屬性，則忽略該屬性

屬性值：

auto - 當頁面加載後載入整個視頻

meta - 當頁面加載後只載入元數據 (有些是瀏覽器是metadata)

none - 當頁面加載後不載入視頻

<video src="images/big.mp4" controls preload="auto">你的瀏覽器不支持</video>

 

2.多源案例

瀏覽器自動選擇第一個可識別的文件來播放

<video controls>

<source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" />

<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"/>

</video>

 

3.小播放器

<video id="myvideo" src="../images/big.mp4" poster="http://dnt.dkill.net/Images/banner.jpg" controls loop>回家休息休息。。。</video>

<script type="text/javascript">

var musicObj = $("#myvideo");

//單擊控制播放與否

musicObj.click(function () {

if (this.paused) {

this.play();

} else {

this.pause();

}

});

</script>

 

3.audio

學過video以後這個就小兒科了，簡單介紹一下

基本用法

<audio src="http://dnt.dkill.net/DNT/music/棋子.mp3" controls></audio>

<audio controls>

<source src="http://www.dkill.net/DNT/music/棋子.ogg" type="audio/ogg" />

<source src="http://dnt.dkill.net/DNT/music/棋子.mp3" type="audio/mp3" />

</audio>

 

4. 擴展內容

大綱

在全部屬性中，只有 videoWidth 和 videoHeight 屬性是當即可用的。在視頻的元數據已加載後，其餘屬性纔可用。

瀏覽器測試

代碼和測試結果看備註（基本上都是知足的）

屬性

只讀

ended

返回true表明播放結束

paused

ture表明暫停播放，false表明正在播放

seeking

返回用戶是否正在音頻/視頻中進行查找

true表明查找

duration

獲取視頻總時間（單位秒）

currentSrc

返回媒體url

readyState

返回音頻/視頻當前的就緒狀態

0 = HAVE_NOTHING - 沒有關於音頻/視頻是否就緒的信息

1 = HAVE_METADATA - 關於音頻/視頻就緒的元數據

2 = HAVE_CURRENT_DATA - 關於當前播放位置的數

據是可用的，但沒有足夠的數據來播放下一幀/毫秒

3 = HAVE_FUTURE_DATA - 當前及至少下一幀的數據是可用的

4 = HAVE_ENOUGH_DATA - 可用數據足以開始播放

networkState

返迴音頻/視頻的當前網絡狀態

0 = NETWORK_EMPTY - 音頻/視頻還沒有初始化

1 = NETWORK_IDLE - 音頻/視頻是活動的且已選取資源，但並未使用網絡

2 = NETWORK_LOADING - 瀏覽器正在下載數據

3 = NETWORK_NO_SOURCE - 未找到音頻/視頻來源

返回對象

error

this.error.code

1 = MEDIA_ERR_ABORTED - 取回過程被用戶停止

2 = MEDIA_ERR_NETWORK - 當下載時發生錯誤

3 = MEDIA_ERR_DECODE - 當解碼時發生錯誤

4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音頻/視頻

console.log(this.error.code);

played

獲得視頻中以秒計的首段已播放的範圍（部分）

屬性值

length - 得到音頻/視頻中已播範圍的數量

start(index) - 得到某個已播範圍的開始位置

end(index) - 得到某個已播範圍的結束位置

案例

獲取當前播放時間：this.played.end(0)

seekable

表示音頻/視頻中的可尋址部分

屬性值

length - 得到音頻/視頻中可尋址範圍的數量

start(index) - 得到可尋址範圍的開始位置

end(index) - 得到可尋址範圍的結束位置

alert("Start: " + this.seekable.start(0) + " End: " + this.seekable.end(0));

buffered

返回一個TimeRanges對象，確認瀏覽器已經緩存媒體文件

屬性值

length - 得到音頻/視頻中已播範圍的數量

start(index) - 得到某個已播範圍的開始位置

end(index) - 得到某個已播範圍的結束位置

alert("Start: " + this.buffered.start(0) + " End: " + this.buffered.end(0));

讀寫

src

src 屬性設置或返回音頻/視頻的當前來源

loop

可以腳本控制播放，設置爲true爲循環播放

muted

可以腳本控制播放，設置爲true爲靜音

poster

設置視頻封面地址

this.poster = 'http://dnt.dkill.net/Images/banner.jpg';

volume

設置或返回音頻/視頻的音量

規定音頻/視頻的當前音量。必須是介於 0.0 與 1.0 之間的數字。

preload

設置或返回音頻/視頻是否應該在頁面加載後進行加載

屬性值

auto 指示一旦頁面加載，則開始加載音頻/視頻。

metadata 指示當頁面加載後僅加載音頻/視頻的元數據。

none 指示頁面加載後不該加載音頻/視頻。

controls

可以腳本控制顯示工具欄，設置爲true爲顯示

autoplay

可以腳本控制播放，設置爲true爲自動播放

currentTime

獲取當前播放位置，返回時間（單位秒）

playbackRate

設置或返回音頻/視頻播放的速度

設置或返回音頻/視頻的默認播放速度

1.0 正常速度

0.5 半速（更慢）

2.0 倍速（更快）

-1.0 向後，正常速度

-0.5 向後，半速

案例

<video id="myvideo"></ video>

$(function () {

var videoObj = $('#myvideo');

var This = videoObj.get(0);

This.controls = true;

This.poster = 'http://dnt.dkill.net/Images/banner.jpg';

This.src = 'images/big.mp4';

});

defaultPlaybackRate

專業醬油12年

設置或返回音頻/視頻的默認播放速度

1.0 正常速度

0.5 半速（更慢）

2.0 倍速（更快）

-1.0 向後，正常速度

-0.5 向後，半速

不會影響當前播放速度

方法

addTextTrack()

向音頻/視頻添加新的文本軌道

語法

audio|video.addTextTrack(kind,label,language)

kind

規定文本軌道的類型。

"subtitles"

"caption"

"descriptions"

"chapters"

"metadata"

label

字符串值，爲文本軌道規定標籤。用於爲用戶對文本軌道進行標識。

language

雙字母語言代碼，規定文本軌道的語言。

中文

zh

英文

en

案例

canPlayType()

檢測瀏覽器是否能播放指定的音頻/視頻類型

案例

http://dnt.dkill.net/DNT/HTML5/demo/check.html

load()

從新加載音頻/視頻元素

play()

開始播放音頻/視頻

pause()

暫停當前播放的音頻/視頻

事件

audio（video）媒體事件

事件+描述

abort 當音頻/視頻的加載已放棄時觸發。

canplay 當瀏覽器能夠開始播放音頻/視頻時觸發。

canplaythrough 當瀏覽器可在不因緩衝而停頓的狀況下進行播放時觸發。

durationchange 當音頻/視頻的時長已更改時觸發。

emptied 當目前的播放列表爲空時觸發。

ended 當目前的播放列表已結束時觸發。

error 當在音頻/視頻加載期間發生錯誤時觸發。

loadeddata 當瀏覽器已加載音頻/視頻的當前幀時觸發。

loadedmetadata 當瀏覽器已加載音頻/視頻的元數據時觸發。

loadstart 當瀏覽器開始查找音頻/視頻時觸發。

pause 當音頻/視頻已暫停時觸發。

play 當音頻/視頻已開始或再也不暫停時觸發。

playing 當音頻/視頻在因緩衝而暫停或中止後已就緒時觸發。

progress 當瀏覽器正在下載音頻/視頻時觸發。

ratechange 當音頻/視頻的播放速度已更改時觸發。

seeked 當用戶已移動/跳躍到音頻/視頻中的新位置時觸發。

seeking 當用戶開始移動/跳躍到音頻/視頻中的新位置時觸發。

stalled 當瀏覽器嘗試獲取媒體數據，但數據不可用時觸發。

suspend 當瀏覽器刻意不獲取媒體數據時觸發。

timeupdate 當目前的播放位置已更改時觸發。

volumechange 當音量已更改時觸發。

waiting 當視頻因爲須要緩衝下一幀而中止時觸發。

擴

當音頻/視頻處於加載過程當中時，會依次發生如下事件

loadstart

durationchange

loadedmetadata

loadeddata

progress

canplay

canplaythrough

使用方法

常見兩種：

addEventListener

 

$(function () {

var videoObj = $('#myvideo');

var This = videoObj.get(0);

This.controls = true;

This.poster = 'http://dnt.dkill.net/Images/banner.jpg';

This.src = 'images/big.mp4';

This.addEventListener('pause', function () {

alert('視頻這麼精彩你丫還敢暫停？');

});

});

document.getElementById('myvideo').addEventListener('pause', function () {

alert('視頻這麼精彩你丫還敢暫停？');

});

屬性賦值

 

$(function () {

var videoObj = $('#myvideo');

var This = videoObj.get(0);

This.controls = true;

This.poster = 'http://dnt.dkill.net/Images/banner.jpg';

This.src = 'images/big.mp4';

This.onpause = myPause;

});

function myPause() {

alert('視頻這麼精彩你丫還敢暫停？')

}