liveh5-nuxt/app/pages/publicLiveRoom/index.client.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>