视频自适应

packages/base-components/VideoSliderModal/CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 ## [1.1.15](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/videoslidermodal@1.1.14...@wisdom-components/videoslidermodal@1.1.15) (2023-05-18)
 
 **Note:** Version bump only for package @wisdom-components/videoslidermodal
 
-
-
-
-
-
 ## [1.1.14](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/videoslidermodal@1.1.13...@wisdom-components/videoslidermodal@1.1.14) (2023-05-18)
 
 **Note:** Version bump only for package @wisdom-components/videoslidermodal
 
-
-
-
-
-
 ## [1.1.13](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/videoslidermodal@1.1.12...@wisdom-components/videoslidermodal@1.1.13) (2023-05-18)
 
 **Note:** Version bump only for package @wisdom-components/videoslidermodal
 
-
-
-
-
 ## [1.1.12](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/videoslidermodal@1.1.10...@wisdom-components/videoslidermodal@1.1.12) (2023-05-18)
 
 ### Bug Fixes

packages/base-components/VmsVideo/CHANGELOG.md

 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 ## [1.2.11](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.2.10...@wisdom-components/VmsVideo@1.2.11) (2023-05-18)
 
 **Note:** Version bump only for package @wisdom-components/VmsVideo
 
-
-
-
-
-
 ## [1.2.10](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.2.9...@wisdom-components/VmsVideo@1.2.10) (2023-05-18)
 
 **Note:** Version bump only for package @wisdom-components/VmsVideo
 
-
-
-
-
-
 ## [1.2.9](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.2.8...@wisdom-components/VmsVideo@1.2.9) (2023-05-18)
 
 **Note:** Version bump only for package @wisdom-components/VmsVideo
 
-
-
-
-
 ## [1.2.8](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.2.7...@wisdom-components/VmsVideo@1.2.8) (2023-05-18)
 
 **Note:** Version bump only for package @wisdom-components/VmsVideo

packages/base-components/VmsVideo/src/demos/dmeo1.tsx

@@ -2,7 +2,7 @@
  * @Author: 634665781 634665781@qq.com
  * @Date: 2023-04-11 13:40:18
  * @LastEditors: 634665781 634665781@qq.com
- * @LastEditTime: 2023-05-18 15:15:16
+ * @LastEditTime: 2023-05-22 10:06:05
  * @FilePath: \wisdom-components\packages\base-components\TestVideo\src\demos\dmeo1.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -40,14 +40,14 @@ const Demo1 = (props) => {
   let VideoParam = {
     id: '11F102BC-CE03-4E32-AE60-F297934DFE3F', // 398993BB-A795-4237-BE75-B6A7EC9D675
     name: '琼海电信小区', // 设备名称
-    protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
+    protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
     username: '6c44c8e92d1c4d75a9818756025df550',
     password: '78b7dc88f9f4bf19c2b1aabfdd995244',
     dataRate: 'Sub', // Main 主码流  Sub 子码流
     pandavmsHost: `ws://192.168.8.27:9876/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
     address: '236644034',
- //   width: 952,
- //   height: 500,
+    //   width: 952,
+    //   height: 500,
   };
 
   /* {

packages/base-components/VmsVideo/src/index.jsx

@@ -2,7 +2,7 @@
  * @Author: 634665781 634665781@qq.com
  * @Date: 2023-04-11 13:40:18
  * @LastEditors: 634665781 634665781@qq.com
- * @LastEditTime: 2023-05-18 15:48:59
+ * @LastEditTime: 2023-05-22 10:29:23
  * @FilePath: \wisdom-components\packages\base-components\VmsVideo\src\index.jsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -82,7 +82,7 @@ const Video = (props, ref) => {
           url: `ezopen://open.ys7.com/${VideoInfo.address}/${VideoInfo.channel || 1}.hd.live`,
           templete: 'simple',
           footer: ['talk', 'broadcast', 'hd', 'fullScreen'],
-          width: VideoInfo.width || refs?.current?.offsetWidth|| 952,
+          width: VideoInfo.width || refs?.current?.offsetWidth || 952,
           height: VideoInfo.height || refs?.current?.offsetHeight || 500,
         });
 
@@ -97,6 +97,29 @@ const Video = (props, ref) => {
         } catch (e) {}
       });
   };
+  const resizeUpdate = (e) => {
+    // 通过事件对象获取浏览器窗口的高度
+    setWidth(refs.current.offsetWidth);
+    setHeight(refs.current.offsetHeight);
+  //  PlayersA?.stop?.()
+  console.log(PlayersA,'视频对象');
+  PlayersA.stop()
+    getToken()
+};
+
+useEffect(() => {
+    // 页面刚加载完成后获取浏览器窗口的大小
+    setWidth(refs.current.offsetWidth);
+    setHeight(refs.current.offsetHeight);
+
+    // 页面变化时获取浏览器窗口的大小 
+    window.addEventListener('resize', resizeUpdate);
+
+    return () => {
+        // 组件销毁时移除监听事件
+        window.removeEventListener('resize', resizeUpdate);
+    }
+}, [])
 
   if (VideoInfo.protocol != '萤石EZOPEN') {
     useImperativeHandle(ref, () => {