video自动播放影响PWA安装

有个需求是需要有个自动播放的视频，并且有个按钮可以点击安装PWA

视频自动播放可以参考 这篇

实现PWA安装可以参考这篇

反复调试后发现视频自动播放的autoplay属性设置为false的时候，就不会阻塞PWA的beforeinstallprompt事件

刚开始还设置了让视频延后2s再自动播放，也不能触发beforeinstallprompt事件

最后解决方案就是初始化页面时先让视频自动播放，把autoplay设置为true，
等点击安装 按钮时再暂停视频，也就是把autoplay设置为false,
这样就不会阻塞beforeinstallprompt事件，可以顺利触发了

主要代码如下：

const [autoPlay, setAutoPlay] = useState(true)

  useEffect(() => {
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault()
      setDeferredPrompt(e)
      console.log('---- beforeinstallprompt ----', e)
      localStorage.removeItem(PWA_Installed)
    })
  }, [])
	const handleInstall = () =>  {
		console.log('安装PWA')
	}

	const handleInstallPWA = () => {
      setAutoPlay(false)
      videoRef.current.pause()
      handleInstall()
  }
return <>
		<video
            ref={videoRef}
            id="my-video"
            className="video-js w-full h-[220px] bg-black"
            loop
            // controls={false}
            preload="none"
            width="100%"
            height="264"
            muted
            playsInline
            autoPlay={autoPlay}
            poster={_img1600}
            data-setup="{}"
          >
            <source src={appConfig?.videoUrl} type="video/mp4" />
            <p className="vjs-no-js">
              To view this video please enable JavaScript, and consider
              upgrading to a web browser that
              <a
                href="https://videojs.com/html5-video-support/"
                target="_blank"
              >
                supports HTML5 video
              </a>
            </p>
          </video>
</>