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

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

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

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

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

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

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

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

服務(wù)器端做好視頻的加密，將原視頻文件通過(guò)對(duì)稱性加密生成一個(gè)加密新文件，客戶端將加密的新文件加載后進(jìn)行解密， 然后將解密后的原文件內(nèi)容通過(guò) 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)
  // 請(qǐng)求加密文件，然后解密添加到 sourceBuffer，也可以將文件裁切成多個(gè)部分,分多次加載
  fetch('./chunk')
    .then(async resp => {
      const blob = await resp.blob()
      const buf = await blob.arrayBuffer()
      sourceBuffer.addEventListener('updateend', () => {
        // 如果是多個(gè)文件塊，可以在判定已經(jīng)添加完所有塊后結(jié)束（一般會(huì)搞個(gè)塊列表做比對(duì)的）
        mediaSource.endOfStream()
      })
      // decode 是自定義的解碼函數(shù)，將請(qǐng)求到的加密文件 chunk 內(nèi)容解密成為真正的 mp4 文件
      // ，要與前面的 mimeCodec 對(duì)應(yīng)，否則會(huì)有錯(cuò)誤
      // 這個(gè)示例省略了很多錯(cuò)誤處理，要處理錯(cuò)誤需要對(duì) mediaSource 和 sourceBuffer 做 error 事件處理
      sourceBuffer.appendBuffer(decode(buf))
      console.log('appendBuffer after')
    })
    .catch(console.error)
})

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

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

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

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)
  }
}

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

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

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

總結(jié)

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

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

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

言

希望可以通過(guò)這篇文章，能夠給你得到幫助。(感謝一鍵三連)

學(xué)習(xí)深入理解HTML5的audio和video。

HTML5視頻概述

在HTML5播放一個(gè)視頻，很簡(jiǎn)單，只需要一行代碼：

<video src="resources/dadaqianduan.mp4" autoplay></video>

了解多媒體術(shù)語(yǔ)

了解視頻文件格式：

Audio Video InterLeaved .avi

Flash Video .flv

MPEG-4 .mp4

Matroska .mkv

Ogg .ogv

音頻和視頻編解碼器

編解碼器可以理解為一些算法代碼，用于處理視頻，音頻或者其元數(shù)據(jù)的編碼格式。對(duì)音頻或視頻文件進(jìn)行編碼，可使得文件大大縮小，便于在因特網(wǎng)上傳輸。

音頻編解碼器：

MP3，使用ACC音頻

Wav，使用Wav音頻

Ogg，使用OggVorbis音頻

視頻編解碼器：

MP4，使用H.264視頻，AAC音頻

WebM，使用VP8視頻，OggVorbis音頻

Ogg，使用Theora視頻，OggVorbis音頻

多媒體文件格式

audio元素支持的音頻格式MP3,Wav,Ogg；video元素支持的格式MP4,WebM,Ogg。

• audio元素是專門用于在網(wǎng)頁(yè)中播放網(wǎng)絡(luò)音頻的
• video元素是專門用于在網(wǎng)頁(yè)中播放視頻的

在HTML5中audio和video元素提供的接口包含了一系列的屬性，方法和事件，這些接口可以幫助開(kāi)發(fā)完成對(duì)音頻和視頻的操作。

那么如何在頁(yè)面中添加音頻和視頻呢？

音頻

<audio src="resources/audio.mp3">
</audio>

視頻

<video src="resources/video.mp4" width="600" height="200">
</video>

使用source元素

因?yàn)楦鞣N瀏覽器對(duì)音頻和視頻的編解碼器的支持不一樣，為了能夠在各種瀏覽器中正常使用，可以提供多個(gè)源文件。

<audio src="resources/audio.mp3">
 <source src="song.ogg" type="audio/ogg">
 <source src="song.mp3" type="audio/mpeg">
</audio>

<video src="resources/video.mp4" width="600" height="200" controls>
 <source src="movie.ogg" type="video/ogg codes=`theora,vorbis` ">
 <source src="movie.mp4" type="video/mp4">
</video>

使用source元素替代了audio或video的標(biāo)簽屬性src。

