1.video屬性

<!-- video 不支持 IE8及以下版本瀏覽器，支持三種視頻格式：MP4，WebM 和 Ogg -->
  <video src="test.mp4" controls width="400" height="300"></video>

  <!-- 禁止下載 -->
  <video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video>

  <!-- 禁止下載，禁止全屏 -->
  <video src="test.mp4" controls controlslist="nodownload nofullscreen" width="400" height="300"></video>

  <!-- 自動(dòng)播放 （不同瀏覽器的表現(xiàn)不一樣） -->
  <video src="test.mp4" controls autoplay width="400" height="300"></video>

  <!-- 默認(rèn)靜音播放（可手動(dòng)點(diǎn)開繼續(xù)播放） -->
  <video src="test.mp4" controls muted width="400" height="300"></video>

  <!-- 循環(huán)播放 -->
  <video src="test.mp4" controls loop width="400" height="300"></video>

  <!-- 預(yù)加載 -->
  <video src="test.mp4" controls preload width="400" height="300"></video>

  <!-- 貼圖 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300"></video>

  <!-- 音量控制 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video>
  <script>
    var video = document.getElementById('_volume')
    video.volume = 2 // 取值范圍：0 到 1，0 是靜音，0.5 是一半的音量，1 是最大音量（默認(rèn)值）
  </script>

  <!-- 播放時(shí)間控制 -->
  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video>
  <script>
    var video = document.getElementById('_time')
    console.log(video.currentTime)  // 視頻當(dāng)前正在播放的時(shí)間（單位：s），進(jìn)度條拖到哪就顯示當(dāng)前的時(shí)間
    video.currentTime = 60  // 默認(rèn)從60秒處開始播放
  </script>

  <!-- 播放地址切換 （常見于切換超清  高清 流暢，不同畫質(zhì)的視頻地址不同） -->
  <video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video>
  <script>
    var video = document.getElementById('_src')
    console.log(video.src)     // http://127.0.0.1:8001/test.mp4   絕對(duì)地址，DOM 中是相對(duì)地址
    // video.src = 'test-2.mp4'   // 直接替換掉了原來(lái)的視頻src
    setTimeout(() => {
      video.src = 'test-2.mp4'  // 播放到第 30s 的時(shí)候，自動(dòng)切換視頻
    }, 30000)
  </script>

  <!-- 備用地址切換 -->
  <video controls autoplay width="400" height="300" id="_source">
    <source src="test3.mp4" type="video/mp4" />
    <source src="test9.mp4" type="video/mp4" />
    <source src="test-2.mp4" type="video/mp4" />
  </video>
  <script>
    var video = document.getElementById('_source')
    setTimeout(() => {
      console.log(video.currentSrc)     // http://127.0.0.1:8001/test.mp4
    }, 1000)

    // HTTP 載入失敗，狀態(tài)碼 404。媒體資源 http://127.0.0.1:8001/test3.mp4 載入失敗。
    // HTTP 載入失敗，狀態(tài)碼 404。媒體資源 http://127.0.0.1:8001/test9.mp4 載入失敗。
    // http://127.0.0.1:8001/test-2.mp4
    // 當(dāng)?shù)谝欢我曨l加載失敗時(shí)，自動(dòng)加載下一段視頻

2.video 事件

