We Keep Coding

Angular PWA App not working Javascript requestFullscreen() for IOS Device only

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?

Making video fullscreen automatically when the device orientation is landscape with javascript

I have a video that if you press a button it becomes fullscreen. I need help making the video fullscreen automatically when the device is in landscape orientation. I have tried many ways but none have worked.
Here is my code:
var elem = document.getElementById("video");
function becomeFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
/* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE/Edge */
elem.msRequestFullscreen();
}
}
<video id="video" width="600" height="800">
<source src="videoplaceholder.mp4" />
</video>
<button id="button" onclick="becomeFullscreen()">Fullscreen</button>

You need to check the window.orientation property inside the orientationChange handler. Inside the event handler of orientationChange event, check the window.screen.orientation property. If it's landscape make video fullscreen.
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

Add below code in your Javascript
window.addEventListener("orientationchange", function(event) {
var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;
if ( ["landscape-primary","landscape-secondary"].indexOf(orientation)!=-1) {
becomeFullscreen();
}
else if (orientation === undefined) {
console.log("The orientation API isn't supported in this browser :(");
}
});

Fullscreen Chart.js while keeping the chart quality

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.

Auto-close video in fullscreen mode on iPad

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

Custom HTML5 video controlls - FULLSCREEN

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.