React网页视频App iOS端全屏结束后无法显示问卷问题排查

功能预期 #

• React视频网页App：视频播放时保持全屏状态，视频结束后全屏显示问卷
• 该功能在安卓、Windows平台的所有浏览器中运行正常
• iOS平台异常：视频结束后问卷无法在全屏状态下显示，退出全屏后问卷才会出现

排查结果 #

• console.log("handleVideoEnded runs ")：在iOS、安卓及Windows浏览器中均有输出，说明handleVideoEnded函数已触发
• console.log(" setShowMessage(true); runs")：仅在安卓及Windows浏览器中输出，iOS端无输出，说明iOS端未进入对应分支逻辑，导致问卷无法显示

相关代码 #

全屏状态监听与视频结束事件绑定（useEffect） #

useEffect(() => {
    const handleFullscreenChange = () => {
      data.forEach((_, index) => {
        const mainVideo = mainVideoRef.current[index];
  
        if (
          document.fullscreenElement ||
          document.webkitFullscreenElement ||
          document.mozFullScreenElement ||
          document.msFullscreenElement
        ) {
          // 处理全屏状态
          setVideoStates((prevState) => {
            const newState = [...prevState];
            newState[index] = true;
            return newState;
          });

        // 检查视频是否已结束
        if (mainVideo.ended) {
          // 视频全屏且结束时显示问卷
          setShowQuiz(true);
        } else {
          setShowQuiz(false);
        }

        } else {
          // 处理退出全屏
          setVideoStates((prevState) => {
            const newState = [...prevState];
            newState[index] = false;
            return newState;
          });
          mainVideo.pause();
          setShowQuiz(false);
          setShowMessage(false);
        }
      });
    };
  
    const handleVideoEndedWrapper = (index) => {
      handleVideoEnded(index);
    };
  
    data.forEach((_, index) => {
      const video = mainVideoRef.current[index];
      video.addEventListener('ended', () => handleVideoEndedWrapper(index));
    });
  
    document.addEventListener('fullscreenchange', handleFullscreenChange);
  
    return () => {
      data.forEach((_, index) => {
        const video = mainVideoRef.current[index];
        if (video) {
          video.removeEventListener('ended', () => handleVideoEndedWrapper(index));
        }
      });

      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, [data, videoStates, handleVideoEnded]);

视频结束处理函数（handleVideoEnded） #

const handleVideoEnded = async (index, videoId) => {
    const videoIdlll = data[index].video_id;
    console.log("handleVideoEnded runs ")    
    getRandomQuestion(data[index].questions)
    async function someAsyncFunction(userId, videoIdlll) {
      const earnPointsForVideoArray = await getUserEarnedPointsForVideo(userId);
      if (earnPointsForVideoArray.includes(videoIdlll)) {
                    return true;
      } else {
        return false;
      }
    }
    setIsPlaying(false);
    if (user) {
      if (remainingVideoPoints[index] < 1) {
        setExpiredVideoIndex(index);
        setShowQuiz(false); // 积分过期的视频不显示问卷
        setShowNoVideoPoint(true);
      } else if (await someAsyncFunction(user.uid, videoIdlll)) {
        setShowMessage(true);
        console.log(" setShowMessage(true); runs")
      }
}

内容的提问来源于stack exchange，提问作者csspd net