EasyPlayerPro的同一个组件实例根据url不同展示视频流

效果

学习

url的组成

webrtc://192.168.1.225:8101/index/api/webrtc?app=live&stream=001&type=play

协议部分

1. webrtc://: 这表示使用 WebRTC 协议来进行实时通信。WebRTC 允许浏览器之间直接交换音频、视频和其他数据，而不需要通过中间服务器

主机和端口部分

1. 192.168.1.225: 这是 WebRTC 服务器的 IP 地址。在这个例子中，服务器位于局域网内的 192.168.1.225。
2. 8101: 这是 WebRTC 服务器监听的端口号。客户端通过这个端口与服务器进行通信。

路径部分

1. /index/api/webrtc: 这是访问 WebRTC 服务的具体路径。不同的路径可能会指向不同的 API 或服务端点。

查询参数部分

1. app=live: 这个参数指定了应用程序的名称或类别。在这个例子中，app=live 表示这是一个直播应用。
2. stream=001: 这个参数指定了具体的流媒体标识符。stream=001 表示这是 ID 为 001 的流媒体。
3. type=play: 这个参数指定了操作类型。type=play 表示客户端希望播放这个流媒体

代码

<template><div class="video"><button @click="changeUrl">改变url</button><EasyWebRTC ref="videoRef"></EasyWebRTC></div>
</template><script setup>
import { onMounted, nextTick, ref } from "vue";
import EasyWebRTC from "../components/EasyWebRTC.vue";
const videoRef = ref(null)
const containerClass = "player-box";
const changeId = "player_box1";
onMounted(async () => {await nextTick();if (videoRef.value) {const parentEle = document.getElementsByClassName("video");if (parentEle && parentEle[0]) {console.log(parentEle[0], 'parentEle');// 使用类名来查找播放器容器const targetChild = parentEle[0].querySelector(`.easy-player-container .${containerClass}`);if (targetChild) {console.log('找到播放器容器->', targetChild);videoRef.value.setVideoUrl('webrtc://192.168.1.225:8101/index/api/webrtc?app=live&stream=001&type=play', changeId, changeId);} else {console.warn('未找到播放器容器');}} else {console.warn('未找到父元素');}}
})
const changeUrl = () => {videoRef.value.setVideoUrl('http://127.0.0.1:8081/live/liveStream.flv', changeId, changeId);
}</script><style>
.video {width: 100px;height: 100px;margin-left: 100px;
}
</style>

<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: {}, // 存储播放器实例playerUrls: {}, // 存储播放器实例的当前 URLconfig: {hasAudio: true,isLive: true,MSE: false,WCS: false,...this.initialConfig,},};},beforeUnmount () {this.destroyAllPlayers();},methods: {// 设置视频 URL，如果播放器不存在则创建新播放器setVideoUrl (url, id, changeId) {this.player = changeId;console.log(`设置视频->`, url, id, changeId);const player = this.playerInstances[id];if (player) {// 检查 URL 是否发生变化if (this.playerUrls[id] !== url) {// 暂停当前播放player.pause();// 更新播放器 URLplayer.play(url).then(() => {this.playerUrls[id] = url; // 更新 URL 映射表console.log(`URL 更新成功 (播放器${id}):`, url);}).catch(e => {console.error(`更新 URL 失败 (播放器${id}):`, e);this.$emit('play-error', e);});} else {console.log(`URL 未发生变化 (播放器${id}):`, url);}} else {this.createPlayer(id, url);}},// 创建单个播放器实例createPlayer (id, url) {if (this.playerInstances[id]) {console.log(`播放器 ${id} 已存在，不重复创建`);return;}this.$nextTick(() => {const container = document.getElementById(`${this.player}`)console.log(`创建播放器 ${id} ->`, container);if (!container || !(container instanceof Element)) {console.error(`未找到有效容器，ID: ${id}`);return;}const player = new EasyPlayerPro(container, {src: url,isLive: this.config.isLive,// 是否直播bufferTime: 0.2,// 缓冲时间stretch: false, // 是否拉伸MSE: this.config.MSE,// 是否使用MSEWCS: this.config.WCS,// 是否使用WCShasAudio: true,// 是否有音频// hasVideo: true,// 是否有视频// hasSubtitle: true,// 是否有字幕watermark: {// 水印text: { content: 'easyplayer-pro' },right: 10,top: 10,},});player.play(url).then(() => {this.$emit('play-started', id);}).catch((e) => {console.error(`播放失败 (播放器${id}):`, e);this.$emit('play-error', e);});// 添加事件监听player.on("fullscreen", (flag) => {this.$emit('fullscreen-change', flag);});player.on('playbackRate', (rate) => {player.setRate(rate);this.$emit('rate-change', rate);});player.on('playbackSeek', (data) => {this.$emit('seek', data);});this.playerInstances[id] = player;});},// 销毁所有播放器实例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];}}},
};
</script><style scoped>
.easy-player-container {width: 100%;background: #000;height: 100%;position: relative;
}.player-box {background: #000;
}
</style>