feat(liveRoom): 优化直播播放器功能和错误处理
- 添加播放器错误处理逻辑,弹窗提示用户是否重新获取直播内容 - 实现重新获取直播内容的功能 - 优化直播加载中的显示效果 - 移除未使用的计数器和取消静音功能 - 简化 package.json 中的脚本命令 -
This commit is contained in:
parent
5ca8394297
commit
2cc2da264b
@ -23,7 +23,14 @@ const {quoteStatus, show, playerId, show1, auctionData, getSocketData, getLiveLi
|
||||
const pullLink = ref('')
|
||||
const handlePlayerError = (error) => {
|
||||
console.error('播放器错误:', error)
|
||||
player.value?.play()
|
||||
showConfirmDialog({
|
||||
message: t('live_room.error_mess'),
|
||||
showCancelButton: true
|
||||
}).then(() => {
|
||||
initializePlayer()
|
||||
}).catch(() => {
|
||||
})
|
||||
// player.value?.play()
|
||||
}
|
||||
const loading1=ref(false)
|
||||
const initializePlayer = async () => {
|
||||
@ -43,6 +50,8 @@ const initializePlayer = async () => {
|
||||
autoplay: true, // 改为 true
|
||||
muted: true, // 默认静音
|
||||
diagnosisButtonVisible:false,
|
||||
// vodRetry:10,
|
||||
// liveRetry:10,
|
||||
autoplayPolicy: {
|
||||
fallbackToMute: true
|
||||
},
|
||||
@ -59,14 +68,11 @@ const initializePlayer = async () => {
|
||||
player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
|
||||
// 在微信环境下,需要用户手动触发播放
|
||||
if (isWechat) {
|
||||
console.log('当前是微信浏览器环境')
|
||||
const startPlay = () => {
|
||||
console.log('执行了startPlay')
|
||||
playerInstance?.play()
|
||||
document.removeEventListener('WeixinJSBridgeReady', startPlay)
|
||||
document.removeEventListener('touchstart', startPlay)
|
||||
}
|
||||
|
||||
document.addEventListener('WeixinJSBridgeReady', startPlay)
|
||||
document.addEventListener('touchstart', startPlay)
|
||||
}
|
||||
@ -74,31 +80,25 @@ const initializePlayer = async () => {
|
||||
playerInstance?.play()
|
||||
})
|
||||
player.value.on('playing', () => {
|
||||
console.log('playing')
|
||||
loading1.value = false
|
||||
|
||||
})
|
||||
|
||||
player.value.on('loading', () => {
|
||||
console.log('loading')
|
||||
})
|
||||
player.value.on('error', handlePlayerError)
|
||||
} catch (error) {
|
||||
showConfirmDialog({
|
||||
message: t('live_room.error_mess'),
|
||||
showCancelButton: true
|
||||
}).then(() => {
|
||||
location.reload()
|
||||
initializePlayer()
|
||||
}).catch(() => {
|
||||
})
|
||||
console.error('播放器初始化失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 添加取消静音方法
|
||||
const unmutePlayer = () => {
|
||||
if (player.value) {
|
||||
player.value.muted = false
|
||||
player.value.play()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
pullLink.value = await getLiveLink()
|
||||
@ -111,25 +111,6 @@ onBeforeUnmount(() => {
|
||||
player.value?.dispose()
|
||||
player.value = null
|
||||
})
|
||||
const createCountUp = (element, value, options = {}) => {
|
||||
const defaultOptions = {
|
||||
duration: 1.5,
|
||||
separator: ',',
|
||||
decimal: '.',
|
||||
decimalPlaces: 0,
|
||||
enableScrollSpy: true,
|
||||
}
|
||||
const countUp = new CountUp(element, Number(value), {...defaultOptions, ...options})
|
||||
|
||||
if (!countUp.error) {
|
||||
countUp.start()
|
||||
} else {
|
||||
console.error(countUp.error)
|
||||
}
|
||||
|
||||
return countUp
|
||||
}
|
||||
|
||||
watch(() => fullLive.value, async (newVal) => {
|
||||
if (!newVal) return
|
||||
|
||||
@ -154,8 +135,9 @@ const tipOpen = () => {
|
||||
<template>
|
||||
<div class="relative h-full">
|
||||
<div :id="playerId" class="w-full h-full"></div>
|
||||
<liveLoading :loading="loading1"></liveLoading>
|
||||
|
||||
<div v-if="loading1" class="absolute left-1/2 transform translate-x--1/2 top-1/2 translate-y--1/2">
|
||||
<van-loading type="spinner" >直播加载中...</van-loading>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="fullLive">
|
||||
<sideButton class="absolute top-196px right-0 z-999"></sideButton>
|
||||
|
@ -107,7 +107,7 @@
|
||||
"text2": "北京时间"
|
||||
},
|
||||
"live_room": {
|
||||
"error_mess": "直播内容获取失败,是否刷新页面重新获取",
|
||||
"error_mess": "直播内容获取失败,是否重新获取",
|
||||
"success_mess": "出价成功",
|
||||
"warn_mess": "出价状态未开启",
|
||||
"now_price": "当前价",
|
||||
|
@ -9,16 +9,12 @@
|
||||
"dev:prod": "cross-env ENV_FILE=.env.prod nuxt dev",
|
||||
"build:test": "cross-env ENV_FILE=.env.test nuxt build",
|
||||
"build:prod": "cross-env ENV_FILE=.env.prod nuxt build",
|
||||
"build:test-csr": "cross-env ENV_FILE=.env.test nuxt generate --mode client-only",
|
||||
"build:prod-csr": "cross-env ENV_FILE=.env.prod nuxt generate --mode client-only",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"typecheck": "vue-tsc --noEmit",
|
||||
"release": "bumpp --commit --push --tag",
|
||||
"start": "cross-env ENV_FILE=.env.prod nuxt start",
|
||||
"dev:test-csr": "cross-env ENV_FILE=.env.test NODE_ENV=development nuxt dev --mode client-only",
|
||||
"dev:prod-csr": "cross-env ENV_FILE=.env.prod NODE_ENV=development nuxt dev --mode client-only"
|
||||
"start": "cross-env ENV_FILE=.env.prod nuxt start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fingerprintjs/fingerprintjs": "^4.5.1",
|
||||
|
Loading…
Reference in New Issue
Block a user