0、前情提要

为了解决下面这些问题，我考虑到抽出一个公共的Video组件，使其能在多端的效果一致

1、需求分析

综上所述，我们需要的Video需求如下

2、思考需求解决方案2.1、解决小程序单个页面渲染多个Video内存溢出2.2、实现ios和安卓的点击播放效果统一2.3、解决Taro.createVideoContext的实例方法无法控制h5的video2.4、样式不一致的问题3、思考组件的props需要什么4、编写CommonVideo组件

// ref 控制 h5 的播放暂停
const videoH5Ref = useRef(null)
// videoTaroPlayer 控制 Taro 的播放暂停
const videoTaroPlayer = Taro.createVideoContext(`videoTaroPlayer${id}`)
const commonVideoFullScreen = (video: HTMLVideoElement, pageEnv: PageEnv) => {
    switch (pageEnv) {
      case 'weapp':
        videoTaroPlayer.requestFullScreen({ direction: 0 })
        // 因为play的方法要等待视频资源加载完成才能拿到，默认等待0.5秒，防止用户一进来立刻点击大视频导致卡顿
        delayOnVideoReady(videoTaroPlayer.play, 500)
        break
      case 'h5':
        if (video.requestFullscreen) {
          video.requestFullscreen()
          video.addEventListener('loadedmetadata', () => {
            video?.play()
          })
        }
        break
      default:
        // 如果 pageEnv 不是 'weapp' 或 'h5'，可以在这里处理默认情况
        break
    }
}
useLayoutEffect(() => {
  const video: HTMLVideoElement = videoH5Ref.current!
  const pageEnv: PageEnv = isWeapp ? 'weapp' : 'h5'
  if (play) {
     commonVideoFullScreen(video, pageEnv)
  }
}, [play])

5、遇到的疑难杂症