canvas在el-carousel轮播图组件，播放websocket视频源播放不出来，单独放在模板中就能播放，求解惑！
<template>
<!-- <div :class="[b(), className]" ref="main1" @click="handleClick">111
<div ref="main">
<canvas id="videoCanvas"></canvas>
</div>
</div> -->
<div :class="[b(),className]"
:style="styleSizeName"
ref="main1">
{{ rtspUrl }}
<el-carousel :style="styleChartName"
:type="type"
:indicator-position="indicator"
:interval="interval"
:height="height">
<el-carousel-item v-for="(item,index) in dataChart"
:key="index"
@click="handleClick(item,index)">
<div v-if="typeList.img.test(item.value)">
<img
:src="item.value"
draggable="false"
:style="styleName" />
</div>
<video muted
v-bind="params"
v-else-if="typeList.video.test(item.value)"
:src="item.value"
:style="styleName">
</video>
<avue-echart-clapper v-else-if="item.type=='hls'"
:width="width"
:height="height"
:key="index"
:data="{value:item.value}"
:option="hlsOption"></avue-echart-clapper>
<avue-echart-iframe v-else-if="item.type=='iframe'"
:width="width"
:height="height"
:data="{value:item.value}"></avue-echart-iframe>
<div v-else ref="main">
<canvas id="videoCanvas"></canvas>
</div>
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
import create from "../../create";
export default create({
name: "swiper",
data() {
return {
player: null, // 用于存储 JSMpeg Player 实例
rtspUrl:"",
typeList: {
img: /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)/,
video: /\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|ogg|mp4)/
}
};
},
computed: {
hlsOption () {
return {
autoplay: this.option.autoplay
}
},
params () {
let result = {}
if (this.option.controls) result.controls = "controls"
if (this.option.loop) result.loop = "loop"
if (this.option.autoplay) result.autoplay = "autoplay"
return result
},
styleName () {
return {
width: '100%',
height: '100%',
opacity: this.opacity
};
},
indicator () {
return this.opacity.indicator || "none";
},
opacity () {
return (this.option.opacity || 100) * 0.01;
},
type () {
return this.option.type || "";
},
interval () {
return this.option.interval || 5000;
}
},
created() {
},
mounted() {
this.$nextTick(() => {
this.dataChart.forEach(obj => {
this.rtspUrl=obj.value
console.log(this.rtspUrl,'cc11')
});
this.player = new window.JSMpeg.Player(this.rtspUrl, {
canvas: this.$refs.main.querySelector('#videoCanvas')
});
this.updateCanvasSize();
window.addEventListener('resize', this.updateCanvasSize);
});
},
beforeDestroy() {
if (this.player) {
this.player.destroy(); // 在组件销毁前销毁播放器实例，避免内存泄漏
}
window.removeEventListener('resize', this.updateCanvasSize);
},
methods: {
handleClick() {
},
updateCanvasSize() {
const parentElement = this.$refs.main;
const width = parentElement.clientWidth;
const height = parentElement.clientHeight;
const canvas = this.$refs.main.querySelector('#videoCanvas');
canvas.width = width;
canvas.height = height;
if (this.player) {
this.player.resize(); // 如果 JSMpeg Player 有 resize 方法，可以调用它来更新画布大小
}
}
},
props: {
option: {
type: Object,
default: () => {
return {};
}
},
className: {
type: String,
default: ''
},
styleSizeName: {
type: Object,
default: () => {
return {};
}
},
dataChart: {
type: Object,
default: () => {
return {};
}
}
}
});
</script>
<style scoped>
/* 根据需要添加样式 */
#videoCanvas {
width: 100%;
height: 100%;
}
</style>
轮播数组
[
{
"value": "https://img.alicdn.com/tfs/TB1v28TC8v0gK0jSZKbXXbK2FXa-1880-640.jpg"
},
{
"value": "ws://11.54.90.239:8888/"
}
]
