We Keep Coding

JS play button for HTML5 does not work on iOS mobile

I'm trying to get an HTML5 video to play on mobile iOS. Desktop & android work fine.
Clicking the button enters fullscreen mode and plays the video.
I'm seeing reports that some cannot click the button at all though the video thumbnail is loading. The breakdown is currently:
iOS 16.0.2 not working
iOS 15.2.1 works using safari but not firefox or chrome
HTML snippet
`
<div class="video-player">
<video loop="true" width="400px" preload="auto" playsinline="true" controls="true">
<source src="media/video.mp4" type="video/mp4" />
<source src="media/video.webm" type="video/webm" />
<p>Your browser doesn't support HTML5 video. Here is
a link to the video instead </p>
</video>
<button><img src="img/play_video.svg"></button>
</div>
Script in Use
/* Get elements */
var brimmingVideo = document.querySelector('#brimming .video-player video');
var brimmingFullscreen = document.querySelector('#brimming .video-player button');
var brimmingIcon = document.querySelector('#brimming .video-player button img');
/* Build out functions */
// toggle play/pause
function brimmingtogglePlay() {
var method = brimmingVideo.paused ? 'play' : 'pause';
brimmingVideo[method]();
}
// Create fullscreen video button
function brimmingtoggleFullscreen() {
if (brimmingVideo.requestFullScreen) {
brimmingVideo.requestFullScreen();
brimmingtogglePlay();
} else if (brimmingVideo.webkitRequestFullScreen) {
brimmingVideo.webkitRequestFullScreen();
brimmingtogglePlay();
} else if (brimmingVideo.mozRequestFullScreen) {
brimmingVideo.mozRequestFullScreen();
brimmingtogglePlay();
} else if (vid.webkitEnterFullscreen) {
vid.webkitEnterFullscreen();
}
;
brimmingVideo.controls = true;
brimmingVideo.muted = false;
brimmingIcon.className = "hide";
}
// what happens when you exit fullscreen
function brimmingexitHandler() {
if (document.webkitIsFullScreen === false) {
brimmingtogglePlay();
brimmingVideo.muted = true;
brimmingVideo.controls = false;
} else if (document.mozFullScreen === false) {
brimmingtogglePlay();
brimmingVideo.muted = true;
brimmingVideo.controls = false;
} else if (document.msFullscreenElement === false) {
brimmingtogglePlay();
brimmingVideo.muted = true;
brimmingVideo.controls = false;
}
}
/* Hook up event listeners */
// Click events
brimmingFullscreen.addEventListener('click', brimmingtoggleFullscreen);
// Exit fullscreen event
brimmingVideo.addEventListener('fullscreenchange', brimmingexitHandler, false);
brimmingVideo.addEventListener('mozfullscreenchange', brimmingexitHandler, false);
brimmingVideo.addEventListener('MSFullscreenChange', brimmingexitHandler, false);
brimmingVideo.addEventListener('webkitfullscreenchange', brimmingexitHandler, false);
`

Three things are causing this problem:
At javascript, removing return false; of the event listener.
At the stylesheet, the element which calls the action must have the property cursor: pointer;. Probably Apple put this requirement in these calls for best feedback on a user interface.
Again at the stylesheet, we can't set display: none; for hidden input because some browsers don't accept clicks on elements that aren't displayed. (This doesn't apply for you)
Also, the general rule is to "grab" DOM elements only after DOM was loaded!

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

request Fullscreen does not work on Android Stock browser

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>

Getting an embedded YouTube video to play after it's been closed & re-opened on iOS7 Safari

Relatively new to JS here. I've created a button that embeds a YouTube video on the page when you click it, and the user has the ability to close it. On desktop and Android OS, it can be closed and re-opened as many times as the user wants. However, on iOS, the video only plays the first time.
I believe this issue is caused by the fact that Apple doesn't want the video to play without the user's permission, so when you click the "play" button it brings up the video - but the default YouTube play button itself is not there when the video is closed and re-opened.
This should be most of the relevant code.
VideoPlayer = new VideoPlayer('Header', 'xi2-7FCuDdg');
$("#HomePlayButton").on('click', function () {
disable_scroll();
VideoPlayer.play();
$("#Header").append($('<img src="/images/close.png" />'));
$("#VideoCloseButton").on('click', function () {
VideoPlayer.stop();
VideoPlayer.hide();
enable_scroll();
$("#VideoCloseButton").unbind('click');
$("#VideoCloseButton").remove();
return false;
});
});
this.play = function () {
if (!Initialized) {
// This autoplays the video
Init();
Initialized = true;
} else {
if ($("#" + YouTubeElementId).css('display') == "none") {
$("#" + YouTubeElementId).css('display', 'block');
}
YouTubePlayer.playVideo();
}
}
this.stop = function () {
YouTubePlayer.stopVideo();
}
this.isPlaying = function () {
return (Initialized) ? YouTubePlayer.getPlayerState() == 1 : false;
}
this.hide = function () {
$("#" + YouTubeElementId).css('display', 'none');
}
this.show = function () {
$("#" + YouTubeElementId).css('display', 'block');
}
I'm assuming the easiest way to solve this would be to entirely destroy the iframe and make a new one every time the video is closed, but I was unable to successfully implement that.
Glad to post more code if it's necessary.