You can detect the fullscreen button click event of an HTML5 video using the Fullscreen API.
First, you need to check if the Fullscreen API is supported by the browser using the following code:
if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
// Fullscreen API is supported
}
Once you have confirmed that the Fullscreen API is supported, you can add an event listener to the video element for the fullscreenchange
event. This event is fired when the fullscreen state of the video changes, either entering or exiting fullscreen mode.
var video = document.getElementById('myVideo');
if (video.requestFullscreen) {
video.addEventListener('fullscreenchange', fullscreenHandler);
} else if (video.webkitRequestFullscreen) {
video.addEventListener('webkitfullscreenchange', fullscreenHandler);
} else if (video.mozRequestFullScreen) {
video.addEventListener('mozfullscreenchange', fullscreenHandler);
} else if (video.msRequestFullscreen){
video.addEventListener('MSFullscreenChange', fullscreenHandler);
}
function fullscreenHandler() {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
// Video is now in fullscreen mode
console.log('Fullscreen button clicked!');
} else {
// Video is not in fullscreen mode
}
}
In the fullscreenHandler
function, you can check whether the video element is in fullscreen mode or not. If it is, then the fullscreen button has been clicked and you can execute your desired code.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-02-14 11:00:00 +0000
Seen: 15 times
Last updated: Jul 13 '22
What is the process for including a delete button in a row that can be clicked?
In Angular, how can a mat cross button be aligned to the right-most position within a div?
What is the method for modifying the button color in the antd Modal?
How can I create an HTML button that sends data to a different URL?
How can we use the Pywinauto library to automate the control of Proton VPN?
How can a button be utilized to display and hide the matplotlib live graph?
How can I activate a button using Angular Material?
Is it impossible to modify the color of button text on Android?
How can key and value be saved in admin setting using Opencart 3?