定義H5播放器，在微信以及一些Android和iOS瀏覽中播放，存在容易被自帶瀏覽器接管的情況。接管后播放時，播放器的一些功能設(shè)置就不再顯示，比如水印信息等。

如果設(shè)置安卓和iOS手機(jī)在微信里打開不全屏的話，就可以正常顯示自定義播放器的參數(shù)，比如水印。

除了H5播放器可以設(shè)置是否全屏外，要想實(shí)現(xiàn)播放器自定義的一些效果更好展示，還可以進(jìn)行如下配置：

1、android下提示，讓用戶使用chrome 70以上內(nèi)核的瀏覽器（安卓自帶的）去播放，不允許他們在微信這些播放；

2、IOS下，也是chrome下可以； IOS下還可以支持微信播放，如果不允許全屏的話，也可以有水印。

3、電腦版下沒問題，基本主流瀏覽器都可以實(shí)現(xiàn)H5播放器自定義參數(shù)顯示。

定義原生播放器控制器功能限制下載

html5 播放器默認(rèn)是可以下載視頻的，在默認(rèn)的控制器（給 video 標(biāo)簽添加 controls 屬性開啟）上會有下載菜單， 即使不使用默認(rèn)提示的控制器，右鍵彈出的上下文菜單中也會有保存視頻的選項(xiàng)。

通過 controlslist 屬性可以設(shè)置瀏覽器提供的控制器，不讓下載菜單顯示出來。controlslist 還可以設(shè)置不顯示全屏等功能同，但是瀏覽器 支持較差，尤其是移動端瀏覽器。

<video src="test.mp4" playsinline autoplay="false" controls controlslist="nodownload"></video>

將 controlslist 的值設(shè)置為 nodownload ，就不會出現(xiàn)下載菜單了，不過 PC 上點(diǎn)擊右鍵的上下文菜單的保存視頻選項(xiàng)仍然有用，還是很容易被下載。

如果是通過自定義樣式來控制播放暫時等操作的控制條，還可以將 video 禁右鍵或者蒙上一層 div 來阻止彈出上下文菜單，防止下載。

利用 Media Source Extensions (MSE) 實(shí)現(xiàn)加密防下載

雖然通過 controlslist 可以防止下載，但是有些瀏覽器不支持，很多移動端的瀏覽器會直接接管播放器。 如果用戶懂一點(diǎn)技術(shù)，捕獲視頻文件的鏈接，就可以直接打開鏈接進(jìn)行下載了。 我們可以利用 Media Source Extensions API 來給文件做加密，這套技術(shù)本來是用于擴(kuò)展的，通過擴(kuò)展可以兼容更多 的視頻格式，可以認(rèn)為是前端的一套自定義轉(zhuǎn)碼的接口，將文件實(shí)時轉(zhuǎn)碼成瀏覽器支持的格式。

服務(wù)器端做好視頻的加密，將原視頻文件通過對稱性加密生成一個加密新文件，客戶端將加密的新文件加載后進(jìn)行解密， 然后將解密后的原文件內(nèi)容通過 MediaSource 推送，完成視頻的播放。

<canvas height="240" width="320" id="player" onclick="playOrPause()"></canvas>

const video = document.getElementById('videoId')
// 視頻編碼譯碼器，使用工具 mp4info 可以查看
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

const mediaSource = new MediaSource()
video.src = URL.createObjectURL(mediaSource)
mediaSource.addEventListener('sourceopen', e => {
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec)
  // 請求加密文件，然后解密添加到 sourceBuffer，也可以將文件裁切成多個部分,分多次加載
  fetch('./chunk')
    .then(async resp => {
      const blob = await resp.blob()
      const buf = await blob.arrayBuffer()
      sourceBuffer.addEventListener('updateend', () => {
        // 如果是多個文件塊，可以在判定已經(jīng)添加完所有塊后結(jié)束（一般會搞個塊列表做比對的）
        mediaSource.endOfStream()
      })
      // decode 是自定義的解碼函數(shù)，將請求到的加密文件 chunk 內(nèi)容解密成為真正的 mp4 文件
      // ，要與前面的 mimeCodec 對應(yīng)，否則會有錯誤
      // 這個示例省略了很多錯誤處理，要處理錯誤需要對 mediaSource 和 sourceBuffer 做 error 事件處理
      sourceBuffer.appendBuffer(decode(buf))
      console.log('appendBuffer after')
    })
    .catch(console.error)
})

這樣處理后，通過控制臺 network 查看到的是加密文件的請求地址，拿到后也不能播放，查看 video 標(biāo)簽源地址是 生成的臨時地址，也無法直接打開。并且，通過 Media Source Extensions API 還可以實(shí)現(xiàn)視頻分塊做按需加載。 其實(shí) video 標(biāo)簽播放視頻也會自動按需請求內(nèi)容（僅部分瀏覽器），需要服務(wù)器做好對 Range 消息頭的支持，根據(jù)參數(shù)來返回部分文件內(nèi)容。 不過 Media Source Extensions API 的兼容性不是很好，ie 和 safari 都是不支持的， 新版本 mac 上的 safari 不知道是否能支持。經(jīng)過測試，小部分移動端瀏覽器也不支持，無法顯示出視頻，大部分移動端瀏覽都可以支持的很好。 有些網(wǎng)站的播放器做了兼容，對于不支持 MSE 的瀏覽器仍然使用 video 標(biāo)簽播放原 mp4 文件。

