當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

html5视频常用API接口「建议收藏」

發(fā)布時間：2023/12/15 综合教程 28 生活家

生活随笔收集整理的這篇文章主要介紹了 html5视频常用API接口「建议收藏」小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、雖然有的屬性是boolean類型，但仍舊建議按照XHTML書寫（屬性名=”屬性值”）格式，避免出現(xiàn)錯誤（下面加粗的屬性為常用屬性）

屬性	值	功能描述
controls	controls	是否顯示播放控件
autoplay	autoplay	設(shè)置是否打開瀏覽器后自動播放
width	Pilex（像素）	設(shè)置播放器的寬度
height	Pilex（像素）	設(shè)置播放器的高度
loop	loop	設(shè)置視頻是否循環(huán)播放（即播放完后繼續(xù)重新播放）
preload	preload	設(shè)置是否等加載完再播放
src	url	設(shè)置要播放視頻的url地址
poster	imgurl	設(shè)置播放器初始默認顯示圖片
autobuffer	autobuffer	設(shè)置為瀏覽器緩沖方式，不設(shè)置autoply才有效

演示：

<video controls="controls" width="500px" height="500px" loop autoplay  poster="imgUrl">
    <source src="黑客之都.mp4" type="video/mp4"/>
    <track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/>
</video>

二、.video標(biāo)簽API方法：Video標(biāo)簽也提供了比較人性化的API接口方法，供寫JS時直接調(diào)用，方便簡單

API	事件說明
addTextTrack()	向音頻/視頻添加新的文本軌道。
play	video.play(); 播放視頻
pause	video.pause(); 暫停播放視頻
load	video.load(); 將全部屬性回復(fù)默認值，視頻恢復(fù)重新開始狀態(tài)
canPlayType	var support = videoid.canPlayType(‘video/mp4’); 判斷瀏覽器是否支持當(dāng)前類型的視頻格式返回值：空字符串：不支持 Maybe：可能支持 Probably：完全支持

關(guān)于video標(biāo)簽的API接口在JS中用法如下：

 1 <!DOCTYPE HTML>  2 <html>  3 <head>  4 <style>  5  video::cue{  6 background-color:transparent;  7  color:white;  8 font-size:20px;  9 line-height: 100px; 10  } 11 </style> 12 </head> 13 <body> 14 15 <video controls="controls" id="video1"> 16 <source src="黑客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/> 17 <track src="a.vtt" label="中文字幕" srclang="zh" kind="subtitles" default/> 18 </video> 19 <button onclick="isPlay(this)">播放</button> 20 <button onclick="replay()">重新播放</button> 21 <button onclick="isPlayType()">瀏覽器支持</button> 22 23 <script> 24 var video1 = document.getElementById("video1"); //括號內(nèi)為video標(biāo)簽的id 25 //播放視頻（點擊播放按鈕，后變成暫停） 26 　　 function isPlay(obj1){ 27 if(video1.paused){　　　　//paused屬于視頻api屬性 28 　　　　 obj1.innerHTML="暫停"; 29  　　　　 video1.play(); 30 　　　　}else{ 31 　　　　 obj1.innerHTML="播放"; 32  　　　　 video1.pause(); 33 　　　　} 34 } 35 36 //重新從開頭播放 37 function replay(){ 38  video1.load(); 39 } 40 41 //判斷要播放的視頻格式當(dāng)前瀏覽器是否支持 42 function isPlayType(){ 43 var support = video1.canPlayType("video/mp4"); 44 console.log(support); //返回結(jié)果：空字符串、maybe（可能支持）、probably（支持） 45 } 46 </script> 47 </body> 48 </html>

三、video標(biāo)簽API屬性：Video不僅提供了API接口，還提供了許多的API屬性，方便在JS中做判斷，如下：大部分屬性通過boolean值判斷

