一、video

1.1 video支持視頻格式

常見(jiàn)的視頻格式
 

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

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 

     劣勢(shì)：視頻少、轉(zhuǎn)碼器幾乎沒(méi)有，不好轉(zhuǎn)碼 

想要video能自動(dòng)填充慢父div的大小，只要給video標(biāo)簽加上style="width= 100%; height=100%; object-fit: fill"即可

1.2 標(biāo)簽原型

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

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

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

注意：多個(gè)source標(biāo)簽，瀏覽器會(huì)從第一個(gè)開(kāi)始識(shí)別，如果第一個(gè)不被識(shí)別，則會(huì)繼續(xù)識(shí)別第二個(gè)；如果第一個(gè)識(shí)別成功，則會(huì)直接播放第一種格式視頻

<video controls = “controls”>
   <source src=”1.mp4” type=”video/mp4” />  //src屬性寫到source標(biāo)簽中，要指定視頻的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標(biāo)簽屬性

API 屬性 

• duration：返回當(dāng)前音頻/視頻的長(zhǎng)度（以秒計(jì)）
• paused：設(shè)置或返回音頻/視頻是否暫停
• currentTime：設(shè)置或返回音頻/視頻中的當(dāng)前播放位置（以秒計(jì)）
• ended：返回音頻/視頻的播放是否已結(jié)束

1.4 Video API

1.4.1 Video 方法

常用方法

• play()：開(kāi)始播放音頻/視頻
• pause()：暫停當(dāng)前播放的音頻/視頻

1.4.2網(wǎng)絡(luò)狀態(tài)

獲取video對(duì)象

Media = document.getElementById("media");

1.Media.currentSrc; 

    返回當(dāng)前資源的URL 

2.Media.src = value; 

    返回或設(shè)置當(dāng)前資源的URL 

3.Media.canPlayType(type); 

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

4.Media.networkState; 

    0.此元素未初始化 

    1.正常但沒(méi)有使用網(wǎng)絡(luò) 

    2.正在下載數(shù)據(jù) 

    3.沒(méi)有找到資源 

5.Media.load(); 

    重新加載src指定的資源 

6.Media.buffered; 

    返回已緩沖區(qū)域，TimeRanges 

7.Media.preload; 

    none:不預(yù)載 

    metadata:預(yù)載資源信息 

    auto: 

1.4.3 準(zhǔn)備狀態(tài)

1.Media.readyState 

2.Media.seeking; 

    是否正在seeking 

1.4.4 回放狀態(tài)

1.Media.currentTime = value; 

    當(dāng)前播放的位置，賦值可改變位置 

2.Media.startTime; 

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

3.Media.duration; 

    當(dāng)前資源長(zhǎng)度 流返回?zé)o限 

4.Media.paused; 

    是否暫停 

5.Media.defaultPlaybackRate = value; 

    默認(rèn)的回放速度，可以設(shè)置 

6.Media.playbackRate = value; 

    當(dāng)前播放速度，設(shè)置后馬上改變 

7.Media.played; 

    返回已經(jīng)播放的區(qū)域，TimeRanges，關(guān)于此對(duì)象見(jiàn)下文 

8.Media.seekable; 

    返回可以seek的區(qū)域 TimeRanges 

9.Media.ended; 

    是否結(jié)束 

10.Media.autoPlay; 

    是否自動(dòng)播放 

11.Media.loop; 

    是否循環(huán)播放 

12.Media.play(); 

    播放 

13.Media.pause(); 

    暫停 

1.4.5 視頻控制

• Media.controls;//是否有默認(rèn)控制條
• Media.volume = value; //音量
• Media.muted = value; //靜音
• TimeRanges(區(qū)域)對(duì)象
• TimeRanges.length; //區(qū)域段數(shù)
• TimeRanges.start(index) //第index段區(qū)域的開(kāi)始位置
• TimeRanges.end(index) //第index段區(qū)域的結(jié)束位置

1.4.6 相關(guān)事件

1.首先綁定事件的話可以通過(guò)js中的addEventListener方法來(lái)綁定事件 

2.常用事件 

• oncanplay：當(dāng)文件就緒可以開(kāi)始播放時(shí)運(yùn)行的腳本（緩沖已足夠開(kāi)始時(shí)）。
• ontimeupdate： 當(dāng)播放位置改變時(shí)（比如當(dāng)用戶快進(jìn)到媒介中一個(gè)不同的位置時(shí)）運(yùn)行的腳本。
• onended：當(dāng)媒介已到達(dá)結(jié)尾時(shí)運(yùn)行的腳本（可發(fā)送類似“感謝觀看”之類的消息）。

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.常見(jiàn)的音頻格式

    音頻編碼：ACC、MP3、Vorbis 

2.HTML5支持的音頻格式：

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

2.2 audio標(biāo)簽中的一些常用屬性

對(duì)于音樂(lè)格式的支持 

audio可通過(guò)new來(lái)創(chuàng)建。也可以通過(guò)用document來(lái)獲取

//通過(guò)new關(guān)鍵字來(lái)創(chuàng)建Audio對(duì)象
var Music = new Audio("test.mp3");
//通過(guò)document來(lái)獲取已經(jīng)存在的Audio對(duì)象
var Music = document.getElementById("audio");
//當(dāng)然這里也可以使用document.getElementsByClassName('className')等其他的方法來(lái)獲取。

2.3 api所提供的對(duì)audio標(biāo)簽操作的一些屬性和方法

2.4 常用的控制用的函數(shù)

2.5 audio標(biāo)簽API中的常用事件

首先綁定事件的話可以通過(guò)js中的addEventListener方法來(lái)綁定事件  

其實(shí)video的api和audio幾乎一致。稍稍有點(diǎn)不同。所以基本上會(huì)了一個(gè)其他的也就都會(huì)了

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論