HTML5中視頻音頻的使用詳解

常見的視頻格式

• 視頻的組成部分：畫面、音頻、編碼格式
• 視頻編碼：H.264、Theora、VP8(google開源)

HTML5支持的視頻格式：

1、Ogg

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

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

2、MEPG4

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

支持的瀏覽器: S、C

3、WebM

帶有VP8視頻編碼+Vorbis音頻編碼的WebM格式

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

劣勢：視頻少、轉碼器幾乎沒有，不好轉碼

想要video能自動填充慢父div的大小，只要給video標籤加上style=width= 100%; height=100%; object-fit: fill即可

指定一種視頻格式，不能播就提示

<video id=media src=examp.mp4 width=500 poster=examp1.jpg >您的瀏覽器不支持video</video>

給定多種視頻格式，瀏覽器根據自身支持程度選擇播放哪一種

<video controls = controls> <source src=1.mp4 type=video/mp4 /> //src屬性寫到source標籤中，要指定視頻的type類型，例如MP4的即為type=video/mp4 <source src = 2.ogg type=video/ogg /> //ogg格式<source src=3.webm type=video/webm /> //webm格式</video>

API 屬性

• duration：返回當前音頻/視頻的長度（以秒計）
• paused：設置或返回音頻/視頻是否暫停
• currentTime：設置或返回音頻/視頻中的當前播放位置（以秒計）
• ended：返回音頻/視頻的播放是否已結束

1.4.1 Video 方法

常用方法

• play()：開始播放音頻/視頻
• pause()：暫停當前播放的音頻/視頻

1.4.2網絡狀態

獲取video對象

Media = document.getElementById(media);

1.Media.currentSrc;

返回當前資源的URL

2.Media.src = value;

返回或設置當前資源的URL

3.Media.canPlayType(type);

是否能播放某種格式的資源

4.Media.networkState;

0.此元素未初始化

1.正常但沒有使用網絡

2.正在下載數據

3.沒有找到資源

5.Media.load();

重新加載src指定的資源

6.Media.buffered;

返回已緩衝區域，TimeRanges

7.Media.preload;

none:不預載

metadata:預載資源信息

auto:

1.4.3 準備狀態

1.Media.readyState

2.Media.seeking;

是否正在seeking

1.4.4 回放狀態

1.Media.currentTime = value;

當前播放的位置，賦值可改變位置

2.Media.startTime;

一般為0，如果為流媒體或者不從0開始的資源，則不為0

3.Media.duration;

當前資源長度流返回無限

4.Media.paused;

是否暫停

5.Media.defaultPlaybackRate = value;

默認的回放速度，可以設置

6.Media.playbackRate = value;

當前播放速度，設置後馬上改變

7.Media.played;

返回已經播放的區域，TimeRanges，關於此對象見下文

8.Media.seekable;

返回可以seek的區域TimeRanges

9.Media.ended;

是否結束

10.Media.autoPlay;

是否自動播放

11.Media.loop;

是否循環播放

12.Media.play();

播放

13.Media.pause();

暫停

1.4.5 視頻控制

• Media.controls;//是否有默認控制條
• Media.volume = value; //音量
• Media.muted = value; //靜音
• TimeRanges(區域)對象
• TimeRanges.length; //區域段數
• TimeRanges.start(index) //第index段區域的開始位置
• TimeRanges.end(index) //第index段區域的結束位置

1.4.6 相關事件

1.首先綁定事件的話可以通過js中的addEventListener方法來綁定事件

2.常用事件

• oncanplay：當文件就緒可以開始播放時運行的腳本（緩衝已足夠開始時）。
• ontimeupdate： 當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本。
• onended：當媒介已到達結尾時運行的腳本（可發送類似感謝觀看之類的消息）。

1.4.7 其他

1.全屏:

• element.webkitRequestFullScreen();( webkit)
• element.mozRequestFullScreen(); (Firefox )
• element.requestFullscreen(); (W3C )

2.退出全屏：

• document.webkitCancelFullScreen(); (webkit )
• document.mozCancelFullScreen(); (Firefox)
• document.exitFullscreen(); (W3C)

1.常見的音頻格式

音頻編碼：ACC、MP3、Vorbis

2.HTML5支持的音頻格式：

• Ogg 免費支持的瀏覽器:C、F、O
• MP3 收費支持的瀏覽器: I、C、S
• Wav 收費支持的瀏覽器: F、O、S

對於音樂格式的支持

audio可通過new來創建。也可以通過用document來獲取

//通過new關鍵字來創建Audio對象var Music = new Audio(test.mp3);//通過document來獲取已經存在的Audio對象var Music = document.getElementById(audio);//當然這裡也可以使用document .getElementsByClassName('className')等其他的方法來獲取。

首先綁定事件的話可以通過js中的addEventListener方法來綁定事件

其實video的api和audio幾乎一致。稍稍有點不同。所以基本上會了一個其他的也就都會了

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。