Vue使用EasyPlayerPro播放本地MP4视频

<template>
  <div class="easy-player-container">
    <!-- 为每个播放器容器添加唯一的类 -->
    <div id="player_box1" class="player-box"></div>
  </div>
</template>
 
<script>
/* global EasyPlayerPro */
export default {
  name: 'EasyPlayerPro',
  props: {
    initialConfig: {
      type: Object,
      default: () => ({}),
    },
  },
  data () {
    return {
      player: '',
      playerInstances: {}, // 存储播放器实例
      config: {
        hasAudio: true,
        isLive: true,
        MSE: false,
        WCS: false,
        demuxType: 'auto',
        ...this.initialConfig,
      },
    };
  },
 
 
 
  methods: {
    setVideoUrl (url, id, changeId) {
 
      const resolveUrl = (url) => {
        if (
          url.startsWith('http:') ||
          url.startsWith('https:') ||
          url.startsWith('webrtc:') ||
          url.startsWith('ws:') ||
          url.startsWith('wss:') ||
          url.startsWith('wt:') ||
          url.startsWith('artc:')
        ) {
          return url;
        }
        const baseUrl = `${window.location.protocol}//${window.location.host}`;
        return `${baseUrl}${url}`;
      };
 
      // 转换 URL
      const resolvedUrl = resolveUrl(url);
      console.log(`解析后的 URL: ${resolvedUrl}`);
 
      if (!resolvedUrl) {
        console.error('URL 不能为空');
        return;
      }
 
      // 动态设置 demuxType
      let demuxType = 'auto'; // 默认值
      if (url.endsWith('.mp4')) {
        demuxType = 'mp4';
      } else if (url.startsWith('webrtc://')) {
        demuxType = 'native'; // WebRTC 流
      } else if (url.startsWith('ws://') || url.startsWith('wss://')) {
        demuxType = 'flv'; // WebSocket 流通常为 FLV
      }
      // 更新播放器配置
      this.config = {
        ...this.config,
        demuxType,
        isLive: url.startsWith('webrtc://') || url.includes('live'),
      };
 
 
      const player = this.playerInstances[id];
      if (player) {
        player.play(resolvedUrl).catch((e) => {
          console.error(`播放失败 (播放器${id}):`, e);
          this.$emit('play-error', e);
        });
      } else {
        // 使用箭头函数确保上下文
        this.$nextTick(() => {
          this.createPlayer(id, resolvedUrl);
        });
      }
    },
 
    createPlayer (id, url) {
      const container = document.getElementById(id);
      if (!container) {
        console.error(`未找到容器, ID: ${id}`);
        return;
      }
 
      const player = new EasyPlayerPro(container, {
        demuxType: this.config.demuxType || 'auto',
        autoplay: this.config.autoplay || true,
        muted: this.config.muted || true,
        isLive: this.config.isLive || true,
      });
 
      player
        .play(url)
        .then(() => {
          console.log(`播放成功: ${url}`);
          this.$emit('play-started', id);
        })
        .catch((e) => {
          console.error(`播放失败: ${e.message || e}`, e);
          this.$emit('play-error', { id, error: e });
        });
      // 添加事件监听器：循环播放
      player.on('ended', () => {
        console.log(`播放结束，准备循环播放: ${url}`);
        player.play(url).catch((e) => {
          console.error(`循环播放失败: ${e.message || e}`, e);
        });
      });
      this.playerInstances[id] = player;
      // 添加事件解除静音
      document.addEventListener('click', () => {
        player.unmute(); // 用户交互后解除静音
      });
    },
    // 销毁所有播放器实例
    destroyAllPlayers () {
      Object.keys(this.playerInstances).forEach(id => {
        this.destroyPlayer(id);
      });
    },
    // 销毁单个播放器实例
    destroyPlayer (id) {
      const player = this.playerInstances[id];
      if (player) {
        player.destroy();
        delete this.playerInstances[id];
      }
    },
    handleUnmute () {
      Object.values(this.playerInstances).forEach((player) => {
        if (player) {
          player.unmute();
        }
      });
    },
  },
 
 
 
  beforeUnmount () {
    // 销毁所有播放器实例
    this.destroyAllPlayers();
 
    // 清除全局事件监听器
    document.removeEventListener('click', this.handleUnmute);
  },
 
};
</script>
 
<style scoped>
.easy-player-container {
  width: 100%;
  background: #000;
  height: 100%;
  position: relative;
}
 
 
.player-box {
  background: #000;
}
</style>

<template>
  <div class="video-content">
    <EasyWebRTC ref="baseVideoRef"
      :initialConfig="{ demuxType: 'native', isLive: false, hasAudio: true, autoplay: true, muted: true }">
    </EasyWebRTC>
    <EasyWebRTC ref="videoRef" :initialConfig="{ demuxType: 'flv', isLive: true, hasAudio: true, }"></EasyWebRTC>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import EasyWebRTC from "../components/EasyWebRTC.vue";
 
// 定义组件引用
const baseVideoRef = ref(null);
const videoRef = ref(null);
 
onMounted(() => {
  nextTick(() => {
    // 配置 baseVideoRef
    if (baseVideoRef.value) {
      const baseVideoUrl = "/video.mp4"; // 替换为实际的视频文件路径
      const baseContainerId = "baseVideo";
 
      try {
        baseVideoRef.value.setVideoUrl(baseVideoUrl, baseContainerId, baseContainerId);
        console.log("baseVideoRef:", baseVideoRef.value);
 
        // 修改 DOM 元素 ID
        const targetChild = baseVideoRef.value.$el?.firstElementChild;
        if (targetChild) {
          targetChild.id = baseContainerId; // 修改 ID
          console.log(`成功修改 baseVideo 的 ID 为: ${baseContainerId}`);
        } else {
          console.warn("未找到 baseVideoRef 的子节点");
        }
      } catch (error) {
        console.error("设置 baseVideo URL 时出错:", error);
      }
    } else {
      console.error("baseVideoRef 未挂载");
    }
 
    // 配置 videoRef
    if (videoRef.value) {
      const videoUrl = "http://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4";
      const videoContainerId = "video";
 
      try {
        videoRef.value.setVideoUrl(videoUrl, videoContainerId, videoContainerId);
 
        // 修改父元素中的 ID
        const parentElement = document.querySelector(".video-content");
        if (parentElement) {
          const targetChild = parentElement.querySelector("#player_box1");
          if (targetChild) {
            targetChild.id = videoContainerId; // 修改 ID
            console.log(`成功修改 video 的 ID 为: ${videoContainerId}`);
          } else {
            console.warn("未找到 ID 为 'player_box1' 的子节点");
          }
        } else {
          console.warn("未找到父元素 .video-content");
        }
      } catch (error) {
        console.error("设置 video URL 时出错:", error);
      }
    } else {
      console.error("videoRef 未挂载");
    }
  });
});
</script>
<style>
.video-content {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>