feat: 更新视频播放器功能并修复多个问题
- 升级edu-core依赖至v1.0.8 - 新增测试页面路由配置 - 修复订单页面Android平台专属支付按钮逻辑 - 优化视频播放器组件，增加倍速播放配置和控件显示逻辑 - 修复iOS平台视频封面显示问题 - 改进全屏模式处理逻辑 - 优化进度条和控制栏交互体验 - 修复DOM元素查找延迟问题 - 移除课程详情页冗余刷新逻辑
This commit is contained in:
148
components/video-player/video-player.vue
Normal file
148
components/video-player/video-player.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view>
|
||||
<yb-video
|
||||
ref="video" title="测试视频" height="auto"
|
||||
autoplay
|
||||
render-type="renderjs"
|
||||
:crossOrigin="crossOrigin"
|
||||
:src="src"
|
||||
:workIndex="workIndex"
|
||||
:custom="custom"
|
||||
header
|
||||
controls
|
||||
exitDirection="portrait"
|
||||
object-fit="contain"
|
||||
@destroyed="handleDestroyed"
|
||||
@workchange="handleWorkChange"
|
||||
@loadedmetadata="handleLoaded"
|
||||
@timeupdate="handleTimeUpdate"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import YbPlayer from '@/libs/yb-player.js'
|
||||
// import YbVideo from '../yingbing-video/components/yb-video/yb-video.vue'
|
||||
export default {
|
||||
// components: {
|
||||
// YbVideo
|
||||
// },
|
||||
data () {
|
||||
return {
|
||||
src: '',
|
||||
currentTime: 0,
|
||||
three: '',
|
||||
crossOrigin: '',
|
||||
danmu: [],
|
||||
quality: [],
|
||||
works: [],
|
||||
workIndex: 0,
|
||||
custom: {
|
||||
//自定义插槽
|
||||
slots: [{
|
||||
innerHTML: '<div class="fast-progress-btn" style="left:15%;">-15s</div>',
|
||||
followControls: true,
|
||||
click: () => {
|
||||
this.$refs.video.seek(this.currentTime - 15)
|
||||
}
|
||||
},{
|
||||
innerHTML: '<div class="fast-progress-btn" style="right:15%;">+15s</div>',
|
||||
followControls: true,
|
||||
click: () => {
|
||||
this.$refs.video.seek(this.currentTime + 15)
|
||||
}
|
||||
}],
|
||||
header: {
|
||||
disableMore: true,//关闭展示更多按钮
|
||||
},
|
||||
controls: {
|
||||
disableDanmuSend: true,//关闭弹幕发送按钮
|
||||
disableDanmuVisible: true,//关闭弹幕显示和隐藏按钮
|
||||
},
|
||||
progress: {
|
||||
rightSlots: []
|
||||
},
|
||||
},
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
computed() {
|
||||
this.changeSrc(3)
|
||||
},
|
||||
methods: {
|
||||
handleTimeUpdate (time) {
|
||||
this.currentTime = time
|
||||
},
|
||||
changeSrc (index) {
|
||||
var arr = [
|
||||
'/static/video/test-360.mp4',//如果网页开启了/h5/的前缀，就需要加上这个/h5/
|
||||
'https://v2-zj-scct.kwaicdn.com/upic/2025/08/14/20/BMjAyNTA4MTQyMDEwMDVfMzc5NDk1NDg1Nl8xNzIzNjYyNjIwNDdfMF8z_b_B92c62e9609ee404af820675b37447d6d.mp4?tag=1-1756166590-unknown-0-wo6mf8iejp-e4f1ab14369cda6a&provider=self&clientCacheKey=3x4mikyhc8uu4jk_b.mp4&di=b6859a4d&bp=14944&x-ks-ptid=172366262047&kwai-not-alloc=self-cdn&kcdntag=p:Sichuan;i:ChinaTelecom;ft:UNKNOWN;h:COLD;pn:kuaishouVideoProjection&Aecs=172.19.0.226&ocid=100000971&tt=b&ss=vps',
|
||||
'https://files2.changyou.com/vc/dj/2023/1115/loop2.ts',
|
||||
'https://ydtnt-jw.oss-cn-zhangjiakou.aliyuncs.com/jw-video/%E8%A7%86%E9%A2%91/%E8%8B%B1%E8%AF%AD/%E5%94%90%E8%BF%9F%E8%AF%8D%E6%B1%87%E7%9A%84%E9%80%BB%E8%BE%91%E5%8D%95%E8%AF%8D%E8%AF%BE/Unit1-1_batch.mp4'
|
||||
]
|
||||
this.quality = []
|
||||
for ( let i = 0 ; i < 3; i++ ) {
|
||||
this.quality.push({
|
||||
title: i == 0 ? '480p' : i == 1 ? '720p' : '1080p',
|
||||
src: arr[index],
|
||||
type: 'video'
|
||||
})
|
||||
}
|
||||
this.works = []
|
||||
for ( let i = 0 ; i < 10; i++ ) {
|
||||
this.works.push({
|
||||
title: '第' + (i + 1) + '集',
|
||||
src: arr[index]
|
||||
})
|
||||
}
|
||||
this.workIndex = 0
|
||||
this.three = index == 0 ? '360' : 'none'
|
||||
this.crossOrigin = index == 0 ? 'anonymous' : ''
|
||||
this.src = arr[index]
|
||||
},
|
||||
handleDestroyed () {
|
||||
uni.showToast({
|
||||
title: '视频已销毁',
|
||||
icon: 'none'
|
||||
})
|
||||
console.log('destroyed');
|
||||
},
|
||||
handleWorkChange (e) {
|
||||
this.src = e.detail.src
|
||||
this.$refs.video.showToast('由于测试切换链接和当前播放链接是同一个所以不会触发视频切换')
|
||||
},
|
||||
handleLoaded (e) {
|
||||
if ( e.type == 'init' ) {
|
||||
// this.loadDanmu()
|
||||
}
|
||||
},
|
||||
decimalToRgb (decimal) {
|
||||
var r = (decimal >> 16) & 255;
|
||||
var g = (decimal >> 8) & 255;
|
||||
var b = decimal & 255;
|
||||
return 'rgb(' + r + ',' + g + ',' + b + ')'
|
||||
},
|
||||
toggle () {
|
||||
this.$refs.video.toggle()
|
||||
},
|
||||
destroy () {
|
||||
this.$refs.video.unload()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
::v-deep .fast-progress-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user