refactor(video): 替换AliPlayer组件为Video组件优化视频播放

- 将多个页面中视频播放组件从AliPlayer替换为Video - 修改视频url处理逻辑，避免使用data.url，直接使用data - 配置Video组件的inline属性和跨域设置aliPlayerProps - 更新package.json中zy-react-library版本至2.1.4并调整相关依赖
2026-08-08 15:25:37 +08:00 · 2026-08-08 15:25:37 +08:00 · e506e6d43f
parent 6f7c2fe61c
commit e506e6d43f
6 changed files with 18 additions and 18 deletions
--- a/package.json
+++ b/package.json
@ -19,7 +19,7 @@
  },
  "dependencies": {
    "@ant-design/icons": "6.3.2",
-    "@ant-design/pro-components": "^2.8.10",
+    "@ant-design/pro-components": "3.1.14-6",
    "@cqsjjb/jjb-common-decorator": "latest",
    "@cqsjjb/jjb-common-lib": "latest",
    "@cqsjjb/jjb-dva-runtime": "latest",
@ -40,12 +40,12 @@
    "react-transition-group": "^4.4.5",
    "sass": "^1.97.0",
    "sass-loader": "^16.0.6",
-    "zy-react-library": "^2.1.0"
+    "zy-react-library": "^2.1.4"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^5.4.1",
    "@babel/plugin-proposal-decorators": "^7.19.3",
-    "@cqsjjb/scripts": "latest",
+    "@cqsjjb/scripts": "2.0.0",
    "@eslint-react/eslint-plugin": "^2.2.2",
    "cross-env": "^7.0.3",
    "eslint": "^9.37.0",
--- a/src/pages/Container/Map/components/Content/IndexInfo/Bottom/VideoPatrolPanel/index.js
+++ b/src/pages/Container/Map/components/Content/IndexInfo/Bottom/VideoPatrolPanel/index.js
@ -1,7 +1,7 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { message, Spin } from "antd";
 import { useEffect, useState } from "react";
-import AliPlayer from "zy-react-library/components/Video/AliPlayer";
+import Video from "zy-react-library/components/Video";
 import { randoms } from "zy-react-library/utils";
 import background from "~/assets/images/public/bigScreen/bg14.png";
 import { NS_BI_STATISTICS } from "~/enumerate/namespace";
@ -18,7 +18,7 @@ function VideoPatrolPanel(props) {
      indexCode: cameraNumber,
    });
    if (success && data)
