[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 给文件请求添加了该响应头后，播放器的进度条就正常了。于是，将问题和解决方案向后台开发反馈，问题解决。