记录一次bug，xgplayer西瓜视频播放切进度条视频加载失败
西瓜视频的官方文档：西瓜播放器
大概的代码：
<div id="video-player"></div>
//初始化
initXgPlayer () {
this.Player = new Player({
id: "video-player",
url: this.currentVideo.videoPath,
width: "100%",
height: 250,
volume: 0.6,
preload: 'auto',
playbackRate: [0.5, 0.75, 1, 1.5, 2], // 倍速
allowSeekPlayed: true //进度条只允许拖动缓存部分
});
this.Player.once("canplay", () => {
// 跳转到视频指定时间
this.Player.currentTime = this.currentVideo.videoViewDuration;
});
this.Player.on("error", () => {
console.log("error", this.timer);
});
this.Player.on("timeupdate", () => {
console.log("timeupdate", this.timer);
});
// ... 一些其他的监听事件
},
问题：
视频正常打开可以播放，跳转到指定时间也可以播放，但是如果向后倒回到未加载过的进度条位置，视频加载不出来。
解决：
-
开始以为是插件配置的问题
播放器缓存未正确处理，可能导致回退时无法加载视频数据，
启用预加载：设置 preload: 'auto'，也未生效
检查配置项：确保其他配置项（如 ignores、videoInit 等）未冲突。
ignores: [], // 确保未忽略关键功能 videoInit: true, // 确保视频初始化正确
也未生效，去掉allowSeekPlayed 发现向前拖进度条也加载不出来
打开控制台发现报错如下：
2.开始排查是否是跨域原因
在 XGPlayer 中，可以设置 crossOrigin 属性 （未生效）
crossOrigin: 'anonymous', // 设置跨域属性
Referrer-Policy 设置 （未生效）
在 HTML页面头部添加<meta name="referrer”content="no-referrer”〉，避免浏览器达strict-origin-when-cross-origin 策略过滤 Referer信息
3.开始怀疑是插件的问题
换用<video>标签打开视频，也是一样的效果，报错也如上图
4.开始研究请求链接
因为第一次进来视频是可以正常加载播放的，但是拖动进度条后，除了已经播放过得视频在本地有缓存，可以拖拽回去，拖拽到其他位置都加载不出来，怀疑可能是链接失效的问题
视频文件是存在阿里云oss上的，链接示例：
https://xxxx.aliyuncs.com/xxxxidxxxxxxxxx?Expires=时间戳&OSSAccessKeyId=xxxxxxkeyxxxx&Signature=xxxxx签名xxx
Expires 表示 URL 的有效期截止时间，如果当前时间超过了 Expires 指定的时间，URL 将失效
复制请求时间戳转换为北京时间 发现是第一次请求视频的时间，这说明在后面去发起请求，请求时间早已超过这个时间戳即URL的有效时间，后来翻来覆去的查，发现是后端返回连接的时候时间戳设置错误，给的有效期太短了。。。
最终原因总结： 视频请求链接失效导致视频请求报错
一点小错误，前后端运维查好几个小时，虽然不是啥大技术问题，但是过程中熟悉了插件的应用，还有阿里云存储视频的链接使用，记录一下思路，之后遇到类似问题，可用于参考。