refactor(liveRoom): 优化直播室页面
- 移除静音提示按钮 - 添加诊断按钮配置 - 设置播放器容器大小 - 添加播放器 license配置 - 优化播放器初始化和播放逻辑 - 移除直播加载文本
This commit is contained in:
parent
450372ce84
commit
0a7ab15d29
@ -7,7 +7,6 @@
|
|||||||
<div></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="loading-text">直播加载中...</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user