html5視頻常用API接口的實(shí)戰(zhàn)示例

2024-09-05 07:23:19

字體：大中小

供稿：網(wǎng)友

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

屬性	值	功能描述
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è)置播放器初始默認(rèn)顯示圖片
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時(shí)直接調(diào)用，方便簡單

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

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

<!DOCTYPE HTML><html><head>    <style>        video::cue{            background-color:transparent;            color:white;            font-size:20px;            line-height: 100px;        }    </style></head><body><video controls="controls" id="video1">    <source src="黑客之都.Hackerville.S01E01.720P.mp4" type="video/mp4"/>    <track src="a.vtt" label="中文字幕" srclang="zh" kind="subtitles" default/></video><button onclick="isPlay(this)">播放</button><button onclick="replay()">重新播放</button><button onclick="isPlayType()">瀏覽器支持</button><script>    var video1 = document.getElementById("video1");  //括號內(nèi)為video標(biāo)簽的id    //播放視頻（點(diǎn)擊播放按鈕，后變成暫停）　　 function isPlay(obj1){       if(video1.paused){　　　　//paused屬于視頻api屬性     　　　　  obj1.innerHTML="暫停";     　　　　  video1.play();　　　　}else{      　　　　 obj1.innerHTML="播放";      　　　　 video1.pause();　　　　}}//重新從開頭播放function replay(){       video1.load();}//判斷要播放的視頻格式當(dāng)前瀏覽器是否支持function isPlayType(){       var support = video1.canPlayType("video/mp4");       console.log(support);  //返回結(jié)果：空字符串、maybe（可能支持）、probably（支持）}</script></body></html>

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

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

演示

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

四、音頻/視頻事件

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