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