记录一次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);
      });


    // ...    一些其他的监听事件
},

问题：

视频正常打开可以播放，跳转到指定时间也可以播放，但是如果向后倒回到未加载过的进度条位置，视频加载不出来。

解决：

1. 开始以为是插件配置的问题

播放器缓存未正确处理，可能导致回退时无法加载视频数据，

启用预加载：设置 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的有效时间，后来翻来覆去的查，发现是后端返回连接的时候时间戳设置错误，给的有效期太短了。。。

最终原因总结：  视频请求链接失效导致视频请求报错

一点小错误，前后端运维查好几个小时，虽然不是啥大技术问题，但是过程中熟悉了插件的应用，还有阿里云存储视频的链接使用，记录一下思路，之后遇到类似问题，可用于参考。