一、video

1.1 video支持視頻格式

常見的視頻格式
 

• 視頻的組成部分：畫面、音頻、編碼格式
• 視頻編碼：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"即可

1.2 標簽原型

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

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

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

注意：多個source標簽，瀏覽器會從第一個開始識別，如果第一個不被識別，則會繼續識別第二個；如果第一個識別成功，則會直接播放第一種格式視頻

<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>

1.3 重要的video標簽屬性

API 屬性 

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

1.4 Video API

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)

二、audio

2.1 audio格式

1.常見的音頻格式

    音頻編碼：ACC、MP3、Vorbis 

2.HTML5支持的音頻格式：

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

2.2 audio標簽中的一些常用屬性

對于音樂格式的支持 

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

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

2.3 api所提供的對audio標簽操作的一些屬性和方法

2.4 常用的控制用的函數

2.5 audio標簽API中的常用事件

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

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

總結

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