API屬性	事件說明
duration	返回媒體的播放總時長，單位秒
loop	是否循環(huán)播放
muted	是否靜音
paused	是否暫停
currentTime	當(dāng)前播放時間（單位：秒）
volume	音量值(0~1)
networkState	返回當(dāng)前網(wǎng)絡(luò)狀態(tài)
playbackRate	播放的倍速(加速、減速播放)(-2~2)
src	當(dāng)前視頻源的URL
ended	返回當(dāng)前播放是否結(jié)束標(biāo)志
error	返回當(dāng)前播放的錯誤狀態(tài)
initialTime	返回初始播放的位置
mediaGroup	當(dāng)前音視頻所屬媒體組 (用來鏈接多個音視頻標(biāo)簽)
played	當(dāng)前播放部件已經(jīng)播放的時間范圍(TimeRanges對象)
preload	頁面加載時是否同時加載音視頻
readyState	返回當(dāng)前的準備狀態(tài)
seekable	返回當(dāng)前可跳轉(zhuǎn)部件的時間范圍(TimeRanges對象)
audioTracks	返回可用的音軌列表（MultipleTrackList對象）
autoplay	媒體加載后自動播放
buffered	返回緩沖部件的時間范圍(TimeRanges對象)
controller	返回當(dāng)前的媒體控制器（MediaController對象）
controls	顯示播控控件
crossOrigin	CORS設(shè)置
currentSrc	返回當(dāng)前媒體的URL
defaultMuted	缺省是否靜音
defaultPlaybackRate	播控的缺省倍速
seeking	返回用戶是否做了跳轉(zhuǎn)操作
startOffsetTime	返回當(dāng)前的時間偏移(Date對象)
textTracks	返回可用的文本軌跡(TextTrackList對象)
videoTracks	返回可用的視頻軌跡(VideoTrackList對象)

演示：

1 <script> 2 function setting(){ 3 video1.muted=true; 　　//設(shè)置靜音 4 video1.volume=0.2; //設(shè)置音量,1等于100% 5 video1.playbackRate=2; 　　　//2倍播放速度 6 video1.controls=false;　　　　//不顯示播控控件 7 } 8 </script>

四、音頻/視頻事件

事件	描述
abort	當(dāng)音頻/視頻的加載已放棄時觸發(fā)。
canplay	當(dāng)瀏覽器可以開始播放音頻/視頻時觸發(fā)。
canplaythrough	當(dāng)瀏覽器可在不因緩沖而停頓的情況下進行播放時觸發(fā)。
durationchange	當(dāng)音頻/視頻的時長已更改時觸發(fā)。
emptied	當(dāng)目前的播放列表為空時觸發(fā)。
ended	當(dāng)目前的播放列表已結(jié)束時觸發(fā)。
error	當(dāng)在音頻/視頻加載期間發(fā)生錯誤時觸發(fā)。
loadeddata	當(dāng)瀏覽器已加載音頻/視頻的當(dāng)前幀時觸發(fā)。
loadedmetadata	當(dāng)瀏覽器已加載音頻/視頻的元數(shù)據(jù)時觸發(fā)。
loadstart	當(dāng)瀏覽器開始查找音頻/視頻時觸發(fā)。
pause	當(dāng)音頻/視頻已暫停時觸發(fā)。
play	當(dāng)音頻/視頻已開始或不再暫停時觸發(fā)。
playing	當(dāng)音頻/視頻在因緩沖而暫停或停止后已就緒時觸發(fā)。
progress	當(dāng)瀏覽器正在下載音頻/視頻時觸發(fā)。
ratechange	當(dāng)音頻/視頻的播放速度已更改時觸發(fā)。
seeked	當(dāng)用戶已移動/跳躍到音頻/視頻中的新位置時觸發(fā)。
seeking	當(dāng)用戶開始移動/跳躍到音頻/視頻中的新位置時觸發(fā)。
stalled	當(dāng)瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時觸發(fā)。
suspend	當(dāng)瀏覽器刻意不獲取媒體數(shù)據(jù)時觸發(fā)。
timeupdate	當(dāng)目前的播放位置已更改時觸發(fā)。
volumechange	當(dāng)音量已更改時觸發(fā)。
waiting	當(dāng)視頻由于需要緩沖下一幀而停止時觸發(fā)。

總結(jié)

以上是生活随笔為你收集整理的html5视频常用API接口「建议收藏」的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： xslt三种带图片的超链接(a标签,im
下一篇： npm的卸载与安装流程(NPM安装教程)