1、常見的視頻格式
視頻的組成部分：畫面、音頻、編碼格式
視頻編碼：H.264、theora、VP8(google開源)
2、常見的音頻格式
編碼：AAC、MP3、Vorbis
3、HTML5雖然能在完全脫離插件的情況下播放音視頻，但不是支持所有的格式
支持的視頻格式：
OGG = 帶有Theora視頻編碼+Vorbis音頻編碼的ogg文件
瀏覽器支持：F,C,O
MPEG4 = 帶有H.264視頻編碼+AAC音頻編碼的MPEG4文件
瀏覽器支持:S,C
WebM = 帶有VP8視頻格式編碼+Vorbis音頻編碼的WebM格式
瀏覽器支持:I、F、C、O
4、視頻Video的使用方法
<video src="http://www.bigaody.com" controls="controls"></video>
< video src="文件地址" controls="controls">
您的瀏覽器暫不支持video標(biāo)簽。播放視頻
</video >
<video controls="controls" width="300">
<source src="move.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="move.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
<source src="move.webm" type='video/webm; codecs="vp8, vorbis"' >
您的瀏覽器暫不支持video標(biāo)簽。播放視頻
</video >
5、video常見屬性
| 屬性 |
值 |
描述 |
| autoplay |
autoplay |
視頻就緒自動播放 |
| controls |
controls |
向用戶顯示播放控件 |
| width |
pixels（像素） |
設(shè)置播放器寬度 |
| height |
pixels（像素） |
設(shè)置播放器高度 |
| loop |
loop |
播放完是否繼續(xù)播放該視頻，循環(huán)播放 |
| preload |
preload |
是否等加載完再播放 |
| src |
url |
視頻url地址 |
| poster |
imgurl |
等待加載的畫面圖片 |
| autobuffer |
autobuffer |
設(shè)置為瀏覽器緩沖方式，不設(shè)置autoplay才有 |
6、video常見方法
| 方法 |
屬性 |
事件 |
| play() |
currentSrc |
play |
| pause() |
currentTime |
pause |
| load() |
videoWidth |
progress |
| canPlayType |
videoHeight |
error |
|
全屏 |
退出全屏 |
| Webkit(Safari5.1/Chrome15) |
element.webkitRequestFullScreen() |
document.webkitCancelFullScreen() |
| Firefox(works in nightly) |
element.mozRequestFullScreen() |
document.mozCancelFullScreen() |
| W3C提議 |
element.requestFullscreen() |
document.exitFullscreen() |
7、video的API屬性
| 屬性 |
說明 |
| audioTracks |
返回可用的音軌列表(MultipleTrackList對象) |
| autoplay |
媒體加載后自動播放 |
| buffered |
返回緩沖部件的時間范圍（TimeRanges對象） |
| controller |
返回當(dāng)前的媒體控制器（MediaController對象） |
| controls |
顯示播控控件 |
| crossOrigin |
CORS設(shè)置 |
| currentSrc |
返回當(dāng)前媒體的URL |
| currentTime |
當(dāng)前播放的時間，單位秒（快進(jìn)快退10秒） |
| defaultMuted |
缺省是否靜音 |
| defaultPlaybackRate |
控件的缺省倍速 |
| 屬性 |
說明 |
| duration |
返回媒體的播放總時長，單位秒 |
| ended |
返回當(dāng)前播放是否結(jié)束標(biāo)志 |
| error |
返回當(dāng)前播放的錯誤狀態(tài) |
| initialTime |
返回初始播放的位置 |
| loop |
是否循環(huán)播放 |
| mediaGroup |
當(dāng)前音頻所屬媒體組（用來鏈接多個音視頻標(biāo)簽） |
| muted |
是否靜音 |
| networkState |
返回當(dāng)前網(wǎng)絡(luò)狀態(tài) |
| paused |
是否暫停 |
| playbackRate |
播放的倍速（加速、減速播放） |
| played |
當(dāng)前播放部件已經(jīng)播放的時間范圍（TimeRanges對象） |
| preload |
頁面加載時是否同時加載音視頻 |
| readyState |
返回當(dāng)前的準(zhǔn)備狀態(tài) |
| seekable |
返回當(dāng)前可跳轉(zhuǎn)部件的時間范圍（TimeRanges對象） |
| 屬性 |
說明 |
| seeking |
返回用戶是否做了跳轉(zhuǎn)操作 |
| src |
當(dāng)前音視頻源的URL |
| startOffsetTime |
返回當(dāng)前的時間偏移（Date對象） |
| textTracks |
返回可用的文本軌跡（TextTrackList對象） |
| videoTracks |
返回可用的視頻軌跡（VideoTrackList對象） |
| volume |
音量值 |
8、audio支持的格式
HTML5支持的音頻格式：
Ogg 免費(fèi) 支持的瀏覽器:C、F、O
MP3 收費(fèi) 支持的瀏覽器: I、C、S
Wav 收費(fèi) 支持的瀏覽器: F、O、S
9、audio的使用
<audio src="文件地址" controls="controls"></audio>
< audio src="文件地址" controls="controls">
您的瀏覽器暫不支持audio標(biāo)簽。播放視頻
</ audio>
< audio controls="controls" >
<source src="happy.MP3" type="video/mpeg" >
<source src="happy.ogg" type="video/ogg" >
您的瀏覽器暫不支持audio標(biāo)簽。播放視頻
</ audio>
10、audio常見屬性
| 屬性 |
值 |
描述 |
| autoplay |
autoplay |
如果出現(xiàn)該屬性，則音頻在就緒后馬上播放 |
| controls |
controls |
如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕 |
| loop |
loop |
如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束重新開始播放 |
| preload |
preload |
如果出現(xiàn)該屬性，則音頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用"autoplay",則忽略該屬性 |
| src |
url |
要播放的音頻的URL |
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
