Develop Reference

Canvas fullscreen on mobile devices causes power down

How can i make a Canvas Element fullscreen and bypass the power saving feature of the mobile device. My canvas is playing a video but the mobile phone go's into power saving mode after a few seconds. Is there some setting somewhere?
this is my fullscreen function
let openFullscreen = (elem) => {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}

A possible reason why this could be happening is because the video is muted

SVG fullscreen Javascript working correctly in FireFox but not Chrome

I'm experiencing an error when trying to make an SVG tag fullscreen using Javascript on my site. I've been told by others on the team that this used to work correctly, but has broken at some point in the past. On Firefox, the code works perfectly, and the SVG image becomes fullscreen, but on Chrome, the whole page goes fullscreen, and the SVG gets moved to the bottom left corner of the screen and seems to be placed on top of some of the other elements of the page.
I'm using the following code to handle the fullscreen action, which is hooked up to a button event listener:
function fullscreen() {
var element = document.getElementById("myFullscreenSVG");
var isFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
if (!isFullScreen) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) { /* Chrome, Safari & Opera */
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
} else {
console.log('Failed to enter fullscreen mode on dependency visualization SVG');
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
} else {
showAlert("Exit fullscreen failed; Press [ESC] to exit");
console.log('Failed to exit fullscreen mode on dependency visualization SVG');
}
}
}
I've tried everything I could think of, such as adding CSS for webkit-fullscreen elements to make width and height 100%, position fixed, and top 0, as this seems to be what others have done, but so far nothing has worked. What might be causing this to work incorrectly on Chrome? Any ideas would be greatly appreciated.

Fullscreen toggle doesn't work on iOS mobile/tablet (Safari, Chrome and Firefox)

I have a problem for a fullscreen mode in a webapp on iOS mobile device (iPhone and IPad, all versions).
I have a button which call a toggle fullscreen function. This function work on all devices other than iOS.
My function :
function toggleFullScreen(e) {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement && !window.navigator.standalone) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
$('body').css({'height': screen.height});
fullSreen = true;
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}else if(document.cancelFullScreen){
document.cancelFullScreen();
}
$('body').css({'height': 'auto'});
fullSreen = false;
}
}
It does not work on Safari, Chrome and Firefox on iOS mobile/iPad, but the function is call (i try it with some alert message). I do not understand why, thx in advance !

Please try the below code. It's working fine in my system in all browsers of the iPhone.
HTML
<div class="video-banner-div">
<video class="video-bg" id="home_banner_video" playsinline="" autoplay="true" preload="">
<source src="url_of_your_video.mp4" type="video/mp4">
</video>
</div>
JS
vid = $('.video-banner-div video').get(0); // get the element of video tag
$(".full-screen-icon").on("click", function () {
// on click of the button call the toggle function
toggleFullScreen();
});
function toggleFullScreen() {
if (vid.requestFullScreen) {
vid.requestFullScreen();
} else if (vid.webkitRequestFullScreen) {
vid.webkitRequestFullScreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.msRequestFullscreen) {
vid.msRequestFullscreen();
} else if (vid.webkitEnterFullscreen) {
vid.webkitEnterFullscreen(); //for iphone this code worked
}
}

You can verify at http://caniuse.com/fullscreen that iOS Safari does not offer a API for fullscreen, check this asnwer for more information
Full screen api HTML5 and Safari (iOS 6) . But html video elements can go fullscreen.
Take a look at https://brad.is/coding/BigScreen/ , is a good lib to handle fullscreen events.

IOS10 fullscreen safari Javascript

I'm trying to make a div go fullscreen, when a user clicks a button on a website.
Only thing is, every browser seems to want to work except for Safari on IOS.
What will I need to do to be able to make it fullscreen? I've tried researching, but unable to find anything.
Heres my current code:
<script type="text/javascript">
function goFullscreen(id) {
var element = document.getElementById(id);
var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
var docElm = document.documentElement;
if (!isInFullScreen) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>

As mentioned on many posts, there is no way to switch to fullscreen on IOS >=10 in Safari and Chrome. It is because the Fullscreen API is not supported:
Can I Use Full Screen API
open webpage in fullscreen in Safari on iOS
Full screen api HTML5 and Safari (iOS 6)
You have two possible tricks:
Inform the user to switch to landscape mode. Indeed, you can't hardcode this and iOS Chrome can't do this too (Prevent orientation change in iOS Safari).
if your webpage is exported in a web app and you configure the meta balizes correctly (Optimizing Full Screen Mobile Web App for iOS).

Event is not firing after updating Android OS version 6.0.2

I have a video start and end event firing on video starting and completion. It is working fine until I updated to OS Version 6.0.2 on Samsung Galaxy S5.
It's working fine on chrome, firefox even on Iphone browsers but not on Android native browser
Code:
$(document.getElementById('movie')).on('fullscreenchange webkitfullscreenchange webkitbeginfullscreen webkitendfullscreen', (
function (e) {
$(document).off('fullscreenchange mozfullscreenchange MSFullscreenChange');
$scope.onFullScreenChange(e.type);
}));
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (videoElement.exitFullscreen) {
videoElement.exitFullscreen();
} else if (videoElement.webkitExitFullscreen) {
videoElement.webkitExitFullScreen();
} else if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}