feat(video): 添加阿里云播放器自定义属性支持和实例方法

- 添加 aliPlayerProps 属性用于传递自定义参数给 AliPlayer
- 在 AliPlayer 组件中暴露 getPlayerInstance 方法获取播放器实例
- 将 Video 组件改为 forwardRef 以支持外部引用

src/components/Video/AliPlayer.d.ts

@@ -25,6 +25,8 @@ export interface AliPlayerProps {
   onEnded?: () => void;
   /** 播放进度更新事件 */
   onTimeupdate?: (currentTime: number) => void;
+  /** 传递给 AliPlayer 的属性 */
+  aliPlayerProps?: Record<string, any>;
 }
 
 export interface AliPlayerRef {

src/components/Video/AliPlayer.js

@@ -19,6 +19,7 @@ const AliPlayer = forwardRef(({
   playTime = 0,
   onEnded,
   onTimeupdate,
+  aliPlayerProps,
 }, ref) => {
   const playerRef = useRef(null);
   const containerRef = useRef(null);
@@ -32,6 +33,7 @@ const AliPlayer = forwardRef(({
     pause: () => {
       playerRef.current && playerRef.current.pause();
     },
+    getPlayerInstance: () => playerRef.current,
   }));
 
   const onDisposeAliPlayer = () => {
@@ -120,6 +122,7 @@ const AliPlayer = forwardRef(({
         isLive,
         useH5Prism: true,
         skinLayout,
+        ...aliPlayerProps,
       },
       (player) => {
         if (autoplay) {

src/components/Video/index.d.ts

@@ -1,7 +1,7 @@
 import type { ForwardRefExoticComponent, RefAttributes } from "react";
 import type { AliPlayerProps, AliPlayerRef } from "./AliPlayer";
 
-export interface VideoProps extends Omit<AliPlayerProps, "onEnded" | "onTimeupdate"> {
+export interface VideoProps extends AliPlayerProps {
   /** 弹窗标题，默认 “视频” */
   title?: string;
   /** 是否显示弹窗 */
@@ -15,8 +15,6 @@ export interface VideoProps extends Omit<AliPlayerProps, "onEnded" | "onTimeupda
 /**
  * 视频播放组件
  */
-declare const Video: ForwardRefExoticComponent<
+declare const Video: ForwardRefExoticComponent<VideoProps & RefAttributes<AliPlayerRef>>;
-  VideoProps & RefAttributes<AliPlayerRef>
->;
 
 export default Video;

src/components/Video/index.js

@@ -1,12 +1,12 @@
 import { Button, Modal } from "antd";
-import { useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { getFileUrl } from "../../utils";
 import AliPlayer from "./AliPlayer";
 
 /**
  * 视频播放组件
  */
-const Video = ({
+const Video = forwardRef(({
   source = "",
   vid = "",
   playAuth = "",
@@ -21,10 +21,23 @@ const Video = ({
   title = "视频",
   visible: externalVisible = false,
   onCancel,
-}) => {
+  onEnded,
+  onTimeupdate,
+  aliPlayerProps = {},
+}, ref) => {
   const [internalVisible, setInternalVisible] = useState(false);
   const playerRef = useRef(null);
 
+  useImperativeHandle(ref, () => ({
+    play: () => {
+      playerRef.current && playerRef.current.play();
+    },
+    pause: () => {
+      playerRef.current && playerRef.current.pause();
+    },
+    getPlayerInstance: () => playerRef.current && playerRef.current.getPlayerInstance(),
+  }));
+
   const visible = onCancel ? externalVisible : internalVisible;
   const setVisible = onCancel || setInternalVisible;
 
@@ -60,6 +73,9 @@ const Video = ({
       isLive={isLive}
       width={width}
       height={height}
+      aliPlayerProps={aliPlayerProps}
+      onEnded={onEnded}
+      onTimeupdate={onTimeupdate}
     />
   );
 
@@ -83,7 +99,7 @@ const Video = ({
   }
 
   return playerElement;
-};
+});
 
 Video.displayName = "Video";