126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<script setup>
|
|
import { defaultDetail,getLink } from '@/api-public/public/index.js'
|
|
import { liveStore } from '@/stores/live/index.js'
|
|
import AliyunPlayer from 'aliyun-aliplayer'
|
|
import { publicStore } from '@/stores/public/index.js'
|
|
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css'
|
|
import broadcast from './components/broadcast/index.vue'
|
|
const {decryptUtils} = liveStore()
|
|
const {auctionData} = publicStore()
|
|
definePageMeta({
|
|
layout: 'publicLiveRoom'
|
|
})
|
|
const {t}= useI18n()
|
|
const pullLink = ref('')
|
|
const player = ref(null)
|
|
const loading1=ref(false)
|
|
const handlePlayerError = (error) => {
|
|
showConfirmDialog({
|
|
message: t('live_room.error_mess'),
|
|
showCancelButton: true
|
|
}).then(() => {
|
|
initializePlayer()
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
const initializePlayer = async () => {
|
|
try {
|
|
if (player.value) {
|
|
player.value.dispose()
|
|
}
|
|
|
|
// 判断是否是微信浏览器
|
|
const isWechat = /MicroMessenger/i.test(navigator.userAgent)
|
|
|
|
const playerConfig = {
|
|
id: 'J_prismPlayer1',
|
|
source: pullLink.value,
|
|
isLive: true,
|
|
preload: true,
|
|
autoplay: true, // 改为 true
|
|
muted: true, // 默认静音
|
|
diagnosisButtonVisible:false,
|
|
// vodRetry:10,
|
|
// liveRetry:10,
|
|
autoplayPolicy: {
|
|
fallbackToMute: true
|
|
},
|
|
width: '100%', //容器的大小
|
|
height: '100%', //容器的大小
|
|
skinLayout: false,
|
|
controlBarVisibility: 'never',
|
|
env: 'SEA' ,
|
|
license: {
|
|
domain: "szjixun.cn",
|
|
key: "OProxmWaOZ2XVHXLtf4030126521c43429403194970aa8af9"
|
|
}
|
|
}
|
|
|
|
player.value = new AliyunPlayer(playerConfig, (playerInstance) => {
|
|
// 在微信环境下，需要用户手动触发播放
|
|
if (isWechat) {
|
|
const startPlay = () => {
|
|
playerInstance?.play()
|
|
document.removeEventListener('WeixinJSBridgeReady', startPlay)
|
|
document.removeEventListener('touchstart', startPlay)
|
|
}
|
|
document.addEventListener('WeixinJSBridgeReady', startPlay)
|
|
document.addEventListener('touchstart', startPlay)
|
|
}
|
|
loading1.value = true
|
|
playerInstance?.play()
|
|
})
|
|
player.value.on('playing', () => {
|
|
loading1.value = false
|
|
|
|
})
|
|
player.value.on('loading', () => {
|
|
})
|
|
player.value.on('error', handlePlayerError)
|
|
} catch (error) {
|
|
console.log('error',error)
|
|
showConfirmDialog({
|
|
message: t('live_room.error_mess'),
|
|
showCancelButton: true
|
|
}).then(() => {
|
|
initializePlayer()
|
|
}).catch(() => {
|
|
})
|
|
}
|
|
}
|
|
onMounted(async () => {
|
|
const res = await defaultDetail({})
|
|
if(res.status === 0){
|
|
auctionData.value = res.data
|
|
}
|
|
const linkRes = await getLink({uuid:auctionData.value.uuid})
|
|
pullLink.value =decryptUtils.decryptData(linkRes.data.code)
|
|
initializePlayer()
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grow-1 relative">
|
|
<van-nav-bar :title="auctionData.title" />
|
|
<div id="J_prismPlayer1" class="w-100vw" style="height: calc(100vh - var(--van-nav-bar-height));"></div>
|
|
<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>
|
|
<div class="absolute left-1/2 transform -translate-x-1/2" style="bottom:calc(var(--safe-area-inset-bottom) + 46px)">
|
|
<broadcast></broadcast>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.prism-license-watermark) {
|
|
display: none !important;
|
|
}
|
|
</style> |