zhibo_2025/beifen/01_zhibo_list_card/views/Player.vue

<template>
  <div class="player">
    <h2 style="margin-bottom: 12px;">{{ route.query.title || '直播播放' }}</h2>
    <video
      ref="videoRef"
      v-if="videoUrl"
      controls
      autoplay
      style="width: 100%; max-width: 100%; border-radius: 8px;"
    ></video>
    <div v-else class="empty">暂无可播放的视频</div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import Hls from 'hls.js'

const route = useRoute()
const videoUrl = route.query.videoUrl
const videoRef = ref(null)

onMounted(() => {
  if (videoUrl && Hls.isSupported()) {
    const hls = new Hls()
    hls.loadSource(videoUrl)
    hls.attachMedia(videoRef.value)
  } else if (videoRef.value) {
    // 对于 Safari 原生支持 .m3u8
    videoRef.value.src = videoUrl
  }
})
</script>

<style scoped>
.player {
  padding: 16px;
}
.empty {
  text-align: center;
  color: #999;
  margin-top: 40px;
}
</style>