App下載

前端視頻常用API接口實踐案例分享!代碼分享!

酒鞭名馬 2021-08-12 09:39:38 瀏覽數(shù) (5803)
反饋

對于開發(fā)我們有些時候可以減少不必要的麻煩都是盡最大的方法去減少這個麻煩,那么今天我們來說說有關于:“前端視頻常用API接口實踐案例分享!代碼分享!”這方面的相關內(nèi)容,希望大家可以在文章中有所收獲!

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

屬性 功能描述
controls controls 是否顯示播放控件
autoplay autoplay 設置是否打開瀏覽器后自動播放
width Pilex(像素) 設置播放器的寬度
height Pilex(像素) 設置播放器的高度
loop loop 設置視頻是否循環(huán)播放(即播放完后繼續(xù)重新播放)
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時直接調(diào)用,方便簡單

API 事件說明
addTextTrack() 向音頻/視頻添加新的文本軌道。
play video.play();    播放視頻
pause video.pause();  暫停播放視頻
load video.load();   將全部屬性回復默認值,視頻恢復重新開始狀態(tài)
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");  //括號內(nèi)為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);  //返回結(jié)果:空字符串、maybe(可能支持)、probably(支持)
}
</script>
</body>
</html> 

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

API屬性 事件說明
duration 返回媒體的播放總時長,單位秒
loop 是否循環(huán)播放
muted 是否靜音
paused 是否暫停
currentTime 當前播放時間(單位:秒)
volume 音量值(0~1)
networkState 返回當前網(wǎng)絡狀態(tài)
playbackRate 播放的倍速(加速、減速播放)(-2~2)
src 當前視頻源的URL
ended 返回當前播放是否結(jié)束標志
error 返回當前播放的錯誤狀態(tài)
initialTime 返回初始播放的位置
mediaGroup 當前音視頻所屬媒體組 (用來鏈接多個音視頻標簽)
played 當前播放部件已經(jīng)播放的時間范圍(TimeRanges對象)
preload 頁面加載時是否同時加載音視頻
readyState 返回當前的準備狀態(tài)
seekable 返回當前可跳轉(zhuǎn)部件的時間范圍(TimeRanges對象)
audioTracks 返回可用的音軌列表(MultipleTrackList對象)
autoplay 媒體加載后自動播放
buffered 返回緩沖部件的時間范圍(TimeRanges對象)
controller 返回當前的媒體控制器(MediaController對象)
controls 顯示播控控件
crossOrigin CORS設置
currentSrc 返回當前媒體的URL
defaultMuted 缺省是否靜音
defaultPlaybackRate 播控的缺省倍速
seeking 返回用戶是否做了跳轉(zhuǎn)操作
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 當音頻/視頻的加載已放棄時觸發(fā)。
canplay 當瀏覽器可以開始播放音頻/視頻時觸發(fā)。
canplaythrough 當瀏覽器可在不因緩沖而停頓的情況下進行播放時觸發(fā)。
durationchange 當音頻/視頻的時長已更改時觸發(fā)。
emptied 當目前的播放列表為空時觸發(fā)。
ended 當目前的播放列表已結(jié)束時觸發(fā)。
error 當在音頻/視頻加載期間發(fā)生錯誤時觸發(fā)。
loadeddata 當瀏覽器已加載音頻/視頻的當前幀時觸發(fā)。
loadedmetadata 當瀏覽器已加載音頻/視頻的元數(shù)據(jù)時觸發(fā)。
loadstart 當瀏覽器開始查找音頻/視頻時觸發(fā)。
pause 當音頻/視頻已暫停時觸發(fā)。
play 當音頻/視頻已開始或不再暫停時觸發(fā)。
playing 當音頻/視頻在因緩沖而暫停或停止后已就緒時觸發(fā)。
progress 當瀏覽器正在下載音頻/視頻時觸發(fā)。
ratechange 當音頻/視頻的播放速度已更改時觸發(fā)。
seeked 當用戶已移動/跳躍到音頻/視頻中的新位置時觸發(fā)。
seeking 當用戶開始移動/跳躍到音頻/視頻中的新位置時觸發(fā)。
stalled 當瀏覽器嘗試獲取媒體數(shù)據(jù),但數(shù)據(jù)不可用時觸發(fā)。
suspend 當瀏覽器刻意不獲取媒體數(shù)據(jù)時觸發(fā)。
timeupdate 當目前的播放位置已更改時觸發(fā)。
volumechange 當音量已更改時觸發(fā)。
waiting 當視頻由于需要緩沖下一幀而停止時觸發(fā)。

 那么這就是今天小編和大家分享的有關于“前端視頻常用API接口實踐案例分享!代碼分享!”這方面的相關內(nèi)容,更多有關于前端這方面的內(nèi)容我們都可以在W3Cschool中進行學習和了解!


0 人點贊