H5 視頻兼容性處理總結：跨平臺視頻播放解決方案

**引言：H5視頻的重要性及挑戰**

隨著HTML5標準的發展和完善， `<video>` 標簽已經成為現代Web開發中實現內嵌視頻播放的重要手段。然而，不同瀏覽器和設備對HTML5視頻的支持程度存在差異，這就要求開發者掌握一套行之有效的視頻兼容性處理策略，確保視頻在多種環境下流暢播放。本文將深入探討H5視頻兼容性的關鍵問題，并分享實戰經驗與代碼示例。

---

### **一、視頻編碼格式與容器的選擇**

**標題：了解MIME類型與視頻格式兼容性**

為了保證視頻在所有瀏覽器中都能正確播放，你需要考慮視頻編碼格式（如H.264、VP8/VP9）以及封裝容器（MP4、WebM、Ogg）的兼容性。

```html

<video width="320" height="240" controls>

<!-- MP4 for Safari, IE, and old Firefox versions -->

<source src="movie.mp4" type="video/mp4">

<!-- WebM for most modern browsers -->

<source src="movie.webm" type="video/webm">

<!-- Ogg for older Firefox versions -->

<source src="movie.ogg" type="video/ogg">

<!-- Fallback content for browsers that don't support the video tag -->

<p>您的瀏覽器不支持內嵌視頻標簽，請升級或更換瀏覽器。</p>

</video>

```

在上述代碼中，我們按照瀏覽器對視頻格式的支持優先級，依次提供了MP4、WebM和Ogg格式的視頻源文件。

---

### **二、自動檢測與適配**

**標題：JavaScript輔助實現智能切換**

通過JavaScript動態檢測瀏覽器對不同視頻格式的支持情況，可以自動調整播放源。

```javascript

var videoElement = document.querySelector('video');

var sources = [

{src: 'movie.mp4', type: 'video/mp4'},

{src: 'movie.webm', type: 'video/webm'},

{src: 'movie.ogg', type: 'video/ogg'}

];

sources.forEach(function(source) {

var sourceElement = document.createElement('source');

sourceElement.src = source.src;

sourceElement.type = source.type;

videoElement.appendChild(sourceElement);

});

// 檢測是否能播放第一個源，若不能則移除并嘗試下一個

function tryNextSource(video) {

if (video.paused && video.error) {

var nextSource = video.getElementsByTagName('source')[0];

if (nextSource) {

video.removeChild(nextSource);

tryNextSource(video);

}

}

}

videoElement.addEventListener('error', function() {

tryNextSource(this);

}, true);

// 開始播放視頻

videoElement.load();

videoElement.play();

```

這段代碼會在遇到無法播放的視頻源時，自動切換至下一個可用的源。

---

### **三、響應式設計與全屏控制**

**標題：適應不同屏幕尺寸與設備特性**

針對移動端設備和桌面端的不同需求，視頻元素應當具有響應式布局，并且提供全屏播放的功能。

```html

<video width="100%" height="auto" playsinline controls>

<!-- Video sources... -->

</video>

<script>

// 全屏控制

var video = document.querySelector('video');

if (video.requestFullscreen) {

video.requestFullscreen();

} else if (video.mozRequestFullScreen) { /* Firefox */

video.mozRequestFullScreen();

} else if (video.webkitRequestFullscreen) { /* Chrome, Safari & Opera */

video.webkitRequestFullscreen();

}

</script>

```

這里通過CSS設置寬度為100%，高度自適應以實現響應式布局，并利用瀏覽器的Fullscreen API來控制視頻全屏播放。

---

### **四、視頻加載優化與錯誤處理**

**標題：提高加載速度與用戶體驗**

對于大體積視頻，可采用預加載或緩沖技術改善用戶體驗。

```html

<video preload="auto" poster="thumbnail.jpg" controls>

<!-- Video sources... -->

</video>

<script>

// 監聽視頻加載事件

video.addEventListener('loadedmetadata', function() {

console.log('視頻元數據已加載，可以獲取時長等信息');

});

video.addEventListener('canplay', function() {

console.log('視頻可以開始播放，但可能需要緩沖');

});

video.addEventListener('canplaythrough', function() {

console.log('視頻可以流暢播放，無需額外緩沖');

});

// 錯誤處理

video.addEventListener('error', function(event) {

console.error('視頻加載失敗:', event.target.error.code);

});

</script>

```

通過設置preload屬性為"auto"可提前加載視頻資源，同時監聽不同的視頻加載狀態事件，以便更好地處理加載錯誤和提升用戶體驗。

---

**結語：**

通過對H5視頻兼容性處理的深入探討，我們已了解了視頻編碼格式選擇、智能切換源、響應式設計、全屏控制以及加載優化等方面的關鍵技術。在實踐中靈活運用這些策略，將有助于構建出更加穩定、高性能、跨平臺的Web視頻播放環境。持續關注瀏覽器發展趨勢，及時更新視頻處理方案，方能在Web前端開發領域始終保持領先優勢。

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

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 這個平臺，視頻作者可以設置保護，對于需要保護的 視頻只能通過客戶端觀看，其它的視頻仍然可以網頁上直接播放。