lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：视频列表更换播放方式

Browse Source
This commit is contained in:
zjc
2025-02-21 13:40:03 +08:00
parent d547312c74
commit 23fbbcdb78
8 changed files with 3894 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/VideoDialog/index.vue
View File

@@ -1,10 +1,12 @@
<template>
<div class="dialog">
<el-dialog v-model="modelValue" align-center :modal="false" :show-close="false" z-index="9999">
<div v-if="src">
<video class="video" ref="videoRef" muted autoplay controls style="object-fit: cover">
<el-dialog v-model="modelValue" align-center :modal="false" :show-close="false" :z-index="9999">
<div v-if="src" class="dialog-box">
<!-- <video class="video" ref="videoRef" muted autoplay controls style="object-fit: cover">
<source src="" type="application/x-mpegURL" />
</video>
</video> -->
<video class="video" id="bigVideo" muted autoplay controls style="object-fit: cover" />
<div class="action-box">
<!-- <div class="action-item">
<img src="@/assets/images/plus.png" alt="" />
@@ -32,7 +34,6 @@
</div>
<p v-else class="none">暂无信号</p>
<img class="close" src="@/assets/images/close.png" @click="handleClose" />
<div></div>
</el-dialog>
</div>
</template>
@@ -42,6 +43,7 @@
import { ElMessage } from 'element-plus'
import { postVideoControlApi } from '@/api/monitor'
import { mode, baseUrl, proBaseUrl } from '@/utils/config'
const Z00M_IN = 'ZOOM_IN' // 焦距变大
const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
@@ -65,6 +67,7 @@
let modelValue = defineModel()
let videoRef = ref()
let webRtcServer = null
watch(
() => modelValue.value,
@@ -97,19 +100,22 @@
})
}
const handleClose = () => {
webRtcServer.disconnect()
modelValue.value = false
}
const init = () => {
const hls = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限
maxBufferSize: 15 * 1000 * 1000 // 最大缓冲大小（字节）
})
hls.loadSource(props.src)
hls.attachMedia(videoRef.value)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
videoRef.value.play()
})
webRtcServer = new WebRtcStreamer('bigVideo', `${mode == 'dev' ? baseUrl : proBaseUrl}/webrtc`)
webRtcServer.connect(props.src)
// const hls = new Hls({
// maxBufferLength: 10, // 最大缓冲长度（秒）
// maxMaxBufferLength: 15, // 缓冲区长度的上限
// maxBufferSize: 15 * 1000 * 1000 // 最大缓冲大小（字节）
// })
// hls.loadSource(props.src)
// hls.attachMedia(videoRef.value)
// hls.on(Hls.Events.MANIFEST_PARSED, () => {
// videoRef.value.play()
// })
}
</script>
@@ -158,23 +164,26 @@
}
:deep(.el-dialog) {
position: relative;
width: vw(1660);
width: vw(1940);
background: transparent !important;
}
.dialog-box {
padding: vw(40) vw(30) vw(30) vw(30);
background-image: url('@/assets/images/one-video-bg.png');
background-image: url('@/assets/images/video-bg.png');
background-size: 100% 100%;
}
:deep(.el-dialog__header) {
padding-bottom: 0 !important;
}
.video {
width: vw(1600);
height: vw(900);
width: vw(1814);
height: vw(790);
}
.close {
cursor: pointer;
position: absolute;
right: vw(40);
top: vw(50);
right: vw(70);
top: vw(80);
width: vw(60);
z-index: 9999;
}