HTML <video> 元素 用于在HTML或者XHTML文檔中嵌入視頻內(nèi)容

屬性

• controls

設(shè)置或返回視頻是否應(yīng)該顯示控件（比如播放/暫停等）

<video src="./mt-baker_cibsgl.mp4" width="100%" controls></video>

image.png

• autoplay

設(shè)置或返回是否在就緒（加載完成）后自動播放視頻

<video src="http://codehtml.cn/code-demo/video/mt-baker_cibsgl.mp4" width="100%" controls autoplay></video>

• nodownload

設(shè)置是否去除去除下載按鈕nodownload

<video src="http://codehtml.cn/code-demo/video/mt-baker_cibsgl.mp4" width="100%" controls controlslist="nodownload"></video>

• nofullscreen

設(shè)置是否去除全屏顯示按鈕

<video src="http://codehtml.cn/code-demo/video/mt-baker_cibsgl.mp4" width="100%" controls controlslist="nodownload nofullscreen"></video>

• poster

設(shè)置視頻的封面

<video src="http://codehtml.cn/code-demo/video/mt-baker_cibsgl.mp4" width="100%" controls poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526349212159&di=d6e00c2a2102cac0b50e0e622aa02618&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201411%2F06%2F20141106104720_WHEe2.jpeg"></video>

image.png

• muted

設(shè)置是否靜音（注意：移動端非靜音模式下無法自動播放）

<video src="http://codehtml.cn/code-demo/video/code.mp4" width="100%" controls muted></video>

• loop

設(shè)置循環(huán)播放

<video src="http://codehtml.cn/code-demo/video/mt-baker_cibsgl.mp4" width="100%" controls loop></video>

• preload

視頻預(yù)加載模式

<video src="http://codehtml.cn/code-demo/video/mt-baker_cibsgl.mp4" width="100%" controls preload></video>

• volume

音量控制悼院，區(qū)間范圍在0-1

<video src="http://codehtml.cn/code-demo/video/code.mp4" width="100%" controls id="volume"></video>

var time = document.getElementById("time");
time.currentTime = 60;// 秒

• 播放時間控制

<video src="http://codehtml.cn/code-demo/video/code.mp4" width="100%" controls preload id="time"></video>
<script type="text/javascript">
  var time = document.getElementById("time");
  time.currentTime = 60;// 秒
</script>

• 播放地址切換

<video src="http://codehtml.cn/code-demo/video/code.mp4" width="100%" controls preload id="_src"></video>
<script type="text/javascript">
  var _src = document.getElementById("_src");
  function changeSrc(){
    _src.src = "http://codehtml.cn/code-demo/video/mt-baker_cibsgl.mp4";
  }
</script>

• 備用地址切換

<video width="100%" controls id="_source">
  <source src="http://codehtml.cn/code-demo/video/code1.mp4" type="video/mp4"> // 錯誤地址
  <source src="http://codehtml.cn/code-demo/video/mt-baker_cibsgl.mp4" type="video/mp4">
</video>
<script type="text/javascript">
  var _source = document.getElementById("_source");
  setTimeout(function () { 
    console.log(_source.currentSrc);// 獲取當(dāng)前url
  },2000)
</script>

• 播放速度

<video src="http://codehtml.cn/code-demo/video/code.mp4" width="100%" controls preload id="_speed"></video>
<script type="text/javascript">
  var _speed = document.getElementById("_speed");
  _speed.playbackRate = 0.5;
</script>

事件

<video src="http://codehtml.cn/code-demo/video/code.mp4" width="100%" controls id="vs"></video>

• loadstart

?> 當(dāng)瀏覽器開始尋找指定的音頻/視頻時伤为，會發(fā)生 loadstart 事件。即當(dāng)加載過程開始時

v.addEventListener('loadstart',function(e){
  console.log("loadstart");
})

• durationchange

音頻/視頻的時長

v.addEventListener('durationchange',function(e){
  console.log("時長", v.duration);
})

• loadedmetadata

當(dāng)瀏覽器已經(jīng)加載完成視頻

v.addEventListener('loadedmetadata',function(e){
  console.log("loadedmetadata");
})

• loadeddata

當(dāng)瀏覽器已加載視頻的當(dāng)前幀時

v.addEventListener('loadeddata',function(e){
  console.log("loadeddata");
})

• progress

?> 當(dāng)瀏覽器正在下載視頻

v.addEventListener('progress',function(e){
  console.log("progress");
})

• canplay

判斷是否可以播放

v.addEventListener('canplay',function(){
  console.log('canplay');
})

• canplaythrough

判斷是否可以流暢播放

v.addEventListener('canplaythrough',function(){
  console.log('canplaythrough');
})

• play

視頻播放

v.addEventListener('play',function(){
  console.log('play');
})

• pause

視頻暫停

v.addEventListener('pause',function(){
  console.log('pause');
})

• seeking

當(dāng)用戶開始移動/跳躍到音視頻中的新位置時

v.addEventListener('seeking',function(){
  console.log('seeking');
})

• seeked

當(dāng)用戶已移動/跳躍到視頻中的新位置

v.addEventListener('seeked',function(){
  console.log('seeked');
})

• waiting

當(dāng)視頻由于需要緩沖下一幀而停止据途，等待

v.addEventListener('waiting',function(){
  console.log('waiting');
})

• playing

當(dāng)視頻在已因緩沖而暫徒视蓿或停止后已就緒時

v.addEventListener('playing',function(){
  console.log('playing');
})

• timeupdate

目前的播放位置已更改時，播放時間更新

v.addEventListener('timeupdate',function(){
  console.log('timeupdate');
})

• ended

播放結(jié)束

v.addEventListener('ended',function(){
  console.log('ended');
})

• error

播放錯誤

v.addEventListener('error',function(e){
  console.log('error', e);
})

• volumechange

當(dāng)音量已更改時

v.addEventListener('volumechange',function(){
  console.log('volumechange');
})

• stalled

當(dāng)瀏覽器嘗試獲取媒體數(shù)據(jù)昨凡，但數(shù)據(jù)不可用時

v.addEventListener('stalled',function(){
  console.log('stalled');
})

• ratechange

當(dāng)視頻的播放速度已更改時

v.addEventListener('ratechange',function(){
  console.log('ratechange');
})

參考資料：

MDN: video

HTML的媒體支持:audio和video元素

HTML 5 視頻/音頻參考手冊

原文閱讀 ---->
原文閱讀2