谷歌浏览器使用Video标签拖动进度条重新播放问题

问题描述

这两天自己写onesite 的时候遇到一个小问题。原框架使用video.js来播放视频，在网络环境下可以正常播放视频，且可以拖动或点击进度条能正常跳转。但是使用koa-static代理的本地视频文件则无法使用进度条，一旦修改进度，那么就会重头开始播放。

整理了一个现象的表格如下：

浏览器	视频来源	是否可用
谷歌	网络	可用
谷歌	koa-static托管	不可用
火狐	网络	可用
火狐	koa-static托管	可用

原因

这么一看就清晰了，应该是谷歌浏览器或者使用本地静态资源托管的时候出错了。先搜一下别人有没有遇到过吧。不出所料，打开bing，输入关键词，回车。稍微看了一下搜索结果，主要原因是：koa-static返回了一个文件流，并且没有设置response的header配置，谷歌浏览器不知道总文件的大小，它就每次都重头开始播放。火狐没问题，可能他们考虑到了这种情况，做了兼容。

解决

知道了问题就好解决了，在托管资源文件的时候，添加header配置就行。我这里使用的后端是koa + koa-static + koa-mount 。koa-static用来托管文件，koa-mount同来为静态文件添加统一的前缀。完整的代码配置如下

const Koa = require('koa'); 
const static = require('koa-static')
const Mount = require('koa-mount');

const app = new Koa();

app.use(Mount("/video/",static(CONFIG.VISIT_PATH, {
  prefix: "/video",
  index: false,     // 默认为true  访问的文件为index.html  可以修改为别的文件名或者false
  hidden: true,     // 是否同意传输隐藏文件
  defer: true,      // 如果为true，则在返回next()之后进行服务，从而允许后续中间件先进行响应
  setHeaders: (ctx, filepath, stat)=>{ // stat:包含文件的信息
    ctx.setHeader('Content-Type', 'video/mp4'); // 设置Content-Type
    ctx.setHeader('Content-Length', stat.size); // 设置Content-Length
    ctx.setHeader("Accept-Ranges", "bytes");    
  }
})))

const SERVER_PORT = 80
app.listen(SERVER_PORT, () => { 
  console.log("Start App From koa");
});

其实不论你用的啥后端框架，主要思想就是设置响应头，照着上面的内容设置就可以了。