-      setPlayUrl(data?.url || "");
+      setPlayUrl(data || "");
  };
  const selectCorp = (item) => {
    setActive(item.corpinfoName);
@ -69,7 +69,7 @@ function VideoPatrolPanel(props) {
          >
            {playUrl
              ? (
-                  <AliPlayer source={playUrl} height="100%" isLive />
+                  <Video inline height="100%" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
                )
              : (
                  <div className={styles.indexInfoVideoPatrol__empty}>暂无视频</div>
--- a/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/Camera/VideoItem.js
@ -1,6 +1,6 @@
 import { Spin } from "antd";
 import { useEffect, useState } from "react";
-import AliPlayer from "zy-react-library/components/Video/AliPlayer";
+import Video from "zy-react-library/components/Video";
 import styles from "./index.module.less";

 function VideoItem({ cameraNumber, videoName, getFixedCameraPlayUrl }) {
@ -15,7 +15,7 @@ function VideoItem({ cameraNumber, videoName, getFixedCameraPlayUrl }) {
      setPlayUrl("");
      const { data, success } = await getFixedCameraPlayUrl({ indexCode: cameraNumber });
      if (!isUnmounted && success)
-        setPlayUrl(data?.url || "");
+        setPlayUrl(data || "");

      if (!isUnmounted)
        setLoading(false);
@ -32,7 +32,7 @@ function VideoItem({ cameraNumber, videoName, getFixedCameraPlayUrl }) {
      <div className={styles.branchOfficeCameraModal__videoName}>{videoName}</div>
      <Spin spinning={loading}>
        {playUrl
-          ? <AliPlayer source={playUrl} height="100%" isLive />
+          ? <Video inline height="100%" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
          : <div className={styles.branchOfficeCameraModal__empty}>暂无视频</div>}
      </Spin>
    </div>
--- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/VideoPatrolPanel/index.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/VideoPatrolPanel/index.js
@ -1,7 +1,7 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { Spin } from "antd";
 import { useContext, useEffect, useState } from "react";
-import AliPlayer from "zy-react-library/components/Video/AliPlayer";
+import Video from "zy-react-library/components/Video";
 import videoBackground from "~/assets/images/public/bigScreen/bg14.png";
 import { NS_BI_STATISTICS } from "~/enumerate/namespace";
 import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
@ -27,7 +27,7 @@ function VideoPatrolPanel(props) {
      indexCode: video.cameraNumber,
    });
    if (success)
-      setPlayUrl(data?.url || "");
+      setPlayUrl(data || "");
  };

  useEffect(() => {
@ -74,7 +74,7 @@ function VideoPatrolPanel(props) {
            }
          >
            {playUrl
-              ? <AliPlayer source={playUrl} height="100%" isLive />
+              ? <Video inline height="100%" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
              : <div className={styles.branchOfficeVideoPatrol__empty}>暂无视频</div>}
          </Spin>
        </div>
--- a/src/pages/Container/Map/components/Content/modal/DoorCamera/index.js
+++ b/src/pages/Container/Map/components/Content/modal/DoorCamera/index.js
@ -1,7 +1,7 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { Descriptions } from "antd";
 import { useEffect, useState } from "react";
-import AliPlayer from "zy-react-library/components/Video/AliPlayer";
+import Video from "zy-react-library/components/Video";
 import { NS_BI_MARK_INFO, NS_BI_STATISTICS } from "~/enumerate/namespace";

 const DoorCamera = (props) => {
@ -13,7 +13,7 @@ const DoorCamera = (props) => {
      indexCode: cameraNumber,
    });
    if (success && data)
-      setPlayUrl(data?.url || "");
+      setPlayUrl(data || "");
  };

  const getData = async () => {
@ -33,7 +33,7 @@ const DoorCamera = (props) => {
      items={[
        { label: "视频名称", children: info.videoResourceName },
        { label: "摄像头编号", children: info.videoResourceCode },
-        { label: "视频", children: playUrl ? (<AliPlayer source={playUrl} height="300px" isLive />) : (<div>暂无视频</div>) },
+        { label: "视频", children: playUrl ? (<Video inline height="300px" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />) : (<div>暂无视频</div>) },
      ]}
    />
  );
--- a/src/pages/Container/Map/components/Content/modal/VideoPlay/index.js
+++ b/src/pages/Container/Map/components/Content/modal/VideoPlay/index.js
@ -1,6 +1,6 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { useEffect, useState } from "react";
-import AliPlayer from "zy-react-library/components/Video/AliPlayer";
+import Video from "zy-react-library/components/Video";
 import { NS_BI_MARK_INFO } from "~/enumerate/namespace";

 const VideoPlay = (props) => {
@ -9,7 +9,7 @@ const VideoPlay = (props) => {
  const getData = async () => {
    const { data, success } = await props.getFixedCameraPlayUrl({ indexCode: props.cameraNumber });
    if (success && data)
-      setPlayUrl(data.url);
+      setPlayUrl(data);
  };

  useEffect(() => {
@ -20,7 +20,7 @@ const VideoPlay = (props) => {
    <div>
      {playUrl
        ? (
-            <AliPlayer source={playUrl} height="500px" isLive />
+            <Video inline height="500px" width="100%" source={playUrl} isLive aliPlayerProps={{ extraInfo: { crossOrigin: "anonymous" } }} />
          )
        : (
            <div style={{ color: "#fff", textAlign: "center" }}>暂无视频</div>