From 532d97bb3f668256841eeb0ae235f241339475a7 Mon Sep 17 00:00:00 2001
From: Rain_ <904416525@qq.com>
Date: Mon, 29 Dec 2025 11:50:57 +0800
Subject: [PATCH] =?UTF-8?q?flx:=E6=96=B0=E5=A2=9E=E4=BD=9C=E4=B8=9A?=
 =?UTF-8?q?=E8=BF=87=E7=A8=8B=E7=AE=A1=E7=90=86=E7=9B=91=E6=8E=A7=E5=85=A8?=
 =?UTF-8?q?=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/iscPlayer.vue                  | 1329 +++++++++--------
 1 file changed, 691 insertions(+), 638 deletions(-)

diff --git a/src/views/sevenLargeScreen/homeworkControlProcess/components/iscPlayer.vue b/src/views/sevenLargeScreen/homeworkControlProcess/components/iscPlayer.vue
index 1c09e7b..513577e 100644
--- a/src/views/sevenLargeScreen/homeworkControlProcess/components/iscPlayer.vue
+++ b/src/views/sevenLargeScreen/homeworkControlProcess/components/iscPlayer.vue
@@ -1,40 +1,63 @@
 <template>
-	<div id="player-main" :id="'player-main'">
-		<div class="player" :id="'player-' + props.playerId"></div>
-		<!-- 为每个窗口添加控制按钮容器 -->
-		<div class="video-controls" v-for="i in videoInfo.maxWindows" :key="i" :id="'controls-' + i" :style="{ display: 'none' }">
-			<div class="controls-top">
-				<div class="top-left">{{ videoNameUp(i - 1) }}</div>
-				<div @click="stopPlay(i)" class="top-close">
-					关闭
-					<el-icon><Close /></el-icon>
-				</div>
-			</div>
-			<div class="controls-bottom">
-				<div></div>
-				<div>
-					<el-tooltip class="item" effect="dark" :content="`${videoInfo.recordingBegin ? '结束' : '开始'}录制`" placement="top">
-						<div class="bgImage transcribe" @click="isTranscribe(i)"></div>
-					</el-tooltip>
-					<el-tooltip class="item" effect="dark" :content="`抓图`" placement="top">
-						<div class="bgImage screenshot" @click="capture('JPEG', i)"></div>
-					</el-tooltip>
-
-					<!-- <div>流畅</div> -->
-					<el-tooltip class="item" effect="dark" :content="`${videoInfo.muted ? '关闭' : '开启'}音量`" placement="top">
-						<div @click="handleVolume(i)" :class="videoInfo.muted ? 'openVolume' : 'disableVolume'" class="bgImage"></div>
-					</el-tooltip>
-					<el-tooltip class="item" effect="dark" :content="`${videoInfo.isFullScreen ? '退出' : '进入'}全屏模式`" placement="top">
-						<div
-							class="bgImage"
-							:class="videoInfo.isFullScreen ? 'exitFullScreen' : 'fullScreen'"
-							@click="singleFullScreen(i)"
-						></div>
-					</el-tooltip>
-				</div>
-			</div>
-		</div>
-		<!-- <div class="player-tool">
+  <div id="player-main" :id="'player-main'">
+    <div class="player" :id="'player-' + props.playerId"></div>
+    <!-- 为每个窗口添加控制按钮容器 -->
+    <div
+      class="video-controls"
+      v-for="i in videoInfo.maxWindows"
+      :key="i"
+      :id="'controls-' + props.playerId + i"
+      :style="{ display: 'none' }"
+    >
+      <div class="controls-top">
+        <div class="top-left">{{ videoNameUp(i - 1) }}</div>
+        <!-- <div @click="stopPlay(i)" class="top-close">
+          关闭
+          <i class="el-icon-circle-close"></i>
+        </div> -->
+      </div>
+      <div class="controls-bottom">
+        <div></div>
+        <div>
+          <!-- <el-tooltip
+            class="item"
+            effect="dark"
+            :content="`${videoInfo.recordingBegin ? '结束' : '开始'}录制`"
+            placement="top"
+          >
+            <div class="bgImage transcribe" @click="isTranscribe(i)"></div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="`抓图`" placement="top">
+            <div class="bgImage screenshot" @click="capture('JPEG', i)"></div>
+          </el-tooltip> -->
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="`${videoInfo.muted ? '关闭' : '开启'}音量`"
+            placement="top"
+          >
+            <div
+              @click="handleVolume(i)"
+              :class="videoInfo.muted ? 'openVolume' : 'disableVolume'"
+              class="bgImage"
+            ></div>
+          </el-tooltip>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="`${videoInfo.isFullScreen ? '退出' : '进入'}全屏模式`"
+            placement="top"
+          >
+            <div
+              class="bgImage"
+              :class="videoInfo.isFullScreen ? 'exitFullScreen' : 'fullScreen'"
+              @click="singleFullScreen(i)"
+            ></div>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="player-tool">
 			<el-tooltip class="item" effect="dark" :content="`默认`" placement="top">
 				<div class="bgImage splitscreen1" @click="onTwoSubmit(1)"></div>
 			</el-tooltip>
@@ -51,7 +74,7 @@
 				<div class="bgImage" :class="videoInfo.isFullScreen ? 'exitFullScreen' : 'fullScreen'" @click="wholeFullScreen(i)"></div>
 			</el-tooltip>
 		</div> -->
-	</div>
+  </div>
 </template>
 
 <script setup>