1. src屬性用于指定媒體文件的url地址
2. type屬性用于指定媒體文件的類型，屬性值為媒體文件的MIME類型，該屬性值還可以通過(guò)codes參數(shù)指定編碼格式

audio和video特性和屬性

元素的標(biāo)簽特性

1. src，源文件特性，用于指定媒體文件的url地址
2. autoplay，自動(dòng)播放特性，表示媒體文件加載后自動(dòng)播放。

<video src="resources/video.mp4" autoplay></video>

1. controls，控制條特性，表示為視頻或音頻添加自帶的播放控制條。

<video src="resources/video.mp4" controls></video>

1. loop，循環(huán)特性，表示音頻或視頻循環(huán)播放。

<video src="resources/video.mp4" controls loop></video>

1. preload，預(yù)加載特性，表示頁(yè)面加載完成后如何加載視頻數(shù)據(jù)。

• none表示不進(jìn)行預(yù)加載
• metadata表示只加載媒體文件的元數(shù)據(jù)
• auto表示加載全部視頻或音頻，默認(rèn)值為auto

<video src="resources/video.mp4" controls preload="auto"></video>

1. poster是video元素獨(dú)有的特性，替代內(nèi)容屬性，用于指定一副替代圖片的url地址，當(dāng)視頻不可以用時(shí)，會(huì)顯示該替代圖片。

<video src="resources/video.mp4" controls poster="images/none.jpg"</video>

1. width和height，video元素獨(dú)有的特性，用于指定視頻的寬度和高度

<video src="resources/video.mp4" width="600" height="200" controls></video>

接口屬性

1. currentSrc，只讀，獲取當(dāng)前正在播放或已加載的媒體文件的url地址
2. videoWidth，只讀，video元素特有屬性，獲取視頻原始的寬度
3. videoHeight，只讀，video元素特有屬性，獲取視頻原始的高度
4. currentTime，獲取或設(shè)置當(dāng)前媒體播放位置的時(shí)間點(diǎn)
5. startTime，只讀，獲取當(dāng)前媒體播放的開(kāi)始時(shí)間
6. duration，只讀，獲取整個(gè)媒體文件的播放時(shí)長(zhǎng)
7. volume，獲取或設(shè)置媒體文件播放時(shí)的音量，取值范圍在0.0到0.1之間
8. muted，獲取或設(shè)置媒體文件播放時(shí)是否靜音。true表示靜音，false表示消除靜音
9. ended，只讀，如果媒體文件已經(jīng)播放完畢則返回true，否則返回false
10. error，只讀，讀取媒體文件的錯(cuò)誤代碼
11. played，只讀，獲取已播放媒體的TimesRanges對(duì)象，該對(duì)象內(nèi)容包括已播放部分的開(kāi)始時(shí)間和結(jié)束時(shí)間。
12. paused，只讀，如果媒體文件當(dāng)前是暫停或未播放則返回true，否則返回false
13. seeking，只讀，獲取瀏覽器是否正在請(qǐng)求媒體數(shù)據(jù)
14. seekable，只讀，獲取媒體資源已請(qǐng)求的TimesRanges對(duì)象，該對(duì)象內(nèi)容包括已請(qǐng)求部分的開(kāi)始時(shí)間和結(jié)束時(shí)間
15. networkState，只讀，獲取媒體資源的加載狀態(tài)
16. buffered，只讀，獲取本地緩存的媒體數(shù)據(jù)的TimesRanges對(duì)象
17. readyState，只讀，獲取當(dāng)前媒體播放的就緒狀態(tài)
18. playbackRate，獲取或設(shè)置媒體當(dāng)前的播放速率
19. defaultPlaybackRate，獲取或設(shè)置媒體默認(rèn)的播放速率

視頻播放的快進(jìn)

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>視頻播放時(shí)的快進(jìn)</title>
<script type="text/javascript">
function Forward() {
 var el = document.getElementById("myPlayer");
 var time = el.currentTime;
 el.currentTime = time+300;
}
</script>
</head>
<body>
<video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
</video>
<br/>
<input type="button" value="快進(jìn)" onclick="Forward()"/>
</body>
</html>

audio和video接口方法

接口方法

