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

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

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

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

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

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

利用 Media Source Extensions (MSE) 實現加密防下載

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

服務器端做好視頻的加密，將原視頻文件通過對稱性加密生成一個加密新文件，客戶端將加密的新文件加載后進行解密， 然后將解密后的原文件內容通過 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', () => {
        // 如果是多個文件塊，可以在判定已經添加完所有塊后結束（一般會搞個塊列表做比對的）
        mediaSource.endOfStream()
      })
      // decode 是自定義的解碼函數，將請求到的加密文件 chunk 內容解密成為真正的 mp4 文件
      // ，要與前面的 mimeCodec 對應，否則會有錯誤
      // 這個示例省略了很多錯誤處理，要處理錯誤需要對 mediaSource 和 sourceBuffer 做 error 事件處理
      sourceBuffer.appendBuffer(decode(buf))
      console.log('appendBuffer after')
    })
    .catch(console.error)
})

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

基于 canvas 實現播放器

基于 canvas 也是一種方案，好處是不會被瀏覽器識別成視頻，也就不會被接管。很多不太規范的移動端瀏覽器 都是直接接管視頻播放器，自定義的播放器樣式完全沒用，不會被顯示出來，使用 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 = '點擊播放'
  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)，導致沒有辦法將視頻全屏展示。 即便如此，也無法保證百分百不能被下載， 有些瀏覽器還有媒體嗅探功能，當請求了媒體文件后，就會被檢測到，提示用戶檢測到有媒體文件， 詢問用戶是否要下載。

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

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

總結

經過我的測試，對 MSE 和 canvas 方案無法支持的瀏覽器，恰恰是一些以下載視頻為特色的移動端瀏覽器， 這些瀏覽器內核可能也比較舊，或者是因為修改內核導致的不兼容，不考慮這些瀏覽器 MSE 應該是最佳方案， 因為 MSE 可以實現按需漸近加載視頻。

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

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

言

前不久抽空對目前比較火的視頻直播，做了下研究與探索，了解其整體實現流程，以及探討移動端HTML5直播可行性方案。

發現目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動 WEB 端目前以 HLS 為主（HLS存在延遲性問題，也可以借助 video.js 采用RTMP），PC端則以 RTMP 為主實時性較好，接下來將圍繞這兩種視頻流協議來展開H5直播主題分享。

一、視頻流協議HLS與RTMP

1. HTTP Live Streaming

HTTP Live Streaming（簡稱 HLS）是一個基于 HTTP 的視頻流協議，由 Apple 公司實現，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了對 HLS 的支持。一些常見的客戶端如：MPlayerX、VLC 也都支持 HLS 協議。

HLS 協議基于 HTTP，而一個提供 HLS 的服務器需要做兩件事：

編碼：以 H.263 格式對圖像進行編碼，以 MP3 或者 HE-AAC 對聲音進行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；分割：把編碼好的 TS 文件等長切分成后綴為 ts 的小文件，并生成一個 .m3u8 的純文本索引文件；瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡單的認為 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放，全部放完再請求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續播，周而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動態更新，ts 可以走 CDN。一個典型的 m3u8 文件格式如下：

#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
gear1/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
gear2/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
gear3/prog_index.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
gear4/prog_index.m3u8

可以看到 HLS 協議本質還是一個個的 HTTP 請求 / 響應，所以適應性很好，不會受到防火墻影響。但它也有一個致命的弱點：延遲現象非常明顯。如果每個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那么至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度，減少 m3u8 中的索引數，延時確實會減少，但會帶來更頻繁的緩沖，對服務端的請求壓力也會成倍增加。所以只能根據實際情況找到一個折中的點。

對于支持 HLS 的瀏覽器來說，直接這樣寫就能播放了：

<video src=”./bipbopall.m3u8″ height=”300″ width=”400″  preload=”auto” autoplay=”autoplay” loop=”loop” webkit-playsinline=”true”></video>

注意：HLS 在 PC 端僅支持safari瀏覽器，類似chrome瀏覽器使用HTML5 video

標簽無法播放 m3u8 格式，可直接采用網上一些比較成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。

程序猿的生活：web前端全棧資料粉絲福利（面試題、視頻、資料筆記，進階路線）zhuanlan.zhihu.com/p/136454207

2. Real Time Messaging Protocol

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套視頻直播協議，現在屬于 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，并且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好，延遲很小，但無法支持移動端 WEB 播放是它的硬傷。

雖然無法在iOS的H5頁面播放，但是對于iOS原生應用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好。瀏覽器端，HTML5 video

標簽無法播放 RTMP 協議的視頻，可以通過 video.js 來實現。

<link href=“http://vjs.zencdn.net/5.8.8/video-js.css” rel=“stylesheet”>
<video id=“example_video_1″ class=“video-js vjs-default-skin” controls preload=“auto” width=“640” height=“264” loop=“loop” webkit-playsinline>
<source src=“rtmp://10.14.221.17:1935/rtmplive/home” type=‘rtmp/flv’>
</video>
<script src=“http://vjs.zencdn.net/5.8.8/video.js”></script>
<script>
videojs.options.flash.swf = ‘video.swf’;
videojs(‘example_video_1′).ready(function() {
this.play();
});
</script>

3. 視頻流協議HLS與RTMP對比

二、直播形式

目前直播展示形式，通常以YY直播、映客直播這種頁面居多，可以看到其結構可以分成三層：

① 背景視頻層

② 關注、評論模塊

