ylrz_his_scrm_adminUI/src/views/live/liveConsole/LivePlayer.vue

<template>
  <div class="live-player">
    <video v-if="videoParam.liveType == 2" ref="videoPlayer" loop autoplay class="player">
      <source :src="videoParam.videoUrl" type="application/x-mpegURL">
    </video>
    <video v-if="videoParam.liveType == 1" ref="livePlayer" loop autoplay class="player">
    </video>
  </div>
</template>

<script>
import Hls from "hls.js";

export default {
  name: 'LivePlayer',
  props: {
    videoParam: {
      type: Object,
      required: true,
      default: () => ({
        startTime: '',
        livingUrl: '',
        liveType: 1,
        videoUrl: ''
      }),
    }
  },
  data() {
    return {
      videoDuration: 0, // 视频总时长（秒）
      startTime: 0, // 开播时间戳（毫秒）
      hls: null, // HLS 实例
    };
  },
  mounted() {

    // 这里可以添加播放器初始化逻辑
  },
  methods: {
    videoPlay(url) {
      if (Hls.isSupported()) {
        const videoElement = this.$refs.videoPlayer
        if (!videoElement) {
          console.error('找不到 video 元素')
          return
        }
        this.hls = new Hls();
        this.hls.attachMedia(videoElement);
        this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
          this.hls.loadSource(url);
          this.hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
            videoElement.play();
          });
        });
        this.hls.on(Hls.Events.ERROR, (event, data) => {
          console.error('HLS 错误:', data);
        });
        // 1. 初始化开播时间
        this.startTime = new Date(this.videoParam.startTime).getTime();
        if (this.videoParam.liveType === 2) {
          // 2. 监听视频元数据加载完成（获取视频时长）
          videoElement.addEventListener('loadedmetadata', () => {
            this.videoDuration = videoElement.duration; // 获取视频时长（秒）

            // 初始化视频播放位置
            this.updateVideoPosition(videoElement);

          });
        }
      } else {
        console.error('浏览器不支持 HLS')
      }
    },
    updateVideoPosition(video){
      const currentTime = new Date().getTime(); // 当前时间戳（毫秒）
      const elapsedTime = currentTime - this.startTime; // 已流逝时间（毫秒）
      if (elapsedTime < 0) {
        // 未开播：视频停在初始位置
        video.currentTime = 0;
        return;
      }

      // 已开播：计算视频循环后的位置（流逝时间 % 视频时长）
      const elapsedSeconds = elapsedTime / 1000; // 转换为秒
      // 视频内的播放位置（秒）
      // 设置视频播放位置
      video.currentTime = elapsedSeconds % this.videoDuration;
    },
    livePlay(url) {
      if (Hls.isSupported()) {
        const videoElement = this.$refs.livePlayer
        if (!videoElement) {
          console.error('找不到 video 元素')
          return
        }
        this.hls = new Hls();
        this.hls.attachMedia(videoElement);
        this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
          this.hls.loadSource(url);
          this.hls.on(Hls.Events.STREAM_LOADED, (event, data) => {
            videoElement.play();
          });
        });
        this.hls.on(Hls.Events.ERROR, (event, data) => {
          console.error('HLS 错误:', data);
        });
      } else {
        console.error('浏览器不支持 HLS')
      }
    },
    initPlayer() {

      if (this.videoParam.liveType === 1) {
        // 直播
        const isUrl = this.videoParam.livingUrl === null || this.videoParam.livingUrl.trim() === '';
        if (isUrl) {
          console.error('直播地址为空，无法初始化播放器')
          return
        }
        this.$nextTick(() => {
          this.livePlay(this.videoParam.livingUrl);
        })
        return;
      }
      const viUrl = this.videoParam.videoUrl === null || this.videoParam.videoUrl.trim() === ''
      if (viUrl) {
        console.error('播放地址为空，无法初始化播放器')
        return
      }
      if(this.videoParam.liveType === 2){
        // 录播
        this.videoPlay(this.videoParam.videoUrl);
      } else if(this.videoParam.liveType === 3){
        // 直播回放
        this.videoPlay(this.videoParam.videoUrl);
      }else {
        console.error('直播类型错误，无法初始化播放器')
      }
      // 创建播放器实例
      const videoPlayer = this.$refs.videoPlayer;
      // 添加播放器事件监听器
      videoPlayer.addEventListener('play', () => {
        console.log('播放器已开始播放');
      });
      videoPlayer.addEventListener('pause', () => {
        console.log('播放器已暂停');
      });
      videoPlayer.addEventListener('ended', () => {
        console.log('播放器已结束');
      });
    }
  },
  beforeDestroy() {
    this.hls?.destroy()
    // 销毁播放器实例
  }
};
</script>

<style scoped>
.live-player {
  margin-bottom: 20px;
}

.player {
  width: 100%;
  height: auto;
  border-radius: 8px;
  max-height: 300px; /* 设置最大高度，避免过大 */
  object-fit: contain; /* 保持比例，不拉伸 */
  background-color: #000; /* 黑色背景，避免视频加载时显示白色 */
}
</style>