refactor(liveRoom): 优化直播室页面

- 移除静音提示按钮
- 添加诊断按钮配置
- 设置播放器容器大小
- 添加播放器 license配置
- 优化播放器初始化和播放逻辑
- 移除直播加载文本
This commit is contained in:
xingyy 2025-02-18 09:47:30 +08:00
parent 450372ce84
commit 0a7ab15d29
2 changed files with 11 additions and 32 deletions

View File

@ -7,7 +7,6 @@
<div></div> <div></div>
</div> </div>
</div> </div>
<div class="loading-text">直播加载中...</div>
</div> </div>
</template> </template>

View File

@ -47,11 +47,18 @@ const initializePlayer = async () => {
preload: true, preload: true,
autoplay: true, // true autoplay: true, // true
muted: true, // muted: true, //
diagnosisButtonVisible:false,
autoplayPolicy: { autoplayPolicy: {
fallbackToMute: true fallbackToMute: true
}, },
width: '100%', //
height: '100%', //
skinLayout: false, skinLayout: false,
controlBarVisibility: 'never', controlBarVisibility: 'never',
license: {
domain: "szjixun.cn",
key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
}
} }
player.value = new AliyunPlayer(playerConfig, (playerInstance) => { player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
@ -59,6 +66,7 @@ const initializePlayer = async () => {
if (isWechat) { if (isWechat) {
console.log('当前是微信浏览器环境') console.log('当前是微信浏览器环境')
const startPlay = () => { const startPlay = () => {
console.log('执行了startPlay')
playerInstance?.play() playerInstance?.play()
document.removeEventListener('WeixinJSBridgeReady', startPlay) document.removeEventListener('WeixinJSBridgeReady', startPlay)
document.removeEventListener('touchstart', startPlay) document.removeEventListener('touchstart', startPlay)
@ -67,18 +75,13 @@ const initializePlayer = async () => {
document.addEventListener('WeixinJSBridgeReady', startPlay) document.addEventListener('WeixinJSBridgeReady', startPlay)
document.addEventListener('touchstart', startPlay) document.addEventListener('touchstart', startPlay)
} }
loading1.value = true
playerInstance?.play() playerInstance?.play()
}) })
player.value.on('init', () => {
console.log('init')
loading1.value = true
})
player.value.on('playing', () => { player.value.on('playing', () => {
console.log('playing') console.log('playing')
loading1.value = false loading1.value = false
}) })
player.value.on('error', handlePlayerError) player.value.on('error', handlePlayerError)
@ -170,17 +173,6 @@ const tipOpen = () => {
<div :id="playerId" class="w-full h-full"></div> <div :id="playerId" class="w-full h-full"></div>
<liveLoading :loading="loading1"></liveLoading> <liveLoading :loading="loading1"></liveLoading>
<!-- 添加静音提示按钮 -->
<div v-if="player?.muted"
class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2
bg-black/70 px-4 py-2 rounded-full cursor-pointer z-[1001]"
@click="unmutePlayer">
<div class="flex items-center gap-2 text-white">
<div class="i-carbon-volume-mute text-20px"></div>
<span class="text-14px">{{ t('live_room.tap_unmute') }}</span>
</div>
</div>
<transition name="fade"> <transition name="fade">
<div v-if="fullLive"> <div v-if="fullLive">
<sideButton class="absolute top-196px right-0 z-999"></sideButton> <sideButton class="absolute top-196px right-0 z-999"></sideButton>
@ -225,20 +217,8 @@ const tipOpen = () => {
</div> </div>
</template> </template>
<style lang="scss">
#J_prismPlayer {
width: 100%;
height: 100% !important;
& > video {
width: 100%;
height: 100%;
}
}
</style>
<style scoped>
<style scoped lang="scss">
/* 定义过渡动画 */ /* 定义过渡动画 */
.fade-enter-active { .fade-enter-active {
transition: opacity 1s ease; transition: opacity 1s ease;