视频监控设置四宫格九宫格静态视频

本文链接：https://blog.csdn.net/weixin_43312391/article/details/131183727

文章描述了一个Vue组件用于视频监控的实现，包括在global.config.js中设置公共静态视频源，使用v-for指令在模板中创建四宫格、九宫格和十六宫格的视频布局，data中存储不同数量的视频列表，并在方法中初始化videojs播放器，同时在组件销毁时清理播放器资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在global.config.js文件中，设置公共静态视频

staticVideoSrc: num => {
		return Array(num)
			.fill()
			.map((el, index) => {
				return {
					name: '视频' + Number(index + 1),
					url: 'http://xxxx.mp4',
				};
			});
	}, // 静态视频

2.在视频监控的vue文件中，template 中

<div class="monitor-video">
			<!-- 四宫格 -->
			<div v-show="videoFourShow" class="video-body-four" v-for="(item, index) in videoList" :key="index">
				<myVideo :item="item" />
			</div>

			<!-- 九宫格 -->
			<div v-show="videoNineShow" class="video-body-nine" v-for="(item, index) in videoNineList" :key="index">
				<video :id="`myVideo${index}`" :src="item.url" width="398px" height="200px" margin-right="20px" loop controls muted autoplay></video>
			</div>

			<!-- 十六宫格 -->
			<div v-show="videoSixteenShow" class="video-body-sixteen" v-for="(item, index) in videoSixteenList" :key="index">
				<video :id="`myVideo${index}`" :src="item.url" width="290px" height="140px" margin-right="20px" loop controls muted autoplay></video>
			</div>
		</div>

3.在视频监控的vue文件中，data中

videoList: [],
			videoNineList: g_config.staticVideoSrc(9),
			videoSixteenList: g_config.staticVideoSrc(16),
			curIndex: 0,

4.在视频监控的vue文件中，method中

initVideo(item) {
			this.$nextTick(() => {
				// eslint-disable-next-line no-undef
				this.myPlayer = videojs('myVideo' + item.id, {
					controls: true,
					autoplay: false,
					preload: 'auto',
					width: '600px',
					height: '320px',
				});
			});
		},

5.在视频监控的vue文件中，beforeDestroy中

beforeDestroy() {
		this.myPlayer && this.myPlayer.dispose();
	},