https://blog.csdn.net/zhuchunyan_aijia/article/details/52277846文章來源地址http://www.zghlxwxcb.cn/news/detail-515871.html
屬性介紹
| 屬性 | 說明 |
|---|---|
| controls | 顯示標(biāo)準(zhǔn)的 HTML5 視頻/音頻播放器控制條、控制按鈕。 |
| autoplay | 讓文件自動(dòng)播放。 |
| loop | 讓文件循環(huán)播放。 |
| preload | 屬性是用來緩存大體積文件的。它有三個(gè)可選值：“none” 不緩存、“auto” 緩存、“metadata” 只緩存文件元信息 |
| poster | 視頻封面 |
| webkit-playsinlin=“true” | 這個(gè)屬性在 ios 10中設(shè)置有用，其他的目前還不起作用，讓視頻在小窗內(nèi)播放，也就是不是全屏播放 |
| playsinline=“true” | IOS微信瀏覽器支持小窗內(nèi)播放 |
| x5-video-player-type=“h5” | 啟用H5播放器，是wechat安卓版特性 |
| x5-video-player-fullscreen=“true” | 全屏設(shè)置，設(shè)置為 true 是防止橫屏 |
| x5-video-orientation=“portraint” | 播放器屏幕的方向，landscape橫屏，portraint豎屏，默認(rèn)值為豎屏。 |
| source | 標(biāo)簽是為了能夠兼容各種瀏覽器對(duì)不同媒體類型的支持，我們可以用多個(gè)source元素來提供多個(gè)不同的媒體類型。支持mp4格式視頻流的瀏覽器可以播放mp4文件，如果不支持，可以播放ogg文件。 |
| codecs=dirac, speex | 是用來指定播放使用的解碼器(codecs); 這樣就可以更精確的讓瀏覽器如何播放提供的視頻。 |
方法介紹
只讀屬性
duration ---獲取媒體文件的播放時(shí)長，以s為單位，如果無法獲取則為NaN，當(dāng)觸發(fā)canplay事件后就可以獲取當(dāng)前總長度
startTime---返回起始播放時(shí)間，一般是0.0,除非是緩沖過的媒體文件，并一部分內(nèi)容已經(jīng)不再緩沖區(qū)(此屬性好像已經(jīng)不可用)
paused-----判斷是否已經(jīng)暫停，返回true/false
ended-----判斷是否已經(jīng)播放完畢，返回true/false
error----在發(fā)生了錯(cuò)誤后，返回錯(cuò)誤代碼
currentSrc --以字符串的形式發(fā)揮正在播放或已經(jīng)加載的文件，對(duì)應(yīng)瀏覽器在source元素中選擇的文件
buffered---獲取當(dāng)前緩沖區(qū)大小，返回TimeRanges對(duì)象
可控制屬性
src----指定音頻的文件位置
autoplay---是否自動(dòng)播放
preload----是否預(yù)加載
loop------是否循環(huán)播放
controls----顯示或隱藏用戶控制界面
autobuffer---媒體文件播放前是否進(jìn)行緩沖加載，如果設(shè)置了autoplay，則忽略此特性(此屬性好像已經(jīng)不可用)
muted------設(shè)置是否靜音
volume ----在0.0到1.0間的音量值，或查詢當(dāng)前音量值
currentTime--以s為單位返回從開始播放到目前所花的時(shí)間，也可設(shè)置currentTime的值來跳轉(zhuǎn)到特定位置方法
load() ---加載音頻、視頻軟件
paly() ---播放
pause()---暫停
canPlayType(obj) ----測試飯后指定指定的Mime類型的文件事件
loadstart ---客戶端開始請(qǐng)求數(shù)據(jù)
progress----正在播放的時(shí)候不停觸發(fā)，如果暫停不會(huì)觸發(fā)，觸發(fā)的時(shí)間間隔比較大
play------play()和autopaly播放時(shí)，類似事件onplaying
pause-----pause()方法觸發(fā)時(shí)
ended-----當(dāng)結(jié)束播放時(shí)
timeupdate----當(dāng)前播放時(shí)間發(fā)生改變的時(shí)候，播放中常用的時(shí)間處理，如果暫停不會(huì)觸發(fā)，觸發(fā)的時(shí)間間隔比較小
canplaythrough---歌曲已經(jīng)載入完成
canplay -----緩沖至可播放狀態(tài)，類似事件onloadedmetadata
onloadedmetadata----當(dāng)元數(shù)據(jù)（比如分辨率和時(shí)長）被加載時(shí)運(yùn)行的腳本
事件介紹
| 事件 | 描述 |
|---|---|
| loadstart | 瀏覽器開始在網(wǎng)上尋找媒體數(shù)據(jù) |
| progress | 瀏覽器正在獲取媒體數(shù)據(jù) |
| suspend | 瀏覽器暫停獲取媒體數(shù)據(jù)，但是下載過程并滑正常結(jié)束 |
| abort | 瀏覽器在下載完全部媒體數(shù)據(jù)之前中止獲取媒體數(shù)據(jù)，但是并不是由錯(cuò)誤引起的 |
| error | 獲取媒體數(shù)據(jù)過程中出錯(cuò) |
| emptied | video元素或audio元素所在網(wǎng)絡(luò)突然變?yōu)槲闯跏蓟癄顟B(tài)可能原因有兩個(gè):1.載入媒體過程中突然發(fā)生一個(gè)致命錯(cuò)誤 2.在瀏覽器正在選擇支持的播放格式時(shí)，又調(diào)用 了load方法重新載入媒體 |
| stalled | 瀏覽器嘗試獲取媒體數(shù)據(jù)失敗 |
| play | 即將開始播放，當(dāng)執(zhí)行了play方法時(shí)觸發(fā)，或數(shù)據(jù)下載后元素被設(shè)為autoplay屬性 |
| pause | 播放暫停，當(dāng)執(zhí)行了pause方式時(shí)觸發(fā) |
| loadedmetadata | 瀏覽器獲取完畢媒體的時(shí)間長和字節(jié)數(shù) |
| waiting | 播放過程由于得不到下一幀而暫停播放（例如下一幀尚未加載完畢），但很快就能夠得到下一幀 |
| canplay | 瀏覽器能夠播放媒體，但估計(jì)以當(dāng)前的播放速率不能直接播放完畢，播放期間需要緩沖 |
| canplaythrough | 瀏覽器能夠播放媒體，而且以當(dāng)前播放速率能夠?qū)⒚襟w播放完畢，不再需要進(jìn)行緩沖 |
| seeking | seeking屬性變?yōu)閠rue，瀏覽器正在請(qǐng)求數(shù)據(jù) |
| seeked | seeking屬性變?yōu)閒alse，瀏覽器停止請(qǐng)求數(shù)據(jù) |
| timeupdate | 由于播放位置被改變，可能是播放過程中的自然改變，也可能是被人為的改變，或由于播放不能連續(xù)而發(fā)生的跳變 |
| ended | 播放結(jié)束后停止播放 |
| ratechange | defaultplaybackRate屬性（默認(rèn)播放速率）或playbackRate屬性（當(dāng)前播放速率）被改變 |
| druationchange | 播放時(shí)長被改變 |
| volumechange | volume屬性（音量）被改變或muted屬性（靜音狀態(tài)）被改變 |
一段斷點(diǎn)續(xù)傳的加載記錄：
emptied video元素或audio元素所在網(wǎng)絡(luò)突然變?yōu)槲闯跏蓟癄顟B(tài)可能原因有兩個(gè):1.載入媒體過程中突然發(fā)生一個(gè)致命錯(cuò)誤 2.在瀏覽器正在選擇支持的播放格式時(shí)，又調(diào)用 了load方法重新載入媒體
timeupdate 由于播放位置被改變，可能是播放過程中的自然改變，也可能是被人為的改變，或由于播放不能連續(xù)而發(fā)生的跳變
loadedmetadata 瀏覽器獲取完畢媒體的時(shí)間長和字節(jié)數(shù)
progress 瀏覽器正在獲取媒體數(shù)據(jù)
canplay 瀏覽器能夠播放媒體，但估計(jì)以當(dāng)前的播放速率不能直接播放完畢，播放期間需要緩沖
play 即將開始播放，當(dāng)執(zhí)行了play方法時(shí)觸發(fā)，或數(shù)據(jù)下載后元素被設(shè)為autoplay屬性
canplaythrough 瀏覽器能夠播放媒體，而且以當(dāng)前播放速率能夠?qū)⒚襟w播放完畢，不再需要進(jìn)行緩沖
progress 瀏覽器正在獲取媒體數(shù)據(jù)
timeupdate
progress 瀏覽器正在獲取媒體數(shù)據(jù)
timeupdate
progress 瀏覽器正在獲取媒體數(shù)據(jù)
timeupdate
progress 瀏覽器正在獲取媒體數(shù)據(jù)
timeupdate
timeupdate
......
timeupdate
timeupdate
timeupdate 由于播放位置被改變，可能是播放過程中的自然改變，也可能是被人為的改變，或由于播放不能連續(xù)而發(fā)生的跳變
waiting 播放過程由于得不到下一幀而暫停播放（例如下一幀尚未加載完畢），但很快就能夠得到下一幀
timeupdate 由于播放位置被改變，可能是播放過程中的自然改變，也可能是被人為的改變，或由于播放不能連續(xù)而發(fā)生的跳變
stalled 瀏覽器嘗試獲取媒體數(shù)據(jù)失敗
文章來源：http://www.zghlxwxcb.cn/news/detail-515871.html
到了這里，關(guān)于HTML5中video元素詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
