I am using an html5 video player on a website. When the user starts playing it, the player goes into fullscreen mode and plays the video.
When the video has ended, I catch the ended
event and close the video player via myvideo.webkitExitFullScreen();
.
Now, I need another event when the player actually gets closed either if the user taps the "done" button in top bar or if the player gets closed via video.webkitExitFullScreen();
.
Is there a way to do this?
You can use the webkitendfullscreen
and webkitenterfullscreen
events:
var vid = document.getElementById("some-vid");
vid.addEventListener('webkitendfullscreen', function (e) {
// handle end full screen
});
vid.addEventListener('webkitenterfullscreen', function (e) {
// handle enter full screen
});
A similar question was asked here: How do I capture keyboard events while watching an HTML5 video in fullscreen mode? - not sure how to link these 2 questions.
I'm just going to assume you use jQuery for ease of writing this code. You just need to know when the video has changed modes from full-screen to not-full-screen... so on Resize you can check the video.webkitDisplayingFullscreen;
property.
var isVideoFullscreen = video.webkitDisplayingFullscreen;
$(window).bind("resize", function (e) {
// check to see if your browser has exited fullscreen
if (isVideoFullscreen != video.webkitDisplayingFullscreen) { // video fullscreen mode has changed
isVideoFullscreen = video.webkitDisplayingFullscreen;
if (isVideoFullscreen) {
// you have just ENTERED full screen video
} else {
// you have just EXITED full screen video
}
}
});
Hope this helps or points you in the right direction
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With