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]);