Friday, December 29, 2023
HomeiOS Developmentreactjs - why video app not working positive on ios whereas working...

reactjs – why video app not working positive on ios whereas working android and home windows


My react net video app ought to work as under;
When the video is operating, it goes to full display screen.
When the video ends, the textual content is proven in full display screen.
It really works positive with all browsers in android and home windows.

Nonetheless, on iOS, the textual content doesn’t seem in full display screen after the video ends. Once I exit full display screen, textual content seems.

  useEffect(() => {
    const handleFullscreenChange = () => {
      knowledge.forEach((_, index) => {
        const mainVideo = mainVideoRef.present[index];
  
        if (
          doc.fullscreenElement ||
          doc.webkitFullscreenElement ||
          doc.mozFullScreenElement ||
          doc.msFullscreenElement
        ) {
          // Deal with fullscreen          
          setVideoStates((prevState) => {
            const newState = [...prevState];
            newState[index] = true;
            return newState;
          });

        // Verify if the video has ended
        if (mainVideo.ended) {
          // Present quiz when video is in fullscreen and has ended
          setShowQuiz(true);
        } else {
          setShowQuiz(false);
        }

        } else {
          // Deal with exiting fullscreen
          setVideoStates((prevState) => {
            const newState = [...prevState];
            newState[index] = false;
            return newState;
          });
          mainVideo.pause();
          setShowQuiz(false);
          setShowMessage(false);
        }
      });
    };
  
    const handleVideoEndedWrapper = (index) => {
      handleVideoEnded(index);
    };
  
    knowledge.forEach((_, index) => {
      const video = mainVideoRef.present[index];
      video.addEventListener('ended', () => handleVideoEndedWrapper(index));
    });
  
    doc.addEventListener('fullscreenchange', handleFullscreenChange);
  
    return () => {
      knowledge.forEach((_, index) => {
        const video = mainVideoRef.present[index];
        if (video) {
          video.removeEventListener('ended', () => handleVideoEndedWrapper(index));
        }
      });


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



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments