html5中有哪些視頻API接口-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關(guān)html5中有哪些視頻API接口，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

郫都ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

一、雖然有的屬性是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標簽API方法：Video標簽也提供了比較人性化的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'); 判斷瀏覽器是否支持當前類型的視頻格式返回值：空字符串：不支持 Maybe：可能支持 Probably：完全支持

關(guān)于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)絡(luò)狀態(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設(shè)置
currentSrc	返回當前媒體的URL
defaultMuted	缺省是否靜音
defaultPlaybackRate	播控的缺省倍速
seeking	返回用戶是否做了跳轉(zhuǎn)操作
startOffsetTime	返回當前的時間偏移(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	當音頻/視頻的加載已放棄時觸發(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	當音頻/視頻在因緩沖而暫?；蛲Ｖ购笠丫途w時觸發(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ā)。

看完上述內(nèi)容，你們對html5中有哪些視頻API接口有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享文章：html5中有哪些視頻API接口-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://aaarwkj.com/article30/dopdso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站改版、搜索引擎優(yōu)化、網(wǎng)頁設(shè)計公司、App開發(fā)、移動網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

html5中有哪些視頻API接口-創(chuàng)新互聯(lián)