video標(biāo)簽屬性方法和事件

<video>標(biāo)簽的屬性

src :視頻的屬性
poster:視頻封面,沒(méi)有播放時(shí)顯示的圖片
preload:預(yù)加載
autoplay:自動(dòng)播放
loop:循環(huán)播放
controls:瀏覽器自帶的控制條
width:視頻寬度
height:視頻高度

html 代碼:

<video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt="400px"></video>  

//audio和video都可以通過(guò)JS獲取對(duì)象,JS通過(guò)id獲取video和audio的對(duì)象
獲取video對(duì)象

Media = document.getElementById("media");

Media方法和屬性:

HTMLVideoElement和HTMLAudioElement 均繼承自HTMLMediaElement

Media.error; //null:正常
Media.error.code; //1.用戶終止 2.網(wǎng)絡(luò)錯(cuò)誤 3.解碼錯(cuò)誤 4.URL無(wú)效
//網(wǎng)絡(luò)狀態(tài)

  • Media.currentSrc; //返回當(dāng)前資源的URL
  • Media.src = value; //返回或設(shè)置當(dāng)前資源的URL
  • Media.canPlayType(type); //是否能播放某種格式的資源
  • Media.networkState; //0.此元素未初始化 1.正常但沒(méi)有使用網(wǎng)絡(luò) 2.正在下載數(shù)據(jù) 3.沒(méi)有找到資源
  • Media.load(); //重新加載src指定的資源
  • Media.buffered; //返回已緩沖區(qū)域,TimeRanges
  • Media.preload; //none:不預(yù)載 metadata:預(yù)載資源信息 auto:

//準(zhǔn)備狀態(tài)

  • Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
  • Media.seeking; //是否正在seeking

//回放狀態(tài)

  • Media.currentTime = value; //當(dāng)前播放的位置籍茧,賦值可改變位置

  • Media.startTime; //一般為0喷斋,如果為流媒體或者不從0開(kāi)始的資源拧粪,則不為0

  • Media.duration; //當(dāng)前資源長(zhǎng)度 流返回?zé)o限

  • Media.paused; //是否暫停

  • Media.defaultPlaybackRate = value;//默認(rèn)的回放速度叫潦,可以設(shè)置

  • Media.playbackRate = value;//當(dāng)前播放速度五续,設(shè)置后馬上改變

  • Media.played; //返回已經(jīng)播放的區(qū)域弟断,TimeRanges咏花,關(guān)于此對(duì)象見(jiàn)下文

  • Media.seekable; //返回可以seek的區(qū)域 TimeRanges

  • Media.ended; //是否結(jié)束

  • Media.autoPlay; //是否自動(dòng)播放

  • Media.loop; //是否循環(huán)播放

  • Media.play(); //播放

  • Media.pause(); //暫停
    //視頻控制

  • Media.controls;//是否有默認(rèn)控制條

  • Media.volume = value; //音量

  • Media.muted = value; //靜音

  • TimeRanges(區(qū)域)對(duì)象

  • TimeRanges.length; //區(qū)域段數(shù)

  • TimeRanges.start(index) //第index段區(qū)域的開(kāi)始位置

  • TimeRanges.end(index) //第index段區(qū)域的結(jié)束位置
    //相關(guān)事件

  var eventTester = function(e){
     Media.addEventListener(e,function(){
         console.log((new Date()).getTime(),e)
     },false);
 }
  • eventTester("loadstart"); //客戶端開(kāi)始請(qǐng)求數(shù)據(jù)
  • eventTester("progress"); //客戶端正在請(qǐng)求數(shù)據(jù)
  • eventTester("suspend"); //延遲下載
  • eventTester("abort"); //客戶端主動(dòng)終止下載(不是因?yàn)殄e(cuò)誤引起)
  • eventTester("loadstart"); //客戶端開(kāi)始請(qǐng)求數(shù)據(jù)
  • eventTester("progress"); //客戶端正在請(qǐng)求數(shù)據(jù)
  • eventTester("suspend"); //延遲下載
  • eventTester("abort"); //客戶端主動(dòng)終止下載(不是因?yàn)殄e(cuò)誤引起),
  • eventTester("error"); //請(qǐng)求數(shù)據(jù)時(shí)遇到錯(cuò)誤
  • eventTester("stalled"); //網(wǎng)速失速
  • eventTester("play"); //play()和autoplay開(kāi)始播放時(shí)觸發(fā)
  • eventTester("pause"); //pause()觸發(fā)
  • eventTester("loadedmetadata"); //成功獲取資源長(zhǎng)度
  • eventTester("loadeddata"); //
  • eventTester("waiting"); //等待數(shù)據(jù)夫嗓,并非錯(cuò)誤
  • eventTester("playing"); //開(kāi)始回放
  • eventTester("canplay"); //可以播放迟螺,但中途可能因?yàn)榧虞d而暫停
  • eventTester("canplaythrough"); //可以播放,歌曲全部加載完畢
  • eventTester("seeking"); //尋找中
  • eventTester("seeked"); //尋找完畢
  • eventTester("timeupdate"); //播放時(shí)間改變
  • eventTester("ended"); //播放結(jié)束
  • eventTester("ratechange"); //播放速率改變
  • eventTester("durationchange"); //資源長(zhǎng)度改變
  • eventTester("volumechange"); //音量改變
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末舍咖,一起剝皮案震驚了整個(gè)濱河市矩父,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌排霉,老刑警劉巖窍株,帶你破解...
    沈念sama閱讀 206,839評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡球订,警方通過(guò)查閱死者的電腦和手機(jī)后裸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)冒滩,“玉大人微驶,你說(shuō)我怎么就攤上這事】” “怎么了因苹?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,116評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)篇恒。 經(jīng)常有香客問(wèn)我扶檐,道長(zhǎng),這世上最難降的妖魔是什么胁艰? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,371評(píng)論 1 279
  • 正文 為了忘掉前任款筑,我火速辦了婚禮,結(jié)果婚禮上腾么,老公的妹妹穿的比我還像新娘奈梳。我一直安慰自己,他們只是感情好哮翘,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,384評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布颈嚼。 她就那樣靜靜地躺著,像睡著了一般饭寺。 火紅的嫁衣襯著肌膚如雪阻课。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 49,111評(píng)論 1 285
  • 那天艰匙,我揣著相機(jī)與錄音限煞,去河邊找鬼。 笑死员凝,一個(gè)胖子當(dāng)著我的面吹牛署驻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播健霹,決...
    沈念sama閱讀 38,416評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼旺上,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了糖埋?” 一聲冷哼從身側(cè)響起宣吱,我...
    開(kāi)封第一講書(shū)人閱讀 37,053評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎瞳别,沒(méi)想到半個(gè)月后征候,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體杭攻,經(jīng)...
    沈念sama閱讀 43,558評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,007評(píng)論 2 325
  • 正文 我和宋清朗相戀三年疤坝,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了兆解。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,117評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡跑揉,死狀恐怖锅睛,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情历谍,我是刑警寧澤衣撬,帶...
    沈念sama閱讀 33,756評(píng)論 4 324
  • 正文 年R本政府宣布,位于F島的核電站扮饶,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏乍构。R本人自食惡果不足惜甜无,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,324評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望哥遮。 院中可真熱鬧岂丘,春花似錦、人聲如沸眠饮。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,315評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)仪召。三九已至寨蹋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扔茅,已是汗流浹背已旧。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,539評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留召娜,地道東北人运褪。 一個(gè)月前我還...
    沈念sama閱讀 45,578評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像玖瘸,于是被迫代替她去往敵國(guó)和親秸讹。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,877評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容