[bugfix] - video.js播放視訊點選進度條失效/快進失效/分片加載

目錄

• • 補充
  • 背景 - 使用 video.js
  • 異常描述
  • 解決方案

補充

使用 videojs 播放視訊與 http 相關的點從前端視角有四處

• accept-ranges: bytes
• content-range
• content-length
• 響應碼206，視訊分片加載，需要後端配合

背景 - 使用 video.js

最近的一個小項目中需要播放視訊檔案，且主要是mp4格式，考慮到後期對其他視訊格式種類的支援和功能的拓展，我在項目裡使用了業界較為常用 video.js 庫。很多知名站點的視訊播放庫都使用的 video.js。video.js 的官方文檔為英文，要參見中文文檔可以通路此video.js api中文頁面。

異常描述

項目的前端部分使用 vue 架構，當播放本地 .mp4 檔案時，進度條可以正常進行控制，但是當播放來自伺服器的 .mp4 時，滑鼠點選或拖動進度條都會出現：播放中的視訊會重新回到開始位置的詭異現象。

正在播放中的視訊：

點選進度條到任意位置，進度都回到開始位置：

以下是視訊播放元件頁面，

<template>
  <video id="my-player" class="video-js vjs-big-play-button"></video>
</template>

<script>
export default {
  name: "VideoPlayer",
  mounted() {
    const player = videojs(
      "my-player",
      {
        controls: true,
        preload: "auto",
        width: 560,
        height: 370,
        playbackRates: [0.5, 1, 1.5, 2],        
        controlBar: {
          playToggle: {
            replay: false
          },
          volumePanel: {
            inline: false
          }
        },
        language: "zh-CN"
      }
    );

    player.src({
      type: "video/mp4",
      src: "./Sample720.mp4"  
      // Sample720.mp4 為本地檔案，與該 index.html 檔案目錄相同 
      // 改變 player 的 src 值可以切換視訊源 
    })
  },
  // 其餘無關代碼省略
};
</script>
           

解決方案

首先，檢查代碼本身沒有問題，因為本地視訊能正常播放；

其次，确認視訊也沒有問題，将背景傳回的視訊檔案下載下傳到本地，播放器和網頁仍然能正常播放；

最後，在 stackoverflow 找到異常的原因是該視訊檔案的響應頭需要添加 Accept-Ranges: bytes。 詳細請見HTTP range requests。

在通過 fiddle 給檔案請求添加了該響應頭後，播放器的進度條就正常了。于是，将問題和解決方案向背景開發回報，問題解決。