③ 點贊動畫

而現行H5類似直播頁面，實現技術難點不大，其可以通過實現方式分為：

① 底部視頻背景使用video視頻標簽實現播放

② 關注、評論模塊利用 WebScoket 來實時發送和接收新的消息通過DOM 和 CSS3 實現

③ 點贊利用 CSS3 動畫

了解完直播形式之后，接下來整體了解直播流程。

相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】

音視頻免費學習地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發

【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~

三、直播整體流程

直播整體流程大致可分為：

視頻采集端：可以是電腦上的音視頻輸入設備、或手機端的攝像頭、或麥克風，目前以移動端手機視頻為主。

直播流視頻服務端：一臺Nginx服務器，采集視頻錄制端傳輸的視頻流(H264/ACC編碼)，由服務器端進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。

視頻播放端：可以是電腦上的播放器（QuickTime Player、VLC），手機端的native播放器，還有就是 H5 的video標簽等，目前還是以手機端的native播放器為主。

（web前端學習交流群：328058344 禁止閑聊，非喜勿進！）

四、H5 錄制視頻

對于H5視頻錄制，可以使用強大的 webRTC （Web Real-Time Communication）是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術，缺點是只在 PC 的 Chrome 上支持較好，移動端支持不太理想。

使用 webRTC 錄制視頻基本流程

① 調用 window.navigator.webkitGetUserMedia()

獲取用戶的PC攝像頭視頻數據。

② 將獲取到視頻流數據轉換成 window.webkitRTCPeerConnection

(一種視頻流數據格式)。

③ 利用 WebScoket

將視頻流數據傳輸到服務端。

注意：

雖然Google一直在推WebRTC，目前已有不少成型的產品出現，但是大部分移動端的瀏覽器還不支持 webRTC（最新iOS 10.0也不支持），所以真正的視頻錄制還是要靠客戶端（iOS,Android）來實現,效果會好一些。

WebRTC支持度

WebRTC支持度

iOS原生應用調用攝像頭錄制視頻流程

① 音視頻的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音視頻數據流。

② 對視頻進行H264編碼，對音頻進行AAC編碼，在iOS中分別有已經封裝好的編碼庫（x264編碼、faac編碼、ffmpeg編碼）來實現對音視頻的編碼。

③ 對編碼后的音、視頻數據進行組裝封包。

④ 建立RTMP連接并上推到服務端。

五、搭建Nginx+Rtmp直播流服務

安裝nginx、nginx-rtmp-module

① 先clone nginx項目到本地：

brew tap homebrew/nginx

② 執行安裝nginx-rtmp-module

brew install nginx-full –with-rtmp-module

2. nginx.conf配置文件，配置RTMP、HLS

查找到nginx.conf配置文件（路徑/usr/local/etc/nginx/nginx.conf），配置RTMP、HLS。

① 在http節點之前添加 rtmp 的配置內容：

② 在http中添加 hls 的配置

3. 重啟nginx服務

重啟nginx服務，瀏覽器中輸入 http://localhost:8080，是否出現歡迎界面確定nginx重啟成功。

nginx -s reload

六、直播流轉換格式、編碼推流

當服務器端接收到采集視頻錄制端傳輸過來的視頻流時，需要對其進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。通常使用的常見編碼庫方案，如x264編碼、faac編碼、ffmpeg編碼等。鑒于 FFmpeg 工具集合了多種音頻、視頻格式編碼，我們可以優先選用FFmpeg進行轉換格式、編碼推流。

1.安裝 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

視頻文件地址：/Users/gao/Desktop/video/test.mp4

推流拉流地址：rtmp://localhost:1935/rtmplive/home，rtmp://localhost:1935/rtmplive/home

//RTMP 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

注意：

當我們進行推流之后，可以安裝VLC、ffplay（支持rtmp協議的視頻播放器）本地拉流進行演示

3.FFmpeg推流命令

① 視頻文件進行直播

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流攝像頭＋桌面+麥克風錄制進行直播

ffmpeg -f avfoundation -framerate 30 -i “1:0″ \-f avfoundation -framerate 30 -video_size 640x480 -i “0” \-c:v libx264 -preset ultrafast \-filter_complex ‘overlay=main_w-overlay_w-10:main_h-overlay_h-10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

更多命令，請參考：

FFmpeg處理RTMP流媒體的命令大全

FFmpeg常用推流命令

七、H5 直播視頻播放

移動端iOS和 Android 都天然支持HLS協議，做好視頻采集端、視頻流推流服務之后，便可以直接在H5頁面配置 video 標簽播放直播視頻。

<video controls preload=“auto” autoplay=“autoplay” loop=“loop” webkit-playsinline>
<source src=“http://10.14.221.8/hls/test.m3u8″ type=“application/vnd.apple.mpegurl” />
<p class=“warning”>Your browser does not support HTML5 video.</p>
</video>

八、總結

本文從視頻采集上傳，服務器處理視頻推流，以及H5頁面播放直播視頻一整套流程,具體闡述了直播實現原理，實現過程中會遇到很多性能優化問題。

① H5 HLS 限制必須是H264+AAC編碼。

② H5 HLS 播放卡頓問題，server 端可以做好分片策略，將 ts 文件放在 CDN 上，前端可盡量做到 DNS 緩存等。

③ H5 直播為了達到更好的實時互動，也可以采用RTMP協議，通過video.js 實現播放。

原文 https://zhuanlan.zhihu.com/p/146323842