基于 canvas 實(shí)現(xiàn)播放器

基于 canvas 也是一種方案，好處是不會被瀏覽器識別成視頻，也就不會被接管。很多不太規(guī)范的移動端瀏覽器 都是直接接管視頻播放器，自定義的播放器樣式完全沒用，不會被顯示出來，使用 canvas 就可以解決這個問題。

const canvas = document.getElementById('player')
/** @type {CanvasRenderingContext2D} */
const ctx = canvas.getContext('2d')

const video = document.createElement('video')
video.addEventListener('canplay', e => {
  // 渲染封面
  this.renderCover()
})
fetch('./test.mp4')
  .then(async resp => {
    const blob = await resp.blob()
    video.src = URL.createObjectURL(blob)
  })
  .catch(console.error)

function playOrPause() {
  if (video.ended) {
    return
  }
  if (video.paused) {
    video.play()
    startRender()
  } else {
    video.pause()
  }
}

function startRender() {
  requestAnimationFrame(() => {
    renderVideo()
    if (!video.paused && !video.ended) {
      startRender()
    }
  })
}

function renderCover() {
  ctx.clearRect(0, 0, 320, 240)
  ctx.fillStyle = '#000000'
  ctx.fillRect(0, 0, 320, 240)
  ctx.font = '40px Arial'
  ctx.fillStyle = '#ffffff'
  const text = '點(diǎn)擊播放'
  const m = ctx.measureText(text)
  ctx.fillText(text, 320 / 2 - m.width / 2, 240 / 2 + 40 / 2)
}

function renderVideo() {
  ctx.clearRect(0, 0, 320, 240)
  ctx.drawImage(video, 0, 0, 320, 240)
  if (video.paused) {
    ctx.font = '40px Arial'
    ctx.fillStyle = '#ffffff'
    const text = '已暫停'
    const m = ctx.measureText(text)
    ctx.fillText(text, 320 / 2 - m.width / 2, 240 / 2 + 40 / 2)
  }
}

以上僅僅是非常簡單的 demo，這個方案真要完善工作量還是挺大的，除操作條和字幕功能外，視頻全屏還需要做一定的重新渲染處理， 有些瀏覽器還不支持全屏 API (requestFullscreen)，導(dǎo)致沒有辦法將視頻全屏展示。 即便如此，也無法保證百分百不能被下載， 有些瀏覽器還有媒體嗅探功能，當(dāng)請求了媒體文件后，就會被檢測到，提示用戶檢測到有媒體文件， 詢問用戶是否要下載。

經(jīng)過我對某個移動端瀏覽器的測試，改 content-type 和后綴名也不行，只要請求的是視頻文件就會被檢測到。 只有把文件加密，請求的是加密文件，不是真正的視頻文件，這樣就不能被檢測到了，然后客戶端解密后再播放。

實(shí)測這個方案兼容性也不是很好，部分移動端瀏覽器會渲染不出來視頻內(nèi)容，有些還會出現(xiàn)卡頓和圖像錯亂。不過微信內(nèi)置 以及火狐等一些較為先進(jìn)的移動端瀏覽器支持的都比較好。不過，使用了 canvas 方案就沒有一些原生功能的支持的，如 小窗播放（畫中畫模式）。

總結(jié)

經(jīng)過我的測試，對 MSE 和 canvas 方案無法支持的瀏覽器，恰恰是一些以下載視頻為特色的移動端瀏覽器， 這些瀏覽器內(nèi)核可能也比較舊，或者是因?yàn)樾薷膬?nèi)核導(dǎo)致的不兼容，不考慮這些瀏覽器 MSE 應(yīng)該是最佳方案， 因?yàn)?MSE 可以實(shí)現(xiàn)按需漸近加載視頻。

由于視頻本身就非常耗資源，即時加密對服務(wù)器要求高，最好是先加密好。 加密必須是對稱性的，能加密也能解密，通過破解前端代碼掌握解密方法，仍然有辦法解開視頻內(nèi)容。 如果視頻是提前加密好再存儲的，也不好去搞動態(tài)密鑰。

html5 視頻播放器想要下載并做好兼容是非常困難的，基本上不太可能。有些對版權(quán)保護(hù)比較嚴(yán)格的網(wǎng)站，采取了 只能使用客戶端看視頻的方案，體驗(yàn)上就差一些了。比如 cctalk 這個平臺，視頻作者可以設(shè)置保護(hù)，對于需要保護(hù)的 視頻只能通過客戶端觀看，其它的視頻仍然可以網(wǎng)頁上直接播放。