html5視頻常用API接口的實戰示例

2024-09-05 07:23:19

字體：大中小

來源：轉載

供稿：網友

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

屬性	值	功能描述
controls	controls	是否顯示播放控件
autoplay	autoplay	設置是否打開瀏覽器后自動播放
width	Pilex（像素）	設置播放器的寬度
height	Pilex（像素）	設置播放器的高度
loop	loop	設置視頻是否循環播放（即播放完后繼續重新播放）
preload	preload	設置是否等加載完再播放
src	url	設置要播放視頻的url地址
poster	imgurl	設置播放器初始默認顯示圖片
autobuffer	autobuffer	設置為瀏覽器緩沖方式，不設置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標簽API方法：Video標簽也提供了比較人性化的API接口方法，供寫JS時直接調用，方便簡單

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

關于video標簽的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");  //括號內為video標簽的id    //播放視頻（點擊播放按鈕，后變成暫停）　　 function isPlay(obj1){       if(video1.paused){　　　　//paused屬于視頻api屬性     　　　　  obj1.innerHTML="暫停";     　　　　  video1.play();　　　　}else{      　　　　 obj1.innerHTML="播放";      　　　　 video1.pause();　　　　}}//重新從開頭播放function replay(){       video1.load();}//判斷要播放的視頻格式當前瀏覽器是否支持function isPlayType(){       var support = video1.canPlayType("video/mp4");       console.log(support);  //返回結果：空字符串、maybe（可能支持）、probably（支持）}</script></body></html>

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

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

演示

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

四、音頻/視頻事件

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