Fullscreen not work on Safari about custom-html5-video HOT 5 CLOSED

I got it to work finally but I had to insert the WebKit hooks. At the moment the keyboard now only works for requesting full screen but not to exit for the F key but esc works. To exit full screen in Chrome and Firefox, the f key works fine. Here's my modification to the toggleFullscreen function:

function toggleFullScreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
} else if (videoContainer.webkitRequestFullscreen) {
videoContainer.webkitRequestFullscreen();
} else {
videoContainer.requestFullscreen()
}
}

from custom-html5-video.

Actually you also need to check differently if you are in Fullscreen, so it should be more like this:

function toggleFullScreen() {
if (document.fullscreenElement) {
document.exitFullscreen();
}
else if (document.webkitFullscreenElement) {
document.webkitExitFullscreen();
}
else if (videoContainer.webkitRequestFullscreen) {
videoContainer.webkitRequestFullscreen();
}
else {
videoContainer.requestFullscreen()
}
}

Works for me on Safari 14 for MacOS.

Source:
https://www.w3schools.com/jsref/prop_document_fullscreenelement.asp

from custom-html5-video.

Re-doing the tutorial as I'm getting back to this project in order to extend. Used the last comment's suggestion and it works fine.

from custom-html5-video.

Thanks a lot for this man. I don't have a Mac so I couldn't test in Safari unfortunately. I will add a note in the tutorial

from custom-html5-video.

Many thanks @PabloGS, I've updated the tutorial.

from custom-html5-video.