vue3 视频监控分屏

对于Vue 3的视频监控分屏，你可以使用Vue的组件化和响应式特性来实现。下面是一个简单的示例代码：
<template>
<div>
<div class="screen" v-for="camera in cameras" :key="camera.id">
<video :src="camera.url" :id="camera.id" :ref="camera.id" @loadedmetadata="onVideoLoaded"></video>
</div>
</div>
</template>

<script>
export default {
data() {
return {
cameras: [
{ id: 1, url: 'path_to_video1' },
{ id: 2, url: 'path_to_video2' },
// 添加更多的摄像头...
],
};
},
methods: {
onVideoLoaded(event) {
const video = event.target;
// 在这里可以根据需要对视频进行操作，例如调整分辨率、添加控制按钮等
},
},
};
</script>

<style scoped>
.screen {
width: 50%; // 设置每个分屏的宽度
float: left; // 让分屏水平排列
}
</style>
登录后复制
在上面的示例中，我们使用v-for指令遍历cameras数组，为每个摄像头创建一个分屏。通过v-bind指令绑定视频的src属性和id属性。在@loadedmetadata事件中可以监听视频的元数据加载完成事件，然后对视频进行一些初始化操作。
你可以根据实际需求修改示例代码，例如调整分屏布局样式、增加摄像头等。希望对你有帮助！