为了防止视频被轻易下载,我们项目需要在请求视频地址的时候,增加token识别,避免url一粘贴到浏览器地址上就能被盗。
明明一开始就找到的方法:
// @ts-ignore
videojs.Vhs.xhr.beforeRequest = function (options) {
options.headers = { token: 'xxx' };
return options;
};
试了无数遍就是加不上,然后搜索有些答案说版本问题,又重安了好几个版本,也不行……
新版本用的onRequest替代beforeRequest,还是不行……
看它源码,发现根本就没调用XhrFunction,然后手动videojs.Vhs.xhr(),结果虽然调用了,但依旧不行……
还犹豫是不是因为使用react框架的问题……
最后我找别人的示例试了下,发现关键点其实在type,只有“application/x-mpegURL”才能加headers,mp4文件就不会加……
找到了问题,那就需要对应的解决方式,用ffmpeg将mp4转m3u8搞定!