feat: 更新视频播放器功能并修复多个问题

- 升级edu-core依赖至v1.0.8
- 新增测试页面路由配置
- 修复订单页面Android平台专属支付按钮逻辑
- 优化视频播放器组件,增加倍速播放配置和控件显示逻辑
- 修复iOS平台视频封面显示问题
- 改进全屏模式处理逻辑
- 优化进度条和控制栏交互体验
- 修复DOM元素查找延迟问题
- 移除课程详情页冗余刷新逻辑
This commit is contained in:
2026-03-03 16:01:58 +08:00
parent a67874754f
commit 5200c73bc5
14 changed files with 420 additions and 143 deletions

View File

@@ -254,9 +254,21 @@
methods: {
dataIdWatcher (newVal) {
if ( newVal ) {
this.dom = document.querySelector('.rvideo' + newVal)
this.domSlot = document.querySelector('.rvideoslot' + newVal)
this.init()
// 延迟一下再查找 DOM 元素,确保 DOM 已经渲染完成
setTimeout(() => {
this.dom = document.querySelector('.rvideo' + newVal)
this.domSlot = document.querySelector('.rvideoslot' + newVal)
// 检查 DOM 元素是否存在
if ( this.dom && this.domSlot ) {
this.init()
} else {
console.error('yb-video: DOM 元素未找到,可能渲染失败', {
dataId: newVal,
dom: this.dom,
domSlot: this.domSlot
})
}
}, 100)
}
},
async init () {
@@ -348,8 +360,9 @@
parseSrc (path) {
// #ifdef H5
const isHash = window.location.hash
const route = this.dom.getAttribute('data-route')
const pathName = isHash ? window.location.pathname : window.location.pathname.replace(route, '')
// 安全检查 this.dom 是否存在
const route = this.dom ? this.dom.getAttribute('data-route') : ''
const pathName = isHash ? window.location.pathname : window.location.pathname.replace(route || '', '')
return window.location.origin + pathName + path.substring(1)
// #endif
// #ifdef APP-VUE
@@ -455,6 +468,7 @@
isLive: params.isLive,
header: params.header,
controls: params.controls,
alwaysShowControls: params.alwaysShowControls,
height: '100%',
objectFit: params.objectFit,
crossOrigin: params.crossOrigin,
@@ -465,6 +479,7 @@
workIndex: params.workIndex,
subtitles: params.subtitles,
subtitleIndex: params.subtitleIndex,
playbackRates: params.playbackRates,
custom,
decoder: {
hls: {

View File

@@ -105,6 +105,11 @@
type: Number,
default: 1
},
//倍速列表配置
playbackRates: {
type: Array,
default: () => []
},
//循环播放
loop: {
type: Boolean,
@@ -219,8 +224,13 @@
return 'web'
}
}
}
},
// #endif
//是否一直显示控件
alwaysShowControls: {
type: Boolean,
default: false
}
},
computed: {
boxStyle () {
@@ -250,6 +260,7 @@
created() {
//获取当前运行的平台
this.updateHeight()
console.log('倍速列表是否是ios YINGBING' + JSON.stringify(this.playbackRates))
},
methods: {
//接收消息
@@ -513,36 +524,38 @@
//重加载视频
async reloadVideo () {
const arg = {
src: this.parseSrc(this.src),
segments: this.parseSegments(this.segments),
title: this.title,
poster: this.poster,
type: this.type,
three: this.three,
initialTime: this.initialTime,
duration: this.duration,
autoplay: this.autoplay,
preload: this.preload,
muted: this.muted,
loop: this.loop,
playbackRate: this.playbackRate,
isLive: this.isLive,
header: this.header,
controls: this.controls,
objectFit: this.objectFit,
crossOrigin: this.crossOrigin,
openDirection: this.openDirection,
exitDirection: this.exitDirection,
quality: this.parseList(this.quality),
works: this.works,
workIndex: this.workIndex,
subtitles: this.parseList(this.subtitles),
subtitleIndex: this.subtitleIndex,
custom: await this.parseCustom(),
flvConfig: this.flvConfig,
hlsConfig: this.hlsConfig,
jsmpegConfig: this.jsmpegConfig
}
src: this.parseSrc(this.src),
segments: this.parseSegments(this.segments),
title: this.title,
poster: this.poster,
type: this.type,
three: this.three,
initialTime: this.initialTime,
duration: this.duration,
autoplay: this.autoplay,
preload: this.preload,
muted: this.muted,
loop: this.loop,
playbackRate: this.playbackRate,
playbackRates: this.playbackRates,
isLive: this.isLive,
header: this.header,
controls: this.controls,
alwaysShowControls: this.alwaysShowControls,
objectFit: this.objectFit,
crossOrigin: this.crossOrigin,
openDirection: this.openDirection,
exitDirection: this.exitDirection,
quality: this.parseList(this.quality),
works: this.works,
workIndex: this.workIndex,
subtitles: this.parseList(this.subtitles),
subtitleIndex: this.subtitleIndex,
custom: await this.parseCustom(),
flvConfig: this.flvConfig,
hlsConfig: this.hlsConfig,
jsmpegConfig: this.jsmpegConfig
}
this.evalJS('reloadVideo', arg)
},
//卸载视频
@@ -608,7 +621,8 @@
this.updateTimer = setTimeout(() => {
const arg = {
header: this.header,
controls: this.controls
controls: this.controls,
alwaysShowControls: this.alwaysShowControls
}
this.evalJS('updateConfig', arg)
}, 200)
@@ -778,6 +792,12 @@
playbackRate (newVal) {
this.setVideo('playbackRate', newVal)
},
//监听倍速列表
playbackRates (newVal) {
if (newVal && newVal.length > 0) {
this.reloadVideo()
}
},
//监听循环属性
loop (newVal) {
this.setVideo('loop', newVal)
@@ -791,9 +811,13 @@
this.updateConfig()
},
//监听controls
controls () {
this.updateConfig()
},
controls () {
this.updateConfig()
},
//监听alwaysShowControls
alwaysShowControls () {
this.updateConfig()
},
//深度监听custom
custom: {
handler(newVal, oldVal) {