记录一次bug,xgplayer西瓜视频播放切进度条视频加载失败

记录一次bug,xgplayer西瓜视频播放切进度条视频加载失败

西瓜视频的官方文档:西瓜播放器

大概的代码:

//初始化

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页面头部添加

3.开始怀疑是插件的问题

换用

4.开始研究请求链接

因为第一次进来视频是可以正常加载播放的,但是拖动进度条后,除了已经播放过得视频在本地有缓存,可以拖拽回去,拖拽到其他位置都加载不出来,怀疑可能是链接失效的问题

视频文件是存在阿里云oss上的,链接示例:

https://xxxx.aliyuncs.com/xxxxidxxxxxxxxx?Expires=时间戳&OSSAccessKeyId=xxxxxxkeyxxxx&Signature=xxxxx签名xxx

Expires 表示 URL 的有效期截止时间,如果当前时间超过了 Expires 指定的时间,URL 将失效

复制请求时间戳转换为北京时间 发现是第一次请求视频的时间,这说明在后面去发起请求,请求时间早已超过这个时间戳即URL的有效时间,后来翻来覆去的查,发现是后端返回连接的时候时间戳设置错误,给的有效期太短了。。。

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

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

相关推荐

比利时回家,摩洛哥小组第一,送出本届世界杯首粒乌龙球
C语言到底能干啥?我列举了8种经典案例
365官网国内怎么进

C语言到底能干啥?我列举了8种经典案例

📅 07-17 👁️ 3409
vSphere是什么,你了解么?
365足球外围平台

vSphere是什么,你了解么?

📅 07-13 👁️ 8491
内行人买洗衣机选TCL还是小天鹅?对比后恍然大悟,口碑型号揭晓
冷烫需要多久时间 冷烫加热多长时间
Bet—288365

冷烫需要多久时间 冷烫加热多长时间

📅 07-18 👁️ 7730
长期不掏耳屎会怎么样
365足球外围平台

长期不掏耳屎会怎么样

📅 07-09 👁️ 1169