React html视频元素和用户手势上的requestFullscreen问题

编程问答 2022-06-05

问题描述

我有一个React对象<VideoPlayer/>，只能在按钮单击事件中全屏播放

const toggleFullScreen = () => {
  //(fullscreen ? setFullscreen(true) : setFullscreen(false))
  console.log("someone is calling")
  const videoContainer = document.querySelector('.video-container');
  if (videoContainer){
    if (!document.fullscreenElement) {
      videoContainer.requestFullscreen(); //webkitRequestFullscreen
      console.log("setFullscreen true")
      //setFullscreen(true);
      //fullscreen = true;
    } else {
      document.exitFullscreen();
      console.log("setFullscreen false")
      //setFullscreen(false);
      //fullscreen = false;
    }
  } else {
    console.log("video container not loaded")
  }


};

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture
Uncaught (in promise) TypeError: fullscreen error
    at toggleFullScreen (useVideoPlayer.js:102)
    at eval (useVideoPlayer.js:48)
    at commitHookEffectListMount (react-dom.development.js:19731)
    at commitPassiveHookEffects (react-dom.development.js:19769)
    at HTMLUnkNownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at flushPassiveEffectsImpl (react-dom.development.js:22853)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)

查看了Javascript request fullscreen is unreliable
和https://stackoverflow.com/a/46164112/3577482，但仍然无法找到一个好的解决方案。

不想构建另一个自定义组件或hacky方法

我尝试过

fullScreenButton && (fullScreenButton.addEventListener('click',toggleFullScreen));
...
        // Create the event
        var event = new CustomEvent("click",toggleFullScreen());
        // dispatch/Trigger/Fire the event
        fullScreenButton && (fullScreenButton.dispatchEvent(event));

但这没什么作用

只需要视频容器元素（而不是文档）就可以全屏显示并保持全屏显示。
它需要稍后调用video.play()

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fullscreenfullscreengoogle-chromehtmljavascriptreactjsreactjsreactjsreactjs