<script>
    var video = document.getElementById('video')

    // 1、loadstart：視頻查找。當(dāng)瀏覽器開始尋找指定的音頻/視頻時(shí)觸發(fā)，也就是當(dāng)加載過程開始時(shí)
    video.addEventListener('loadstart', function(e) {
      console.log('提示視頻的元數(shù)據(jù)已加載')
      console.log(e)
      console.log(video.duration)            // NaN
    })

    // 2、durationchange：時(shí)長(zhǎng)變化。當(dāng)指定的音頻/視頻的時(shí)長(zhǎng)數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)，加載后，時(shí)長(zhǎng)由 NaN 變?yōu)橐纛l/視頻的實(shí)際時(shí)長(zhǎng)
    video.addEventListener('durationchange', function(e) {
      console.log('提示視頻的時(shí)長(zhǎng)已改變')
      console.log(e)
      console.log(video.duration)           // 528.981333   視頻的實(shí)際時(shí)長(zhǎng)（單位：秒）
    })

    // 3、loadedmetadata ：元數(shù)據(jù)加載。當(dāng)指定的音頻/視頻的元數(shù)據(jù)已加載時(shí)觸發(fā)，元數(shù)據(jù)包括：時(shí)長(zhǎng)、尺寸（僅視頻）以及文本軌道
    video.addEventListener('loadedmetadata', function(e) {
      console.log('提示視頻的元數(shù)據(jù)已加載')
      console.log(e)
    })

    // 4、loadeddata：視頻下載監(jiān)聽。當(dāng)當(dāng)前幀的數(shù)據(jù)已加載，但沒有足夠的數(shù)據(jù)來(lái)播放指定音頻/視頻的下一幀時(shí)觸發(fā)
    video.addEventListener('loadeddata', function(e) {
      console.log('提示當(dāng)前幀的數(shù)據(jù)是可用的')
      console.log(e)
    })

    // 5、progress：瀏覽器下載監(jiān)聽。當(dāng)瀏覽器正在下載指定的音頻/視頻時(shí)觸發(fā)
    video.addEventListener('progress', function(e) {
      console.log('提示視頻正在下載中')
      console.log(e)
    })

    // 6、canplay：可播放監(jiān)聽。當(dāng)瀏覽器能夠開始播放指定的音頻/視頻時(shí)觸發(fā)
    video.addEventListener('canplay', function(e) {
      console.log('提示該視頻已準(zhǔn)備好開始播放')
      console.log(e)
    })

    // 7、canplaythrough：可流暢播放。當(dāng)瀏覽器預(yù)計(jì)能夠在不停下來(lái)進(jìn)行緩沖的情況下持續(xù)播放指定的音頻/視頻時(shí)觸發(fā)
    video.addEventListener('canplaythrough', function(e) {
      console.log('提示視頻能夠不停頓地一直播放')
      console.log(e)
    })

    // 8、play：播放監(jiān)聽
    video.addEventListener('play', function(e) {
      console.log('提示該視頻正在播放中')
      console.log(e)
    })

    // 9、pause：暫停監(jiān)聽
    video.addEventListener('pause', function(e) {
      console.log('暫停播放')
      console.log(e)
    })

    // 10、seeking：查找開始。當(dāng)用戶開始移動(dòng)/跳躍到音頻/視頻中新的位置時(shí)觸發(fā)
    video.addEventListener('seeking', function(e) {
      console.log('開始移動(dòng)進(jìn)度條')
      console.log(e)
    })

    // 11、seeked：查找結(jié)束。當(dāng)用戶已經(jīng)移動(dòng)/跳躍到視頻中新的位置時(shí)觸發(fā)
    video.addEventListener('seeked', function(e) {
      console.log('進(jìn)度條已經(jīng)移動(dòng)到了新的位置')
      console.log(e)
    })

    // 12、waiting：視頻加載等待。當(dāng)視頻由于需要緩沖下一幀而停止，等待時(shí)觸發(fā)
    video.addEventListener('waiting', function(e) {
      console.log('視頻加載等待')
      console.log(e)
    })

    // 13、playing：當(dāng)視頻在已因緩沖而暫?；蛲Ｖ购笠丫途w時(shí)觸發(fā)
    video.addEventListener('playing', function(e) {
      console.log('playing')
      console.log(e)
    })

    // 14、timeupdate：目前的播放位置已更改時(shí)，播放時(shí)間更新
    video.addEventListener('timeupdate', function(e) {
      console.log('timeupdate')
      console.log(e)
    })

    // 15、ended：播放結(jié)束
    video.addEventListener('ended', function(e) {
      console.log('視頻播放完了')
      console.log(e)
    })

    // 16、error：播放錯(cuò)誤
    video.addEventListener('error', function(e) {
      console.log('視頻出錯(cuò)了')
      console.log(e)
    })

    // 17、volumechange：當(dāng)音量更改時(shí)
    video.addEventListener('volumechange', function(e) {
      console.log('volumechange')
      console.log(e)
    })

    // 18、stalled：當(dāng)瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時(shí)
    video.addEventListener('stalled', function(e) {
      console.log('stalled')
      console.log(e)
    })

    // 19、ratechange：當(dāng)視頻的播放速度已更改時(shí)
    video.addEventListener('ratechange', function(e) {
      console.log('ratechange')
      console.log(e)
    })
</script>

3.基本示例

<video id="video" 
  style="object-fit:fill" 
  autoplay
  webkit-playsinline 
  playsinline 
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint" 
  src="video.mp4" />
</video>
<!--
  object-fit: fill   視頻內(nèi)容充滿整個(gè)video容器
  poster:"img.jpg" 視頻封面
  autoplay： 自動(dòng)播放
     auto - 當(dāng)頁(yè)面加載后載入整個(gè)視頻
     meta - 當(dāng)頁(yè)面加載后只載入元數(shù)據(jù)
     none - 當(dāng)頁(yè)面加載后不載入視頻

  muted：當(dāng)設(shè)置該屬性后，它規(guī)定視頻的音頻輸出應(yīng)該被靜音

  webkit-playsinline playsinline:   內(nèi)聯(lián)播放

  x5-video-player-type="h5" :  啟用x5內(nèi)核H5播放器（移動(dòng)端隱藏播放控件）
  x5-video-player-fullscreen="true"  全屏設(shè)置。ture和false的設(shè)置會(huì)導(dǎo)致布局上的不一樣
  x5-video-orientation="portraint" ：聲明播放器支持的方向，可選值landscape 橫屏,portraint豎屏。
                                     默認(rèn)值portraint。無(wú)論是直播還是全屏H5一般都是豎屏播放，
                                     但是這個(gè)屬性需要x5-video-player-type開啟H5模式
-->

4.監(jiān)控下載進(jìn)度

// 視頻時(shí)長(zhǎng)
var duration = video.duration

// 獲取視頻已經(jīng)下載的時(shí)長(zhǎng)
function getEnd(video) {
  var end = 0
  try {
    end = video.buffered.end(0) || 0
    end = parseInt(end * 1000 + 1) / 1000
  } catch(e) {
  }
  return end
}

參考

h5 video 移動(dòng)端填坑記

移動(dòng)端 HTML5 video 視頻播放優(yōu)化實(shí)踐

一款全兼容的播放器 videojs