video.js
擁有豐富的插件，使用簡(jiǎn)單

hls.js
小巧，適合直播推流

video標(biāo)簽屬性及事件

/**
* poster           貼圖
* controls         自動(dòng)播放
* muted            靜音
* loop             循環(huán)播放
* preload          預(yù)加載
* controls         自動(dòng)播放
*/
<video src="test.mp4" poster="./poster.jpg" controls muted loop preload>

<!-- 音量控制 -->
<video src="test.mp4" id="_volume"></video>
<script type="text/javascript">
   var v = document.getElementById('_volume');
   v.volume = 0.5;
</script>

<!--播放時(shí)間控制 -->
<video src="test.mp4" id="_time"></video>
<script type="text/javascript">
   var t = document.getElementById('_time');
   t.currentTime = 60; //秒
</script>

<!--播放地址切換 -->
<video src="test.mp4" id="_src"></video>
<script type="text/javascript">
   var s = document.getElementById('_src');
   setTimeout(()=>{
      s.src = 'test-2.mp4'
   },1000)
</script>

<!--備用地址切換 -->
<video  id="_source">
  <source src="test-1.mp4" type="video/mp4"> 
  <source src="test-2.mp4" type="video/mp4"> 
  <source src="test-3.mp4" type="video/mp4"> 
</video>
<script type="text/javascript">
  //播放失敗時(shí)，切換下一個(gè)
   var s = document.getElementById('_source');
   setTimeout(()=>{
     console.log('src',s.currentSrc)
   },1000)
</script>

以下簡(jiǎn)單介紹事件

<video src="text.mp4" id="video">

var video = document.getElementById('video');
//視頻在創(chuàng)立初期時(shí)，duration是NaN  需要加載完視頻元數(shù)據(jù)之后才能獲取到視頻時(shí)長(zhǎng)（有可能只獲取一部分）
console.log(video.duration,'duration')
video.paused     //播放是否暫停
video.play()        //開(kāi)始播放
video.pause()     //暫停播放

//視頻開(kāi)始加載   第一個(gè)執(zhí)行的事件
video.addEventListener('loadstart',function(e){
  console.log(e,'loadstart')
})

//視頻時(shí)長(zhǎng)發(fā)生變化
video.addEventListener('durationchange',function(e){
   //此時(shí)可以獲取到視頻時(shí)長(zhǎng)
  console.log(e,'durationchange')
})

//視頻元數(shù)據(jù)加載完畢
video.addEventListener('loadedmetadata',function(e){
  console.log(e,'loadedmetadata')
})

//沒(méi)有足夠的數(shù)據(jù)，來(lái)播放下一個(gè)視頻片段
video.addEventListener('loadeddata',function(e){
  console.log(e,'loadeddata')
})

//正在加載數(shù)據(jù)  會(huì)多次觸發(fā)
video.addEventListener('progress',function(e){
  console.log(e,'progress')
})

//通常視頻播放需要canplay,canplaythrough事件
//播放視頻有部分幀準(zhǔn)備完畢，可以播放
video.addEventListener('canplay',function(e){
  console.log(e,'canplay')
})

//已經(jīng)可以流暢的播放
video.addEventListener('canplaythrough',function(e){
  console.log(e,'canplaythrough')
})

//監(jiān)聽(tīng)視頻播放   （暫停到播放狀態(tài)的改變）
video.addEventListener('play',function(e){
  console.log(e,'play')
})

//監(jiān)聽(tīng)視頻暫停   （播放到暫停狀態(tài)的改變）
video.addEventListener('pause',function(e){
  console.log(e,'pause')
})

//跳轉(zhuǎn)到指定地方時(shí)觸發(fā)
video.addEventListener('seeking',function(e){
  console.log(e,'seeking')
})

//跳轉(zhuǎn)到指定地方后觸發(fā)
video.addEventListener('seeked',function(e){
  console.log(e,'seeked')
})

//無(wú)法解碼，視頻無(wú)法更新  （緩沖）
video.addEventListener('waiting',function(e){
  console.log(e,'waiting')
})

//從waiting狀態(tài)解碼成功后可到playing狀態(tài)
video.addEventListener('playing',function(e){
  console.log(e,'playing')
})

//視頻時(shí)間實(shí)時(shí)更新 (自定義進(jìn)度條)
video.addEventListener('timeupdate',function(e){
  console.log(e,'timeupdate')
})

//視頻播放結(jié)束（結(jié)束后插入廣告）
video.addEventListener('ended',function(e){
  console.log(e,'ended')
})

//視頻播放報(bào)錯(cuò) （測(cè)試時(shí) 重試大概31次觸發(fā)error事件）
video.addEventListener('error',function(e){
  console.log(e,'error')
})