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

embedded/2025/2/28 13:52:25/

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

大概的代码:

          <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/embedded/168803.html

相关文章

算法day1 dfs搜索2题

一 火星人 拿到这种类似于排序的&#xff0c;这个就好比如我们之前学习dfs基础的时候里面的指数型枚举 指数型枚举数据与数据之间没有任何枚举&#xff0c;就比如选这个数字与不选组合型枚举数据与数据之间有联系&#xff0c;下一个数字不可以给上一个数字排列型枚举数据与数…

机器学习基础知识使用总结

1.datascience import numpy as np""" numpy :数学计算库,主要用于数组计算"""print(np.__version__) #ndarry数组的创建与基本操作##将列表转换为数组 arr np.array([1,2,3,4,5]) print(arr) print(arr.itemsize)#创建等差数列数组 arrnp.arang…

vue中computed方法使用;computed返回函数

文章目录 1.正常使用computed2.使用computed返回可传参的函数 1.正常使用computed 一般我们使用computed返回一个变量字段&#xff0c;这个字段会根据具体的某个变量计算得到 例如 <div>{{num}}--{{num10}}</div>let num ref(1) let num10 computed(()>{ret…

数据如何安全“过桥”?分类分级与风险评估,守护数据流通安全

信息化高速发展&#xff0c;数据已成为企业的核心资产&#xff0c;驱动着业务决策、创新与市场竞争力。随着数据开发利用不断深入&#xff0c;常态化的数据流通不仅促进了信息的快速传递与共享&#xff0c;还能帮助企业快速响应市场变化&#xff0c;把握商业机遇&#xff0c;实…

PyQt——窗口

PyQt的窗口简介 在PyQt中&#xff0c;窗口&#xff08;Window&#xff09;是用户界面的核心组件&#xff0c;通常由QWidget或其子类&#xff08;如 QMainWindow , QDialog 等&#xff09;实现。窗口是用户与应用程序交互的主要界面&#xff0c;可以包含各种控件&#xff08;如按…

Python毕业设计选题:基于协同过滤算法的儿童图书推荐系统_django

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录 管理员功能界面 用户管理 图书分类管理 儿童图书管理 热销图书管理 公告…

计算机操作系统​OPT、FIFO、LRU​ 页面替换算法

以下是 OPT、FIFO、LRU 页面替换算法的核心规则总结与对比&#xff1a; 一、OPT&#xff08;Optimal Replacement&#xff0c;最佳置换算法&#xff09; 1. 核心规则 淘汰未来最长时间不会被访问的页面&#xff0c;或永远不再被访问的页面。需要预知完整的页面访问序列&#…

Spring Boot集成Jetty、Tomcat或Undertow及支持HTTP/2协议

目录 一、常用Web服务器 1、Tomcat 2、Jetty 3、Undertow 二、什么是HTTP/2协议 1、定义 2、特性 3、优点 4、与HTTP/1.1的区别 三、集成Web服务器并开启HTTP/2协议 1、生成证书 2、新建springboot项目 3、集成Web服务器 3.1 集成Tomcat 3.2 集成Jetty 3.3 集成…