feat(Video): web h5 下支持 ref 调用

src/packages/video/demo.tsx

@@ -13,7 +13,7 @@ const VideoDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       basic: '基础用法',
-      autoPlay: '自动播放',
+      autoPlay: '自动播放，支持 Ref 暂停 和继续播放',
       muted: '初始化静音',
       cover: '视频封面海报设置',
       inline: '行内播放',
@@ -22,7 +22,7 @@ const VideoDemo = () => {
     },
     'zh-TW': {
       basic: '基礎用法',
-      autoPlay: '自動播放',
+      autoPlay: '自動播放，支持 Ref 暫停 和繼續播放',
       muted: '初始化靜音',
       cover: '視頻封面海報設置',
       inline: '行內播放',
@@ -31,7 +31,7 @@ const VideoDemo = () => {
     },
     'en-US': {
       basic: 'Basic Usage',
-      autoPlay: 'Auto play',
+      autoPlay: 'Auto play, Ref pause and play',
       muted: 'Initialize mute',
       cover: 'Video cover poster settings',
       inline: 'play inline',

src/packages/video/demos/h5/demo2.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import { Cell, Video } from '@nutui/nutui-react'
 
 const Demo2 = () => {
@@ -14,10 +14,21 @@ const Demo2 = () => {
   const play = (elm: HTMLVideoElement) => console.log('play', elm)
   const pause = (elm: HTMLVideoElement) => console.log('pause', elm)
   const playend = (elm: HTMLVideoElement) => console.log('playend', elm)
+
+  const rootRef = useRef<HTMLVideoElement>(null)
+  setTimeout(() => {
+    rootRef?.current?.pause()
+  }, 2000)
+
+  setTimeout(() => {
+    rootRef?.current?.play()
+  }, 4000)
+
   return (
     <>
       <Cell style={{ padding: '0' }}>
         <Video
+          ref={rootRef}
           source={source}
           options={options}
           onPlay={play}

src/packages/video/doc.en-US.md

@@ -95,3 +95,10 @@ Reset the video when the video address changes
 | onPlay | play event | `(element: HTMLVideoElement) => void` | `-` |
 | onPause | pause event | `(element: HTMLVideoElement) => void` | `-` |
 | onPlayEnd | Playback completion callback | `(element: HTMLVideoElement) => void` | `-` |
+
+### Ref
+
+| Name | Description | Arguments |
+| --- | --- | --- |
+| play | play | `-` |
+| pause | pause | `-` |

src/packages/video/doc.md

@@ -95,3 +95,10 @@ playsinline 属性设置移动端视频行内播放，阻止新打开页面播
 | onPlay | 播放 | `(element: HTMLVideoElement) => void` | `-` |
 | onPause | 暂停 | `(element: HTMLVideoElement) => void` | `-` |
 | onPlayEnd | 播放完成回调 | `(element: HTMLVideoElement) => void` | `-` |
+
+### Ref
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| play | 播放 | `-` |
+| pause | 暂停 | `-` |

src/packages/video/doc.zh-TW.md

@@ -95,3 +95,10 @@ playsinline 屬性設置移動端視頻行內播放，阻止新打開頁面播
 | onPlay | 播放 | `(element: HTMLVideoElement) => void` | `-` |
 | onPause | 暫停 | `(element: HTMLVideoElement) => void` | `-` |
 | onPlayEnd | 播放完成回調 | `(element: HTMLVideoElement) => void` | `-` |
+
+### Ref
+
+| 方法名 | 說明 | 參數 |
+| --- | --- | --- |
+| play | 播放 | `-` |
+| pause | 暫停 | `-` |

src/packages/video/video.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, FunctionComponent } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
@@ -36,11 +36,17 @@ const defaultProps = {
   },
 } as VideoProps
 
+export type VideoRef = {
+  pause: () => void
+  play: () => void
+}
+
 const classPrefix = `nut-video`
-export const Video: FunctionComponent<
+export const Video = React.forwardRef<
+  VideoRef,
   Partial<VideoProps> &
     Omit<React.HTMLAttributes<HTMLDivElement>, 'onPause' | 'onPlay'>
-> = (props) => {
+>((props, ref) => {
   const {
     children,
     source,
@@ -88,6 +94,18 @@ export const Video: FunctionComponent<
     }
   }
 
+  const pause = () => {
+    rootRef?.current?.pause()
+  }
+  const play = () => {
+    rootRef?.current?.play()
+  }
+
+  React.useImperativeHandle(ref, () => ({
+    pause,
+    play,
+  }))
+
   return (
     <div className={classes} {...restProps}>
       <video
@@ -105,6 +123,6 @@ export const Video: FunctionComponent<
       </video>
     </div>
   )
-}
+})
 
 Video.displayName = 'NutVideo'