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

ops/2025/3/3 15:21:59/

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

大概的代码:

          <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',也未生效

检查配置项:确保其他配置项(如 ignoresvideoInit 等)未冲突。

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

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

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


http://www.ppmy.cn/ops/162795.html

相关文章

如何在Github上面上传本地文件夹

前言 直接在GitHub网址上面上传文件夹是不行的&#xff0c;需要一层一层创建然后上传&#xff0c;而且文件的大小也有限制&#xff0c;使用Git进行上传更加方便和实用 1.下载和安装Git Git - Downloads 傻瓜式安装即可 2.获取密钥对 打开自己的Github&#xff0c;创建SSH密钥&…

遇到liunx服务器IO负载,读IO流量峰值347MB/s,排查并解决。

前言&#xff1a; 根据监控报警看到IO读的速度为347MB/s。 统计时间区段 统计时长 IOPS IO流量 状态 1 工作日上班时间段&#xff1a;08:00-18:00 1小时平均值 >2000 >200 MB/s 异常 4小时平均值 >1500 >150 MB/s 异常 8小时平均值 >1000 >100 MB/s 异常…

自动化问题汇总

PLC【1】伺服轴使用前 机器人【1】机器人使用前 上位机【1】 系统【1】Window的性能测试工具无法加载性能计数器 其他【1】 PLC 【1】伺服轴使用前 机器人 【1】机器人使用前 上位机 【1】 系统 【1】Window的性能测试工具无法加载性能计数器 使用.NET时&#xff0c;编…

GPT-4.5震撼登场,AI世界再掀波澜!(3)

GPT-4.5震撼登场&#xff0c;AI世界再掀波澜! GPT-4.5震撼登场&#xff0c;AI世界再掀波澜!(2) &#xff08;一&#xff09;伦理困境&#xff1a;如何抉择 GPT-4.5 的强大功能在为我们带来诸多便利的同时&#xff0c;也引发了一系列深刻的伦理问题&#xff0c;这些问题犹如高…

《Operating System Concepts》阅读笔记:p177-p178

《Operating System Concepts》学习第 18 天&#xff0c;p177-p178 总结&#xff0c;总计 2 页。 一、技术总结 1.implicit thread A programming model that transfers the creation and management of threading from application developers to compilers and run-time l…

博客系统--测试报告

博客系统--测试报告 项目背景项目功能功能测试①登录功能测试②发布博客功能测试③删除文章功能测试④功能测试总结&#xff1a; 自动化测试自动化脚本执行界面&#xff1a; 性能测试 本博文主要针对个人实现的项目《博客系统》去进行功能测试、自动化测试、性能测试&#xff0…

LeetCode 热题100 438. 找到字符串中所有字母异位词

LeetCode 热题100 | 438. 找到字符串中所有字母异位词 大家好&#xff0c;今天我们来解决一道经典的算法题——找到字符串中所有字母异位词。这道题在 LeetCode 上被标记为中等难度&#xff0c;要求我们在字符串 s 中找到所有是 p 的异位词的子串&#xff0c;并返回这些子串的…

Linux(centOS) 命令提示符格式修改(PS1)

1. 命令提示符的组成 命令提示符&#xff08;PS1&#xff09;通常由以下部分组成&#xff1a; 部分示例说明[ 和 ][...]提示符的开头和结尾&#xff0c;用于视觉分隔。用户名root 或 tianjiajie当前登录的用户。root 是超级用户&#xff0c;普通用户可能是其他名称。分隔用户…