HTML5 VIDEO標籤

來源:互聯網
上載者:User

標籤:nts   ack   dia   自動   loaded   html5   eve   str   als   

屬性

  • src :視頻的屬性
  • poster:視頻封面,沒有播放時顯示的圖片
  • preload:預先載入
  • autoplay:自動播放
  • loop:迴圈播放
  • controls:瀏覽器內建的控制條
  • width:視頻寬度
  • height:視頻高度

擷取video標籤:var Media = document.getElementById("video");

  • Media.error; //null:正常
  • Media.error.code; //1.使用者終止 2.網路錯誤 3.解碼錯誤 4.URL無效

//網路狀態 
- Media.currentSrc; //返回當前資源的URL
- Media.src = value; //返回或設定當前資源的URL
- Media.canPlayType(type); //是否能播放某種格式的資源
- Media.networkState; //0.此元素未初始化 1.正常但沒有使用網路 2.正在下載資料 3.沒有找到資源
- Media.load(); //重新載入src指定的資源
- Media.buffered; //返回已緩衝區域,TimeRanges
- Media.preload; //none:不預載 metadata:預載資源資訊 auto:

//準備狀態 
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking

//回放狀態

  • Media.currentTime = value; //當前播放的位置,賦值可改變位置
  • Media.startTime; //一般為0,如果為流媒體或者不從0開始的資源,則不為0
  • Media.duration; //當前資源長度 流返回無限
  • Media.paused; //是否暫停
  • Media.defaultPlaybackRate = value;//預設的回放速度,可以設定
  • Media.playbackRate = value;//當前播放速度,設定後馬上改變
  • Media.played; //返回已經播放的地區,TimeRanges,關於此對象見下文
  • Media.seekable; //返回可以seek的地區 TimeRanges
  • Media.ended; //是否結束
  • Media.autoPlay; //是否自動播放
  • Media.loop; //是否迴圈播放
  • Media.play(); //播放
  • Media.pause(); //暫停

//視頻控制

  • Media.controls;//是否有預設控制條
  • Media.volume = value; //音量
  • Media.muted = value; //靜音
    TimeRanges(地區)對象
  • TimeRanges.length; //地區段數
  • TimeRanges.start(index) //第index段地區的開始位置
  • TimeRanges.end(index) //第index段地區的結束位置

//相關事件

  var eventTester = function(e){     Media.addEventListener(e,function(){         console.log((new Date()).getTime(),e)     },false); }
  • eventTester("loadstart"); //用戶端開始請求資料
  • eventTester("progress"); //用戶端正在請求資料
  • eventTester("suspend"); //延遲下載
  • eventTester("abort"); //用戶端主動終止下載(不是因為錯誤引起)
  • eventTester("loadstart"); //用戶端開始請求資料
  • eventTester("progress"); //用戶端正在請求資料
  • eventTester("suspend"); //延遲下載
  • eventTester("abort"); //用戶端主動終止下載(不是因為錯誤引起),
  • eventTester("error"); //請求資料時遇到錯誤
  • eventTester("stalled"); //網速失速
  • eventTester("play"); //play()和autoplay開始播放時觸發
  • eventTester("pause"); //pause()觸發
  • eventTester("loadedmetadata"); //成功擷取資源長度
  • eventTester("loadeddata"); //
  • eventTester("waiting"); //等待資料,並非錯誤
  • eventTester("playing"); //開始回放
  • eventTester("canplay"); //可以播放,但中途可能因為載入而暫停
  • eventTester("canplaythrough"); //可以播放,歌曲全部載入完畢
  • eventTester("seeking"); //尋找中
  • eventTester("seeked"); //尋找完畢
  • eventTester("timeupdate"); //播放時間改變
  • eventTester("ended"); //播放結束
  • eventTester("ratechange"); //播放速率改變
  • eventTester("durationchange"); //資源長度改變
  • eventTester("volumechange"); //音量改變

HTML5 VIDEO標籤

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.