diff --git a/src/components/Video/AliPlayer.d.ts b/src/components/Video/AliPlayer.d.ts index b237383..33e9d75 100644 --- a/src/components/Video/AliPlayer.d.ts +++ b/src/components/Video/AliPlayer.d.ts @@ -25,6 +25,8 @@ export interface AliPlayerProps { onEnded?: () => void; /** 播放进度更新事件 */ onTimeupdate?: (currentTime: number) => void; + /** 传递给 AliPlayer 的属性 */ + aliPlayerProps?: Record; } export interface AliPlayerRef { diff --git a/src/components/Video/AliPlayer.js b/src/components/Video/AliPlayer.js index c7ff3ff..38c423a 100644 --- a/src/components/Video/AliPlayer.js +++ b/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) { diff --git a/src/components/Video/index.d.ts b/src/components/Video/index.d.ts index eca035e..598b0b4 100644 --- a/src/components/Video/index.d.ts +++ b/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 { +export interface VideoProps extends AliPlayerProps { /** 弹窗标题,默认 “视频” */ title?: string; /** 是否显示弹窗 */ @@ -15,8 +15,6 @@ export interface VideoProps extends Omit ->; +declare const Video: ForwardRefExoticComponent>; export default Video; diff --git a/src/components/Video/index.js b/src/components/Video/index.js index 1ea9d37..7e4017e 100644 --- a/src/components/Video/index.js +++ b/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";