1. load()，加載媒體文件，為播放做準(zhǔn)備。
2. play()，播放媒體文件。
3. pause()，暫停播放媒體文件。
4. canPlayType()，測(cè)試瀏覽器是否支持指定的媒體類型。

代碼示例使用接口：

<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>播放與暫停</title>
<script type="text/javascript">
var videoEl = null;
function Play() {
 videoEl.play();
}
function Pause() {
 videoEl.pause();
}
window.onload = function(){
 videoEl = document..getElementById("myPlayer");
}
</script>
</head>
<body>
<video id="myPlayer" width="600">
 <source src="resources/video.mp4" type="video/mp4">
</video><br>
<input type="button" value="播放" onclick="Play()"/>
<input type="button" value="暫停" onclick="Pause()"/>
</body>
</html>

audio和video事件

捕獲事件的方式

捕獲事件有兩種方法：一種是添加事件句柄，一種是監(jiān)聽(tīng)。

<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
</video>

// 監(jiān)聽(tīng)方式
var videoEl = document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);

接口事件

1. play，當(dāng)執(zhí)行方法play()時(shí)觸發(fā)
2. playing，正在播放時(shí)觸發(fā)
3. pause，當(dāng)執(zhí)行了方法pause()時(shí)觸發(fā)
4. timeupdate，當(dāng)播放位置被改變時(shí)觸發(fā)
5. ended，當(dāng)播放結(jié)束后停止播放時(shí)觸發(fā)
6. waiting，在等待加載下一幀時(shí)觸發(fā)
7. ratechange，在當(dāng)前播放速率改變時(shí)觸發(fā)
8. volumechange，在音量改變時(shí)觸發(fā)
9. canplay，以當(dāng)前播放速率需要緩沖時(shí)觸發(fā)
10. canplaythrough，以當(dāng)前播放速率不需要緩沖時(shí)觸發(fā)
11. durationchange，當(dāng)播放時(shí)長(zhǎng)改變時(shí)觸發(fā)
12. loadstart，當(dāng)瀏覽器開(kāi)始在網(wǎng)上尋找數(shù)據(jù)時(shí)觸發(fā)
13. progress，當(dāng)瀏覽器正在獲取媒體文件時(shí)觸發(fā)
14. suspend，當(dāng)瀏覽器暫停獲取媒體文件，且文件獲取并不是正常結(jié)束時(shí)觸發(fā)
15. abort，當(dāng)終止獲取媒體數(shù)據(jù)時(shí)觸發(fā)
16. error，在獲取媒體過(guò)程中出錯(cuò)時(shí)觸發(fā)
17. emptied，當(dāng)所在網(wǎng)絡(luò)變?yōu)槌跏蓟癄顟B(tài)時(shí)觸發(fā)
18. stalled，在瀏覽器嘗試獲取媒體數(shù)據(jù)失敗時(shí)觸發(fā)
19. seeking，在瀏覽器正在請(qǐng)求數(shù)據(jù)時(shí)觸發(fā)
20. seeded，在瀏覽器停止請(qǐng)求數(shù)據(jù)時(shí)觸發(fā)

定義全局的視頻對(duì)象

代碼如下：

<script type="text/javascript">
// 定義全局視頻對(duì)象
var videoEl = null;
// 網(wǎng)頁(yè)加載完畢后，讀取視頻對(duì)象
window.addEventListener("load", function() {
 videoEl = document.getElementById("myPlayer")
});
</script>

添加進(jìn)度顯示功能

代碼如下：

<script type="text/javascript">
function Progress() {
 var el = document.getElementById("progress");
 el.style.width = (videoEl.currentTime/videoEl.duration)*720 + "px"
 document.getElementById("info").innerHTML = s2time(videoEl.currentTime) + "/" + s2time(videoEl.duration);
}

function s2time(s) {
 var m = parseFloat(s/60).toFixed(0);
 s = parseFloat(s%60).toFixed(0);
 return (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
}
window.addEventListener("load",function(){videoEl.addEventListener("timeupdate",Progress)});
window.addEventListener("load",Progress)

添加靜音和調(diào)節(jié)音量的功能

消除靜音videoEl.muted=false；靜音效果videoEl.muted=true；videoEl.volume=e.value;修改音量的值。

添加慢進(jìn)和快進(jìn)功能