EasyPlayerPro播放本地MP4视频

加载本地mp4需指定协议http://localhost:5100/（如 http:、https:、webrtc:、ws: 等）来正确处理媒体流。

目录结构

├── public/

│ ├──static

│ │ ├── video.mp4

├── components/

│ ├── EasyWebRTC.vue

├── views/

│ ├── test/

│ │ ├── index.vue

组件封装

javascript"><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}`;};// 转换 URLconst resolvedUrl = resolveUrl(url);console.log(`解析后的 URL: ${resolvedUrl}`);if (!resolvedUrl) {console.error('URL 不能为空');return;}// 动态设置 demuxTypelet 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>

应用：

javascript"><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(() => {// 配置 baseVideoRefif (baseVideoRef.value) {const baseVideoUrl = "/video.mp4"; // 替换为实际的视频文件路径const baseContainerId = "baseVideo";try {baseVideoRef.value.setVideoUrl(baseVideoUrl, baseContainerId, baseContainerId);console.log("baseVideoRef:", baseVideoRef.value);// 修改 DOM 元素 IDconst targetChild = baseVideoRef.value.$el?.firstElementChild;if (targetChild) {targetChild.id = baseContainerId; // 修改 IDconsole.log(`成功修改 baseVideo 的 ID 为: ${baseContainerId}`);} else {console.warn("未找到 baseVideoRef 的子节点");}} catch (error) {console.error("设置 baseVideo URL 时出错:", error);}} else {console.error("baseVideoRef 未挂载");}// 配置 videoRefif (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);// 修改父元素中的 IDconst parentElement = document.querySelector(".video-content");if (parentElement) {const targetChild = parentElement.querySelector("#player_box1");if (targetChild) {targetChild.id = videoContainerId; // 修改 IDconsole.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>

效果：