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
Related
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?
I have chart.js. It looks good when it is with a smaller size, but I have implemented also a fullscreen option to the chart.
It opens as expected, but the quality of the chart when on fullscreen is poor as it just resizes the small map to fullscreen.
Any idea how to call the chart again in a bigger size when opening on fullscreen?
This is the JS I am using to open the fullscreen
function toggleFullscreen(elem) {
var elem = document.getElementById("canvas");
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
document.getElementById('fs-doc-button').addEventListener('click', function () {
toggleFullscreen('#canvas');
});
document.getElementById('W').addEventListener('click', function () {
toggleFullscreen(this);
});
And this is the canvas holding the chart
<div class="chart-container">
<canvas id='canvas' style='background-color:white;width: 100%;'></canvas>
</div>
And this it the button I am opening it with
<button id='fs-doc-button'>Fullscreen</button>
The only thing I can think is creating a new hidden canvas with bigger chart size and opening it fullscreen, but sounds quite dirty to me:)
So, wondering I can combine somehow the two ideas.
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.
I have got a HTML5 video tag on my page, there you can toggle fullscreen. When I'm pressing my fullscreen button, it's ok. Video is going on fullscreen.
I'm initiating fullscreen by:
var mediaElement = document.getElementById('videoAbout');
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(iOS) {
mediaElement.webkitEnterFullscreen();
mediaElement.enterFullscreen();
}
else {
if(mediaElement.requestFullScreen) {
mediaElement.requestFullScreen();
}
else if(mediaElement.webkitRequestFullScreen) {
mediaElement.webkitRequestFullScreen();
}
else if(mediaElement.mozRequestFullScreen) {
mediaElement.mozRequestFullScreen();
}
else if(mediaElement.msRequestFullScreen) {
mediaElement.mozRequestFullScreen();
}
}
To exit from fullscreen i was trying to use:
var mediaElement = document.getElementById('videoAbout');
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(iOS) {
mediaElement.webkitEnterFullscreen();
mediaElement.enterFullscreen();
}
else {
if(mediaElement.requestFullScreen) {
mediaElement.exitFullScreen();
}
else if(mediaElement.webkitRequestFullScreen) {
mediaElement.webkitExitFullScreen();
}
else if(mediaElement.mozRequestFullScreen) {
mediaElement.mozExitFullScreen();
}
else if(mediaElement.msRequestFullScreen) {
mediaElement.mozExitFullScreen();
}
}
Same with CancelFullScreen(), I was trying to add this to else if statement everything is not working. Console says that the function is not exists (CancelFullScreen or ExitFullScreen).
So here is my question, how to exit from fullscreen HTML5 video? I prefer not to use plugins.
I have my own HTML5 video player and my problem is I can't enter Fullscreen on Android Stock Browser (tested on Huawei ascend mate, htc desire, galaxy s2/s3). It works on another browsers(Chrome, Safari etc). I opened Youtube with Android stock browser and there no problems with this option. I noticed there isn't youtube player, but another standart player.
window.onload=function(){
var video = document.getElementById("video-player");
function enterFullscreen() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
return false;
}
var rF = document.getElementById("fullscreen-btn");
rF.addEventListener("click", function() {
enterFullscreen();
});
};
<video id="video-player" width="640" height="390" src="video.mp4" controls></video>
<button id="fullscreen-btn" type="button">Fullcsreen</button>