In Angular PWA App, I have to make div toggle for Full screen and Exit Full Screen.
For this, I have used :
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
But this is not working as App mode in IOS Device. Any Idea?
How to open a web page using auto full screen mode?
I am looking for a solution to open an web page automatically in full screen mode, when page is loaded.
At this moment I can do it when I clicked a button.
<body onload="myFunction()">
<h1>Screen Orientation Lock Demo</h1>
<button class="lock">Lock</button>
<textarea></textarea>
</body>
var fullscreen = {
request: function(elem){
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
},
};
$('.lock').on('click', function() {
fullscreen.request(this.parentNode);
});
function myFunction() {
fullscreen.request(this.parentNode);
}
As per documentation:
This method must be called while responding to a user interaction or a device orientation change; otherwise it will fail.
So, the requestFullScreen method should be called after a user interaction with the page or on orientation change.
When a video is played in fullscreen mode I want to exit fullscreen when the video has ended. I have this working on desktop and android, but not on my iPad (v10.3.2)
The code to exit fullscreen looks like this
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
None of these function exists on my iPad when it tries to exit when the video has ended.
Here is the code which triggers fullscreen:
if (screen.requestFullscreen) {
screen.requestFullscreen();
} else if (screen.mozRequestFullScreen) {
screen.mozRequestFullScreen();
} else if (screen.msRequestFullscreen) {
screen.msRequestFullscreen();
} else if (screen.webkitRequestFullscreen) {
screen.webkitRequestFullscreen((<any>Element).ALLOW_KEYBOARD_INPUT);
} else {
if (this.videoRef.nativeElement.webkitSupportsFullscreen) {
this.videoRef.nativeElement.webkitEnterFullscreen();
}
}
Any suggestion why this fails on my iPad?
Well you can do this with jQuery
$('video').get(0).webkitExitFullscreen();
and you can read more about the documentation of this method over here
https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1629468-webkitexitfullscreen
and how to use it at mozilla developer zone over here
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
I somehow managed to put two options in one button: when clicking, the video starts to play and enters full screen at the same time.
This is the html:
<video id="video1" class="video-small">
<source src="video/Marinela+Pinguinos-HD.mp4" type="video/mp4" class="video-file">
<source src="video/Marinela_Pinguinos-HD.webm" type="video/webm" class="video-file">
</video>
<button id="play" class="full-play-button" onclick="vidplay(); goFullscreen('video1')">Play fullscreen</button>
JAVASCRIPT:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementsByClassName("full-play-button");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
}
So far things go smooth. When entering full screen, there's a default player-like thing at the bottom, with a button offering the possibility to exit full screen.
What I would like to achieve is to be able to pause the video when clicking that button, but I have no idea how.
What I can think of is some kind of a function that detects if we're full screen or not, and if we're not, it would pause/stop (not sure which I prefer yet) the video.
This is what came to my mind, but I'm really a newbie in JS and it doesn't work:
function exitPause() {
var video = document.getElementById("video1");
if (document.exitFullscreen) {
video.pause();
}
else if (document.mozCancelFullScreen) {
video.pause();
}
else if (document.webkitExitFullscreen) {
video.pause();
}
else if (element.msExitFullscreen) {
video.pause();
}
}
What am I doing wrong? How can I make it happen?
Use fullscreenchange event handler:
video.addEventListener(
'fullscreenchange',
function(event) {
if (!document.fullscreenElement) {
video.pause();
}
},
false
);
Note: care for vendor prefixes.
Thanks to Igor Gilyazov I managed to go a bit further. This is how the code looks now:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementsByClassName("full-play-button");
video.addEventListener(
'webkitfullscreenchange',
function(event) {
if (!document.fullscreenElement && video.paused) {
video.play();
}
else {
video.pause();
}
},
false
);
}
and going full screen:
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
What happens now is when I first click the button, it goes full screen and the video plays. When going back to small screen, it pauses.
This is great.
Unfortunately it happens only every second time (the next time it keeps being paused no matter if going full or small, then right again, then wrong and so on).
I know I'm close, but it's not fully working yet, any ideas for modifications?
I am requesting full screen on button click for <video>, but the thing is that the play() function does not work when requestFullScreen() is used.
Any idea why not?
Code:
video[0].play();
if(video[0].requestFullScreen) {
video[0].requestFullScreen();
} else if(video[0].mozRequestFullScreen) {
video[0].mozRequestFullScreen();
} else if(video[0].webkitRequestFullScreen) {
video[0].webkitRequestFullScreen();
}