@@ -67,551 +90,581 @@ import loadingGif from "@/assets/images/iscImage/loading.gif";
 import errorPng from "@/assets/images/iscImage/text-to-image.png";
 import reloadImg from "@/assets/images/iscImage/reload.png";
 const props = defineProps({
-	devList: {
-		type: Array,
-		default: () => []
-	},
-	playerId: {
-		type: String,
-		default: () => "player-" + Math.random().toString(36).substr(2, 9)
-	}
+  devList: {
+    type: Array,
+    default: () => [],
+  },
+  playerId: {
+    type: String,
+    default: () => "player-" + Math.random().toString(36).substr(2, 9),
+  },
 });
 const emit = defineEmits(["selectPlayVideo"]);
 const videoInfo = reactive({
-	// 监控点编码
-	code: "",
-	// 播放器对象
-	player: null,
-	devH5List: [],
-	numCount: 1,
-	iWndIndex: 0,
-	maxWindows: 16, // 最大窗口数
-	recordingBegin: false,
-	muted: true,
-	playback: {
-		startTime: "2023-08-16T00:00:00",
-		endTime: "2023-08-16T23:00:00",
-		valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
-		seekStart: "2023-08-16T10:00:00",
-		rate: ""
-	},
-	isFullScreen: false,
-	isFullScreenAll: false,
-	randomNumber: "",
-	player: null,
-	// 每个实例独立的状态
-	instanceStates: {}
+  // 监控点编码
+  code: "",
+  // 播放器对象
+  player: null,
+  devH5List: [],
+  numCount: 1,
+  iWndIndex: 0,
+  maxWindows: 16, // 最大窗口数
+  recordingBegin: false,
+  muted: true,
+  playback: {
+    startTime: "2023-08-16T00:00:00",
+    endTime: "2023-08-16T23:00:00",
+    valueFormat: moment.HTML5_FMT.DATETIME_LOCAL_SECONDS,
+    seekStart: "2023-08-16T10:00:00",
+    rate: "",
+  },
+  isFullScreen: false,
+  isFullScreenAll: false,
+  randomNumber: "",
+  player: null,
+  // 每个实例独立的状态
+  instanceStates: {},
 });
 // 关闭所有视频
 const stopAllPlay = () => {
-	videoInfo.player.JS_StopRealPlayAll().then(
-		() => {
-			videoInfo.playback.rate = 0;
-			console.log("stopAllPlay success");
-			videoInfo.devH5List.forEach((item, index) => {
-				const wnd = document.querySelector(`#player-${props.playerId} #player-container-${index}`);
-				if (wnd) {
-					const controls = document.getElementById(`controls-${index + 1}`);
-					if (controls) {
-						controls.classList.remove("video-controls_flex");
-					}
-				}
-			});
-			videoInfo.devH5List = [];
-		},
-		e => {
-			console.error(e);
-		}
-	);
+  videoInfo.player.JS_StopRealPlayAll().then(
+    () => {
+      videoInfo.playback.rate = 0;
+      console.log("stopAllPlay success");
+      videoInfo.devH5List.forEach((item, index) => {
+        const wnd = document.querySelector(
+          `#player-${props.playerId} #player-container-${index}`
+        );
+        if (wnd) {
+          const controls = document.getElementById(`controls-${props.playerId}${index + 1}`);
+          if (controls) {
+            controls.classList.remove("video-controls_flex");
+          }
+        }
+      });
+      videoInfo.devH5List = [];
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
 //  关闭单个
 const stopPlay = (currentWindowIndex, type) => {
-	videoInfo.player.JS_Stop(currentWindowIndex - 1).then(
-		() => {
-			videoInfo.playback.rate = 0;
-			console.log("stop realplay success");
-			const wnd = document.querySelector(`#player-${props.playerId} #player-container-${currentWindowIndex - 1}`);
-			if (wnd) {
-				const controls = document.getElementById(`controls-${currentWindowIndex}`);
-				if (controls) {
-					controls.classList.remove("video-controls_flex");
-				}
-				if (type == "delete") return;
-				// videoInfo.devH5List.splice(currentWindowIndex - 1, 1);
-			}
-		},
-		e => {
-			console.error(e);
-		}
-	);
+  videoInfo.player.JS_Stop(currentWindowIndex - 1).then(
+    () => {
+      videoInfo.playback.rate = 0;
+      console.log("stop realplay success");
+      const wnd = document.querySelector(
+        `#player-${props.playerId} #player-container-${currentWindowIndex - 1}`
+      );
+      if (wnd) {
+        const controls = document.getElementById(`controls-${props.playerId}${currentWindowIndex}`);
+        if (controls) {
+          controls.classList.remove("video-controls_flex");
+        }
+        if (type == "delete") return;
+        // videoInfo.devH5List.splice(currentWindowIndex - 1, 1);
+      }
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
-const handleVolume = currentWindowIndex => {
-	if (videoInfo.muted) {
-		openSound(currentWindowIndex);
-	} else {
-		closeSound(currentWindowIndex);
-	}
+const handleVolume = (currentWindowIndex) => {
+  if (videoInfo.muted) {
+    openSound(currentWindowIndex);
+  } else {
+    closeSound(currentWindowIndex);
+  }
 };
 /* 声音、抓图、录像 */
-const openSound = currentWindowIndex => {
-	videoInfo.player.JS_OpenSound(currentWindowIndex - 1).then(
-		() => {
-			console.log("openSound success");
-			videoInfo.muted = false;
-		},
-		e => {
-			console.error(e);
-		}
-	);
+const openSound = (currentWindowIndex) => {
+  videoInfo.player.JS_OpenSound(currentWindowIndex - 1).then(
+    () => {
+      console.log("openSound success");
+      videoInfo.muted = false;
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
-const closeSound = currentWindowIndex => {
-	videoInfo.player.JS_CloseSound(currentWindowIndex - 1).then(
-		() => {
-			console.log("closeSound success");
-			videoInfo.muted = true;
-		},
-		e => {
-			console.error(e);
-		}
-	);
+const closeSound = (currentWindowIndex) => {
+  videoInfo.player.JS_CloseSound(currentWindowIndex - 1).then(
+    () => {
+      console.log("closeSound success");
+      videoInfo.muted = true;
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
 // 单个窗口全屏
-const singleFullScreen = currentWindowIndex => {
-	if (videoInfo.isFullScreenAll) {
-		videoInfo.wholeFullScreen();
-		return;
-	}
-	videoInfo.player.JS_FullScreenSingle(currentWindowIndex - 1).then(
-		() => {
-			console.log(`singleFullScreen success`);
-		},
-		e => {
-			console.error(e);
-		}
-	);
+const singleFullScreen = (currentWindowIndex) => {
+  if (videoInfo.isFullScreenAll) {
+    wholeFullScreen();
+    return;
+  }
+  videoInfo.player.JS_FullScreenSingle(currentWindowIndex - 1).then(
+    () => {
+      console.log(`singleFullScreen success`);
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
 // 整体窗口全屏
 const wholeFullScreen = () => {
-	videoInfo.player.JS_FullScreenDisplay(videoInfo.isFullScreenAll).then(
-		() => {
-			console.log(`wholeFullScreen success`);
-			videoInfo.isFullScreenAll = !videoInfo.isFullScreenAll;
-		},
-		e => {
-			console.error(e);
-		}
-	);
+  videoInfo.player.JS_FullScreenDisplay(videoInfo.isFullScreenAll).then(
+    () => {
+      console.log(`wholeFullScreen success`);
+      videoInfo.isFullScreenAll = !videoInfo.isFullScreenAll;
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
-const isTranscribe = currentWindowIndex => {
-	if (videoInfo.recordingBegin) {
-		recordStop(currentWindowIndex);
-	} else {
-		recordStart("MP4", currentWindowIndex);
-	}
+const isTranscribe = (currentWindowIndex) => {
+  if (videoInfo.recordingBegin) {
+    recordStop(currentWindowIndex);
+  } else {
+    recordStart("MP4", currentWindowIndex);
+  }
 };
 // 开始录制
 const recordStart = (type, currentWindowIndex) => {
-	const codeMap = { MP4: 5, PS: 2 };
-	//let options = {irecordType: 2, cbStreamCB: streamcb}
-	let player = videoInfo.player,
-		index = currentWindowIndex - 1,
-		fileName = `${moment().format("YYYYMMDDHHmmss")}.mp4`,
-		typeCode = codeMap[type];
+  const codeMap = { MP4: 5, PS: 2 };
+  //let options = {irecordType: 2, cbStreamCB: streamcb}
+  let player = videoInfo.player,
+    index = currentWindowIndex - 1,
+    fileName = `${moment().format("YYYYMMDDHHmmss")}.mp4`,
+    typeCode = codeMap[type];
 
-	player
-		.JS_StartSaveEx(index, fileName, typeCode, {
-			irecordType: 1,
-			cbStreamCB: videoInfo.streamcb
-		})
-		.then(
-			() => {
-				ElMessage.success("开始录制");
-				videoInfo.recordingBegin = true;
-				console.log("record start ...");
-			},
-			e => {
-				console.error(e);
-			}
-		);
+  player
+    .JS_StartSaveEx(index, fileName, typeCode, {
+      irecordType: 1,
+      cbStreamCB: videoInfo.streamcb,
+    })
+    .then(
+      () => {
+        ElMessage.success("开始录制");
+        videoInfo.recordingBegin = true;
+        console.log("record start ...");
+      },
+      (e) => {
+        console.error(e);
+      }
+    );
 };
 // 结束录制
-const recordStop = currentWindowIndex => {
-	let player = videoInfo.player,
-		index = currentWindowIndex - 1;
+const recordStop = (currentWindowIndex) => {
+  let player = videoInfo.player,
+    index = currentWindowIndex - 1;
 
-	player.JS_StopSave(index).then(
-		res => {
-			console.log("record stoped, saving ...", res);
-			videoInfo.recordingBegin = false;
-		},
-		e => {
-			console.error(e);
-		}
-	);
+  player.JS_StopSave(index).then(
+    (res) => {
+      console.log("record stoped, saving ...", res);
+      videoInfo.recordingBegin = false;
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
 // 抓图
 const capture = (imageType, currentWindowIndex) => {
-	let player = videoInfo.player,
-		index = currentWindowIndex - 1;
+  let player = videoInfo.player,
+    index = currentWindowIndex - 1;
 
-	player.JS_CapturePicture(index, "img", imageType).then(
-		() => {
-			console.log("capture success", imageType);
-		},
-		e => {
-			console.error(e);
-		}
-	);
+  player.JS_CapturePicture(index, "img", imageType).then(
+    () => {
+      console.log("capture success", imageType);
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
 /**
  * 初始化播放器
  */
 const initPlayer = () => {
-	videoInfo.player = new JSPlugin({
-		// 需要英文字母开头 必填
-		szId: "player-" + props.playerId, // 使用唯一ID
-		// 必填,引用H5player.min.js的js相对路径
-		szBasePath: "/public/bin",
+  videoInfo.player = new JSPlugin({
+    // 需要英文字母开头 必填
+    szId: "player-" + props.playerId, // 使用唯一ID
+    // 必填,引用H5player.min.js的js相对路径
+    szBasePath: "/public/bin",
 
-		iMaxSplit: 4,
-		openDebug: true,
-		mseWorkerEnable: false, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
-		bSupporDoubleClickFull: true, //是否支持双击全屏，true-双击是全屏；false-双击无响应
+    iMaxSplit: 4,
+    openDebug: true,
+    mseWorkerEnable: false, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
+    bSupporDoubleClickFull: true, //是否支持双击全屏，true-双击是全屏；false-双击无响应
 
-		// 分屏播放，默认最大分屏4*4
-		// iMaxSplit: 16,
-		iCurrentSplit: 1,
+    // 分屏播放，默认最大分屏4*4
+    // iMaxSplit: 16,
+    iCurrentSplit: 1,
 
-		// 样式
-		oStyle: {
-			border: "#343434",
-			borderSelect: "#FFCC00",
-			background: "#000"
-		}
-	});
-	// 事件回调绑定
-	videoInfo.player.JS_SetWindowControlCallback({
-		windowEventSelect: function (iWndIndex) {
-			//插件选中窗口回调
-			console.log("windowSelect callback: ", iWndIndex);
-			videoInfo.iWndIndex = iWndIndex;
-			videoInfo.randomNumber = "id" + Math.random().toString(36).substr(2, 9);
-		},
-		pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
-			//插件错误回调
-			console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
-		},
-		windowEventOver: function (iWndIndex) {
-			//鼠标移过回调
-			console.log(iWndIndex);
-			// 使用选中事件来定位控制按钮
-			const wnd = document.querySelector(`#player-${props.playerId} #player-container-${iWndIndex}`);
-			console.log(1111222, wnd);
-			if (wnd) {
-				const controls = document.getElementById(`controls-${iWndIndex + 1}`);
-				console.log(controls, wnd);
-				if (controls && !wnd.contains(controls)) {
-					// 确保控制按钮只添加一次
-					if (!wnd.querySelector(".video-controls")) {
-						wnd.appendChild(controls);
-						// controls.style.display = "flex";
-					}
-				}
-				if (controls) {
-					// if (iWndIndex > videoInfo.devH5List.length - 1) return;
-					// controls.classList.add("video-controls_flex");
-					const someFlag = Array.from(wnd.childNodes).some(item => {
-						return item.src;
-					});
-					console.log(11222233, someFlag);
-					const player_playVideo = wnd.querySelector(`#player_playVideo${iWndIndex}`);
-					if (player_playVideo.src || player_playVideo.poster || someFlag) {
-						// controls.classList.add("video-controls_flex");
-					}
-				}
-			}
-		},
-		windowEventOut: function (iWndIndex) {
-			//鼠标移出回调
-			console.log(iWndIndex);
-			const wnd = document.querySelector(`#player-${props.playerId} #player-container-${iWndIndex}`);
-			if (wnd) {
-				const controls = document.getElementById(`controls-${iWndIndex + 1}`);
-				if (controls) {
-					controls.classList.remove("video-controls_flex");
-				}
-			}
-		},
-		windowEventUp: function (iWndIndex) {
-			//鼠标mouseup事件回调
-			//console.log(iWndIndex);
-		},
-		windowFullCcreenChange: function (bFull) {
-			//全屏切换回调
-			console.log("fullScreen callback: ", bFull);
-			videoInfo.isFullScreen = bFull;
-			videoInfo.isFullScreenAll = false;
-		},
-		firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
-			//首帧显示回调
-			console.log("firstFrame loaded callback: ", iWndIndex, iWidth, iHeight);
-		},
-		performanceLack: function (iWndIndex) {
-			//性能不足回调
-			console.log("performanceLack callback: ", iWndIndex);
-		},
-		StreamEnd: function (iWndIndex) {
-			//性能不足回调
-			console.log("recv StreamEnd: ", iWndIndex);
-		},
-		StreamHeadChanged: function (iWndIndex) {
-			console.log("recv StreamHeadChanged: ", iWndIndex);
-		},
-		ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {
-			console.log("recv ThumbnailsEvent: " + iWndIndex + ", eventType:" + eventType + ", eventCode:" + eventCode);
-		},
-		InterruptStream: (iWndIndex, iTime) => {
-			console.log("recv InterruptStream: " + iWndIndex + ", iTime:" + iTime);
-		},
-		ElementChanged: (iWndIndex, szElementType) => {
-			//回调采用的是video还是canvas
-			console.log("recv ElementChanged: " + iWndIndex + ", szElementType:" + szElementType);
-		}
-	});
-	nextTick(() => {
-		if (videoInfo.devH5List.length > 0) {
-			play(videoInfo.devH5List[0], videoInfo.iWndIndex);
-		}
-	});
+    // 样式
+    oStyle: {
+      border: "#343434",
+      borderSelect: "#FFCC00",
+      background: "#000",
+    },
+  });
+  // 事件回调绑定
+  videoInfo.player.JS_SetWindowControlCallback({
+    windowEventSelect: function (iWndIndex) {
+      //插件选中窗口回调
+      console.log("windowSelect callback: ", iWndIndex);
+      videoInfo.iWndIndex = iWndIndex;
+      videoInfo.randomNumber = "id" + Math.random().toString(36).substr(2, 9);
+    },
+    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
+      //插件错误回调
+      console.log("pluginError callback: ", iWndIndex, iErrorCode, oError);
+    },
+    windowEventOver: function (iWndIndex, iEventType, iMouseX, iMouseY) {
+      //鼠标移过回调
+      console.log(iWndIndex, iEventType);
+      // 使用选中事件来定位控制按钮
+      const wnd = document.querySelector(
+        `#player-${props.playerId} #player-container-${iWndIndex}`
+      );
+      console.log(1111222, wnd);
+      if (wnd) {
+        const controls = document.getElementById(
+          `controls-${props.playerId}${iWndIndex + 1}`
+        );
+        console.log(controls, wnd);
+        if (controls && !wnd.contains(controls)) {
+          // 确保控制按钮只添加一次
+          if (!wnd.querySelector(".video-controls")) {
+            wnd.appendChild(controls);
+            // controls.style.display = "flex";
+          }
+        }
+        if (controls) {
+          const player_playVideo = wnd.querySelector(
+            `#player-${props.playerId}_playVideo${iWndIndex}`
+          );
+          const findFlag = Array.from(wnd.childNodes).find((item) => {
+            return item.id && item.id.includes("player_playVideo");
+          });
+          const findImg = Array.from(wnd.childNodes).some((item) => {
+            return item.className == "classImg";
+          });
+          console.log(8848, findFlag, findImg, player_playVideo);
+          if (player_playVideo.src || findImg || findFlag.duration == "Infinity") {
+            controls.classList.add("video-controls_flex");
+          }
+        }
+      }
+    },
+    windowEventOut: function (iWndIndex) {
+      //鼠标移出回调
+      console.log(iWndIndex);
+      const wnd = document.querySelector(
+        `#player-${props.playerId} #player-container-${iWndIndex}`
+      );
+      if (wnd) {
+        const controls = document.getElementById(
+          `controls-${props.playerId}${iWndIndex + 1}`
+        );
+        if (controls) {
+          controls.classList.remove("video-controls_flex");
+        }
+      }
+    },
+    windowFullCcreenChange: function (bFull) {
+      //全屏切换回调
+      console.log("fullScreen callback: ", bFull);
+      videoInfo.isFullScreen = bFull;
+      videoInfo.isFullScreenAll = false;
+    },
+    firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {
+      //首帧显示回调
+      console.log("firstFrame loaded callback: ", iWndIndex, iWidth, iHeight);
+    },
+    performanceLack: function (iWndIndex) {
+      //性能不足回调
+      console.log("performanceLack callback: ", iWndIndex);
+    },
+    StreamEnd: function (iWndIndex) {
+      //性能不足回调
+      console.log("recv StreamEnd: ", iWndIndex);
+    },
+    StreamHeadChanged: function (iWndIndex) {
+      console.log("recv StreamHeadChanged: ", iWndIndex);
+    },
+    ThumbnailsEvent: (iWndIndex, eventType, eventCode) => {
+      console.log(
+        "recv ThumbnailsEvent: " +
+          iWndIndex +
+          ", eventType:" +
+          eventType +
+          ", eventCode:" +
+          eventCode
+      );
+    },
+    InterruptStream: (iWndIndex, iTime) => {
+      console.log("recv InterruptStream: " + iWndIndex + ", iTime:" + iTime);
+    },
+    ElementChanged: (iWndIndex, szElementType) => {
+      //回调采用的是video还是canvas
+      console.log(
+        "recv ElementChanged: " + iWndIndex + ", szElementType:" + szElementType
+      );
+    },
+  });
+  nextTick(() => {
+    if (videoInfo.devH5List.length > 0) {
+      play(videoInfo.devH5List[0], videoInfo.iWndIndex);
+    }
+  });
 };
 /**
  * 获取取流连接
  * @returns {*}
  */
-const getPreviewUrl = row => {
-	let tempCode = row.monitoringNumber;
-	const param = {
-		cameraIndexCode: tempCode,
-		streamType: row.defaultStreamType && row.eIndex < 4 ? row.defaultStreamType : "",
-		// streamType: row.defaultStreamType == 2 ? 0 : row.defaultStreamType,
-		type: window.location.protocol.includes("https") ? "wss" : "ws",
-		transmode: 1,
-		itemId: row.itemId,
-		projectSn: row.projectSn
-	};
-	// 这里
-	return getVideoItemInfoPoliceCameraItemApi(param);
+const getPreviewUrl = (row) => {
+  let tempCode = row.monitoringNumber;
+  const param = {
+    cameraIndexCode: tempCode,
+    streamType: row.defaultStreamType && row.eIndex < 4 ? row.defaultStreamType : "",
+    // streamType: row.defaultStreamType == 2 ? 0 : row.defaultStreamType,
+    type: window.location.protocol.includes("https") ? "wss" : "ws",
+    transmode: 1,
+    itemId: row.itemId,
+    projectSn: row.projectSn,
+  };
+  // 这里
+  return getVideoItemInfoPoliceCameraItemApi(param);
 };
 /**
  * 播放
  */
 const play = (row, index) => {
-	stopPlay(index + 1, "delete");
-	getPreviewUrl({
-		...row
-	}).then(res => {
-		if (res.code !== 200 && !res.result.videoInfo) {
-			ElMessage.warning("获取视频流失败！");
-			return;
-		}
-		// 视频添加加载中图片
-		const id = `#player-${props.playerId} #player-container-${index}`;
-		var d1 = document.querySelector(id); //获取div元素
-		// console.log(88555, d1.childNodes);
-		d1.childNodes.forEach(item => {
-			if (item.nodeName == "" || item.nodeName == "IMG" || item.className == "classImg") {
-				d1.removeChild(item);
-			}
-		});
-		var im = document.createElement("img"); //创建图片
-		im.src = loadingGif;
-		//图片设置成和div一样大小
-		const divHeightNum = d1.style.height.slice(0, d1.style.height.length - 2);
-		// const imgHeightNum = divHeightNum * 0.2
-		const imgHeightNum = 256;
-		im.style.width = imgHeightNum + "px";
-		im.style.height = imgHeightNum + "px";
-		im.style.position = "absolute";
-		im.style.top = "50%";
-		im.style.left = "50%";
-		const positionNum = imgHeightNum / 2 - imgHeightNum;
-		im.style.marginLeft = positionNum + "px";
-		im.style.marginTop = positionNum + "px";
-		d1.appendChild(im); //图片挂载到div上
-		let preUrl = res.result.videoInfo.url;
-		const param = {
-			playURL: preUrl,
-			// 1：高级模式  0：普通模式，高级模式支持所有
-			mode: 0
-		};
-		// 索引默认0
-		if (!index) {
-			index = 0;
-		}
-		const findIndex = Array.from(d1.childNodes).findIndex(item => item.localName == "img");
-		videoInfo.player.JS_Play(preUrl, param, index).then(
-			() => {
-				if (findIndex !== -1) {
-					d1.removeChild(d1.childNodes[findIndex]);
-					console.log("播放成功", findIndex);
-				}
-				// 播放成功回调
-				// d1.removeChild(d1.childNodes[d1.childNodes.length - 1]);
-				// console.log("播放成功");
-			},
-			err => {
-				console.log("播放失败");
-				// im.src = errorPng;
-				// const imgHeightNum = 20;
-				// const imgWidthNum = 150;
-				// im.style.width = imgWidthNum + "px";
-				// im.style.height = imgHeightNum + "px";
-				// const positionNum = imgHeightNum / 2 - imgHeightNum;
-				// const positionWidthNum = imgWidthNum / 2 - imgWidthNum;
-				// im.style.marginLeft = positionWidthNum + "px";
-				// im.style.marginTop = positionNum + "px";
-				if (findIndex !== -1) {
-					d1.removeChild(d1.childNodes[findIndex]);
-					let ndiv = document.createElement("div"); //创建图片
-					const reloadBtn = document.createElement("div");
+  stopPlay(index + 1, "delete");
+  getPreviewUrl({
+    ...row,
+  }).then((res) => {
+    if (res.code !== 200 && !res.result.videoInfo) {
+      ElMessage.warning("获取视频流失败！");
+      return;
+    }
+    // 视频添加加载中图片
+    const id = `#player-${props.playerId} #player-container-${index}`;
+    var d1 = document.querySelector(id); //获取div元素
+    // console.log(88555, d1.childNodes);
+    d1.childNodes.forEach((item) => {
+      if (item.nodeName == "" || item.nodeName == "IMG" || item.className == "classImg") {
+        d1.removeChild(item);
+      }
+    });
+    var im = document.createElement("img"); //创建图片
+    im.src = loadingGif;
+    //图片设置成和div一样大小
+    const divHeightNum = d1.style.height.slice(0, d1.style.height.length - 2);
+    // const imgHeightNum = divHeightNum * 0.2
+    const imgHeightNum = 256;
+    im.style.width = imgHeightNum + "px";
+    im.style.height = imgHeightNum + "px";
+    im.style.position = "absolute";
+    im.style.top = "50%";
+    im.style.left = "50%";
+    const positionNum = imgHeightNum / 2 - imgHeightNum;
+    im.style.marginLeft = positionNum + "px";
+    im.style.marginTop = positionNum + "px";
+    d1.appendChild(im); //图片挂载到div上
+    let preUrl = res.result.videoInfo.url;
+    const param = {
+      playURL: preUrl,
+      // 1：高级模式  0：普通模式，高级模式支持所有
+      mode: 0,
+    };
+    // 索引默认0
+    if (!index) {
+      index = 0;
+    }
+    const findIndex = Array.from(d1.childNodes).findIndex(
+      (item) => item.localName == "img"
+    );
+    videoInfo.player.JS_Play(preUrl, param, index).then(
+      () => {
+        if (findIndex !== -1) {
+          d1.removeChild(d1.childNodes[findIndex]);
+          console.log("播放成功", findIndex);
+        }
+        // 播放成功回调
+        // d1.removeChild(d1.childNodes[d1.childNodes.length - 1]);
+        // console.log("播放成功");
+      },
+      (err) => {
+        console.log("播放失败");
+        // im.src = errorPng;
+        // const imgHeightNum = 20;
+        // const imgWidthNum = 150;
+        // im.style.width = imgWidthNum + "px";
+        // im.style.height = imgHeightNum + "px";
+        // const positionNum = imgHeightNum / 2 - imgHeightNum;
+        // const positionWidthNum = imgWidthNum / 2 - imgWidthNum;
+        // im.style.marginLeft = positionWidthNum + "px";
+        // im.style.marginTop = positionNum + "px";
+        if (findIndex !== -1) {
+          d1.removeChild(d1.childNodes[findIndex]);
+          let ndiv = document.createElement("div"); //创建图片
+          const reloadBtn = document.createElement("div");
 
-					// 创建图片元素
-					const reloadIcon = document.createElement("img");
-					reloadIcon.src = reloadImg; // 替换为你的图片路径
+          // 创建图片元素
+          const reloadIcon = document.createElement("img");
+          reloadIcon.src = reloadImg; // 替换为你的图片路径
 
-					reloadBtn.textContent = "重新加载";
-					reloadBtn.addEventListener("click", (e) => {
-						e.stopPropagation();
-						onReload(row.itemId);
-					});
+          reloadBtn.textContent = "重新加载";
+          reloadBtn.addEventListener("click", (e) => {
+            e.stopPropagation();
+            onReload(row.itemId);
+          });
 
-					// 将图片添加到按钮
- 					 reloadBtn.appendChild(reloadIcon);
+          // 将图片添加到按钮
+          reloadBtn.appendChild(reloadIcon);
 
-					ndiv.innerHTML = `
+          ndiv.innerHTML = `
 						${row.status == 2 ? "工单任务未关闭或现场网络信号弱" : "预览失败，请检查设备网络"}
 					`;
-					ndiv.style.position = "absolute";
-					ndiv.style.top = "50%";
-					ndiv.style.left = "50%";
-					ndiv.style.transform = "translate(-50%, -50%)";
-					ndiv.className = "classImg";
-					ndiv.appendChild(reloadBtn);
-					d1.appendChild(ndiv); //图片挂载到div上
-				}
-			}
-		);
-		videoInfo.player.JS_SetConnectTimeOut(index, 60).then(
-			() => {
-				console.info("JS_SetConnectTimeOut success");
-				// do you want...
-			},
-			err => {
-				console.info("JS_SetConnectTimeOut failed", err);
-				// do you want...
-			}
-		);
-	});
+          ndiv.style.position = "absolute";
+          ndiv.style.top = "50%";
+          ndiv.style.left = "50%";
+          ndiv.style.transform = "translate(-50%, -50%)";
+          ndiv.className = "classImg";
+          ndiv.appendChild(reloadBtn);
+          d1.appendChild(ndiv); //图片挂载到div上
+        }
+      }
+    );
+    videoInfo.player.JS_SetConnectTimeOut(index, 60).then(
+      () => {
+        console.info("JS_SetConnectTimeOut success");
+        // do you want...
+      },
+      (err) => {
+        console.info("JS_SetConnectTimeOut failed", err);
+        // do you want...
+      }
+    );
+  });
 };
 const onReload = (id) => {
-	console.log("重新加载", id);
-    // 这里添加重新加载的逻辑
-    const findItem = videoInfo.devH5List.find(item => item.itemId === id);
-    if (findItem) {
-		play(findItem, findItem.eIndex);
-    }
+  console.log("重新加载", id);
+  // 这里添加重新加载的逻辑
+  const findItem = videoInfo.devH5List.find((item) => item.itemId === id);
+  if (findItem) {
+    play(findItem, findItem.eIndex);
+  }
 };
-const onTwoSubmit = num => {
-	// 这里的分屏，是以列来算的，如果这里参数2，那么就是横竖两列，就是4格
-	videoInfo.numCount = num;
-	videoInfo.player.JS_ArrangeWindow(num).then(
-		() => {
-			// 循环取流
-			//   for (let i = 0; i < num * num; i++) {
-			//     videoInfo.play(i);
-			//   }
-		},
-		e => {
-			console.error(e);
-		}
-	);
+const onTwoSubmit = (num) => {
+  // 这里的分屏，是以列来算的，如果这里参数2，那么就是横竖两列，就是4格
+  videoInfo.numCount = num;
+  videoInfo.player.JS_ArrangeWindow(num).then(
+    () => {
+      // 循环取流
+      //   for (let i = 0; i < num * num; i++) {
+      //     videoInfo.play(i);
+      //   }
+    },
+    (e) => {
+      console.error(e);
+    }
+  );
 };
 watch(
-	() => props.devList,
-	(a, b) => {
-		console.log("isc_plugin.vue获取到设备列表", a.length, b, videoInfo.devH5List);
-		//a是value的新值，b是旧值
-		a.forEach((item, index) => {
-			if (index >= 16) return;
-			if (videoInfo.numCount == 1) {
-				play(item, videoInfo.iWndIndex);
-				videoInfo.devH5List = [
-					{
-						...item,
-						eIndex: videoInfo.iWndIndex
-					}
-				];
-			} else if (a.length == 1) {
-				play(item, videoInfo.iWndIndex);
-				const findIndex = videoInfo.devH5List.findIndex(item => item.eIndex == videoInfo.iWndIndex);
-				if (findIndex != -1) {
-					videoInfo.devH5List.splice(findIndex, 1, {
-						...item,
-						eIndex: videoInfo.iWndIndex
-					});
-				} else {
-					videoInfo.devH5List.push({
-						...item,
-						eIndex: videoInfo.iWndIndex
-					});
-					console.log("视频播放", videoInfo.devH5List);
-				}
-			} else {
-				play(item, index);
-			}
-		});
-		if (a.length > 1) {
-			videoInfo.devH5List = a.map((item, index) => ({ ...item, eIndex: index }));
-		}
-	},
-	{ deep: true }
+  () => props.devList,
+  (a, b) => {
+    console.log("isc_plugin.vue获取到设备列表", a.length, b, videoInfo.devH5List);
+    //a是value的新值，b是旧值
+    a.forEach((item, index) => {
+      if (index >= 16) return;
+      if (videoInfo.numCount == 1) {
+        play(item, videoInfo.iWndIndex);
+        videoInfo.devH5List = [
+          {
+            ...item,
+            eIndex: videoInfo.iWndIndex,
+          },
+        ];
+      } else if (a.length == 1) {
+        play(item, videoInfo.iWndIndex);
+        const findIndex = videoInfo.devH5List.findIndex(
+          (item) => item.eIndex == videoInfo.iWndIndex
+        );
+        if (findIndex != -1) {
+          videoInfo.devH5List.splice(findIndex, 1, {
+            ...item,
+            eIndex: videoInfo.iWndIndex,
+          });
+        } else {
+          videoInfo.devH5List.push({
+            ...item,
+            eIndex: videoInfo.iWndIndex,
+          });
+          console.log("视频播放", videoInfo.devH5List);
+        }
+      } else {
+        play(item, index);
+      }
+    });
+    if (a.length > 1) {
+      videoInfo.devH5List = a.map((item, index) => ({ ...item, eIndex: index }));
+    }
+  },
+  { deep: true }
 );
 watch(
-	() => videoInfo.randomNumber,
-	(a, b) => {
-		// 使用选中事件来定位控制按钮
-		const wnd = document.querySelector(`#player-${props.playerId} #player-container-${videoInfo.iWndIndex}`);
-		if (wnd) {
-			const controls = document.getElementById(`controls-${videoInfo.iWndIndex + 1}`);
-			if (controls) {
-				const player_playVideo = wnd.querySelector(`#player_playVideo${videoInfo.iWndIndex}`);
-				if (player_playVideo.src || player_playVideo.poster) {
-					const find = videoInfo.devH5List.find((item, eIndex) => videoInfo.iWndIndex == eIndex);
-					if (find) {
-						emit("selectPlayVideo", {
-							...find
-						});
-					}
-				}
-			}
-		}
-	}
+  () => videoInfo.randomNumber,
+  (a, b) => {
+    // 使用选中事件来定位控制按钮
+    const wnd = document.querySelector(
+      `#player-${props.playerId} #player-container-${videoInfo.iWndIndex}`
+    );
+    if (wnd) {
+      const controls = document.getElementById(`controls-${props.playerId}${videoInfo.iWndIndex + 1}`);
+      if (controls) {
+        const player_playVideo = wnd.querySelector(
+          `#player_playVideo${videoInfo.iWndIndex}`
+        );
+        if (player_playVideo.src || player_playVideo.poster) {
+          const find = videoInfo.devH5List.find(
+            (item, eIndex) => videoInfo.iWndIndex == eIndex
+          );
+          if (find) {
+            emit("selectPlayVideo", {
+              ...find,
+            });
+          }
+        }
+      }
+    }
+  }
 );
 const videoNameUp = computed(() => {
-	return index => {
-		const find = videoInfo.devH5List.find(item => item.eIndex === index);
-		// console.log(8844555, videoInfo.devH5List);
-		return find ? find.videoName : "";
-	};
+  return (index) => {
+    const find = videoInfo.devH5List.find((item) => item.eIndex === index);
+    // console.log(8844555, videoInfo.devH5List);
+    return find ? find.devName : "";
+  };
 });
 onMounted(() => {
-	videoInfo.devH5List = props.devList.map((item, index) => ({
-		...item,
-		eIndex: index
-	}));
-	console.log("我进来了", props.devList);
-	// 页面加载初始化`
-	initPlayer();
+  videoInfo.devH5List = props.devList.map((item, index) => ({
+    ...item,
+    eIndex: index,
+  }));
+  console.log("我进来了", props.devList);
+  // 页面加载初始化`
+  initPlayer();
 });
 onBeforeUnmount(() => {
   videoInfo.player.JS_Stop(0).then(
@@ -630,175 +683,175 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 :deep(.classImg) {
-	color: rgba(255, 255, 255, 0.5);
-    font-size: 16px;
-	width: calc(100% - 24px);
-    text-align: center;
-	padding: 0 12px;
-	z-index: 101;
-	> div {
-		color: rgb(255, 255, 255);
-		font-size: 12px;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-top: 6px;
-		> img {
-			width: 16px;
-			height: 16px;
-			margin-left: 8px;
-		}
-	}
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 16px;
+  width: calc(100% - 24px);
+  text-align: center;
+  padding: 0 12px;
+  z-index: 101;
+  > div {
+    color: rgb(255, 255, 255);
+    font-size: 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 6px;
+    > img {
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+    }
+  }
 }
 :deep(.sub-wnd) {
-	height: 100% !important;
+  height: 100% !important;
 }
 .bgImage {
-	width: 18px;
-	height: 18px;
-	background-repeat: no-repeat;
-	background-size: 100% 100%;
-	cursor: pointer;
+  width: 18px;
+  height: 18px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
 }
 .transcribe {
-	width: 20px;
-	height: 20px;
-	background-image: url("@/assets/images/iscImage/transcribe.png");
+  width: 20px;
+  height: 20px;
+  background-image: url("@/assets/images/iscImage/transcribe.png");
 }
 .screenshot {
-	background-image: url("@/assets/images/iscImage/screenshot.png");
+  background-image: url("@/assets/images/iscImage/screenshot.png");
 }
 .disableVolume {
-	background-image: url("@/assets/images/iscImage/disableVolume.png");
+  background-image: url("@/assets/images/iscImage/disableVolume.png");
 }
 .fullScreen {
-	background-image: url("@/assets/images/iscImage/fullScreen.png");
+  background-image: url("@/assets/images/iscImage/fullScreen.png");
 }
 .openVolume {
-	background-image: url("@/assets/images/iscImage/openVolume.png");
+  background-image: url("@/assets/images/iscImage/openVolume.png");
 }
 .exitFullScreen {
-	background-image: url("@/assets/images/iscImage/exitFullScreen.png");
+  background-image: url("@/assets/images/iscImage/exitFullScreen.png");
 }
 .splitscreen1 {
-	background-image: url("@/assets/images/iscImage/splitscreen1.png");
+  background-image: url("@/assets/images/iscImage/splitscreen1.png");
 }
 .splitscreen2 {
-	background-image: url("@/assets/images/iscImage/splitscreen2.png");
+  background-image: url("@/assets/images/iscImage/splitscreen2.png");
 }
 .splitscreen3 {
-	background-image: url("@/assets/images/iscImage/splitscreen3.png");
+  background-image: url("@/assets/images/iscImage/splitscreen3.png");
 }
 .stopAll {
-	background-image: url("@/assets/images/iscImage/stopAll.png");
+  background-image: url("@/assets/images/iscImage/stopAll.png");
 }
 .video-controls_flex {
-	display: flex !important;
+  display: flex !important;
 }
 /* 添加控制按钮样式 */
 .video-controls {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 100;
-	//   background: rgba(0, 0, 0, 0.7);
-	display: none;
-	flex-direction: column;
-	justify-content: space-between;
-	.controls-bottom {
-		height: 35px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		background: rgba(0, 0, 0, 0.7);
-		color: white;
-		padding: 0 16px;
-		> div {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			> div:not(:first-child) {
-				margin-left: 15px;
-			}
-		}
-	}
-	.controls-top {
-		padding: 0 16px;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		height: 35px;
-		background: rgba(0, 0, 0, 0.7);
-		.top-left {
-			font-size: 15px;
-			color: #ffffff;
-		}
-		.top-close {
-			width: 84px;
-			font-size: 15px;
-			color: #ffffff;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			cursor: pointer;
-			> i {
-				margin-left: 5px;
-			}
-		}
-	}
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 100;
+  //   background: rgba(0, 0, 0, 0.7);
+  display: none;
+  flex-direction: column;
+  justify-content: space-between;
+  .controls-bottom {
+    height: 35px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 0 16px;
+    > div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      > div:not(:first-child) {
+        margin-left: 15px;
+      }
+    }
+  }
+  .controls-top {
+    padding: 0 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 35px;
+    background: rgba(0, 0, 0, 0.7);
+    .top-left {
+      font-size: 15px;
+      color: #ffffff;
+    }
+    .top-close {
+      width: 84px;
+      font-size: 15px;
+      color: #ffffff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      > i {
+        margin-left: 5px;
+      }
+    }
+  }
 }
 #player-main {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 .player {
-	width: 100%;
-	height: calc(100%);
-	// height: calc(100% - 40px);
+  width: 100%;
+  height: calc(100%);
+  // height: calc(100% - 40px);
 }
 .player-tool {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	background-color: #3d3d3d;
-	height: 40px;
-	padding: 0 16px;
-	> div:not(:first-child) {
-		margin-left: 16px;
-	}
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background-color: #3d3d3d;
+  height: 40px;
+  padding: 0 16px;
+  > div:not(:first-child) {
+    margin-left: 16px;
+  }
 }
 .hikvision-player {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 #video-container {
-	width: 100%;
-	height: 500px;
-	background-color: #000;
+  width: 100%;
+  height: 500px;
+  background-color: #000;
 }
 
 .control-bar {
-	padding: 10px;
-	background: #f5f5f5;
-	display: flex;
-	align-items: center;
-	gap: 10px;
+  padding: 10px;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .video-source {
-	padding: 10px;
-	background: #f5f5f5;
-	display: flex;
-	gap: 10px;
+  padding: 10px;
+  background: #f5f5f5;
+  display: flex;
+  gap: 10px;
 }
 
 .volume-control {
-	display: flex;
-	align-items: center;
-	gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 </style>