西瓜视频的官方文档:西瓜播放器
大概的代码:
<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的有效时间,后来翻来覆去的查,发现是后端返回连接的时候时间戳设置错误,给的有效期太短了。。。
最终原因总结: 视频请求链接失效导致视频请求报错
一点小错误,前后端运维查好几个小时,虽然不是啥大技术问题,但是过程中熟悉了插件的应用,还有阿里云存储视频的链接使用,记录一下思路,之后遇到类似问题,可用于参考。