From a7e6761ba0cfccdf33ed552eb2d3b783c8e4ab4a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:49:12 +0800
Subject: [PATCH] feat:事件弹窗显示调整
---
src/components/LiveVideo.vue | 18 ++++++++++++++----
1 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/src/components/LiveVideo.vue b/src/components/LiveVideo.vue
index 69031ef..be0c852 100644
--- a/src/components/LiveVideo.vue
+++ b/src/components/LiveVideo.vue
@@ -1,7 +1,7 @@
<!--视频直播-->
<template>
<div class="live-video" ref="JessibucaContainer">
- <video ref="liveVideoRef" controls autoplay muted playsinline>
+ <video ref="liveVideoRef" class="video-player" controls autoplay muted playsinline>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
@@ -20,6 +20,7 @@
let liveVideoRef = ref(null);
const play = (url) => {
+ pause();
webrtcPlayer = new window.ZLMRTCClient.Endpoint({
element: liveVideoRef.value, // video 标签
debug: true, // 是否打印日志
@@ -73,6 +74,7 @@
)
};
+// 销毁
const pause = () => {
if (webrtcPlayer) {
webrtcPlayer.close();
@@ -84,7 +86,6 @@
(newValue) => {
if (!newValue) return;
nextTick(() => {
- pause();
play(newValue);
});
},
@@ -92,6 +93,10 @@
immediate: true
}
);
+
+onBeforeUnmount(() => {
+ pause()
+})
onMounted(() => {
if (props.videoUrl) {
@@ -102,10 +107,15 @@
});
</script>
-<style scoped>
+<style lang="scss" scoped>
.live-video{
width: 100%;
height: 100%;
color: #fff;
+ .video-player {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3