We Keep Coding

Force autoplay video to continue when switching tabs on iOS

I have an HTML5 video tag with the attributes autoplay loop muted playsinline. In iOS the video stops playing, if the user switches to another browser tab. However it doesn't start again when switching back.
I tried listening for different events such as window.onfocus() and then manually starting the video with the play() method, however these events do not seem to fire, until the user actually clicks inside the document again, and so they are virtually useless in this case.
This site has an HTML5 video tag in the hero: https://www.stoxenergy.com/en/technology/
However that one keeps playing, even when the user switches tabs.
I can't figure out how they do it. Any ideas?

How does youtube web prevent playing from control center on safari iOS

I was trying to stop a video on Safari for iOS, when the browser goes in background. I was able to do that through Page Visibility API.
On iOS's home screen, if I open the Control Center and press play button, it normally plays the last Safari's content.
What I'm trying to achieve is a Youtube Web mobile-like behavior: it is able to prevent this behavior. If you close Safari with a tab running Youtube, you are not able to press play in the control center and play the content.
I've already tried e.preventDefault() behavior on event.
I've tried to insert flags in pageshow/pagehide (as I found in another SOW answer, but these events seems to not being called on background running.
Also, I wasn't able to control that through the Page Visibility API and inserting flags in it's callbacks: even if events gets called when going in background, "overriding" HTMLMediaElement.play() does not work and the problem concerns iOS's Control Center.
It is like it does not use HTMLMediaElement.play()...
Does anyone have a clue on how to override Control Center's "Play button" behavior from web? Thank you.

It seems like Youtube fully unloads the content when the browser goes on the background and reloads the content starting at the point the user "interrupted".
I decided to follow the same way.
Moreover, the same iOS behavior seems to happen also on Android notification center (when Chrome shows you a tab is reproducing audio).

Add play button to toolbar

I have recently seen a play button in the tab menu which triggers an action in that page. (When opening a youtube video in a new tab)
Here is a picture of it:
Does anyone know how to add such a button?
(Picture made in Firefox Developer Edition - 57.0b13)

That is a browser feature, you can't "add" it, but it will automatically be displayed when you have an audio or video element on your site that is playing sound, giving users the possibility to mute and unmute sound for the specific tab.

You don't have to implement the icon by yourself. Chrome or any other modern browser automatically displays that icon when that specific tab makes a sound.
But if you want to implement a button by yourself,
You would want to alter the 'title' of the page with a Unicode icon when you start playing a sound. Not very practical method though.

Can you have a youtube video exit fullscreen on video complete

For youtube videos you there is a button to exit fullscreen for both the Flash and HTML5 versions. Is there a way to programmatically exit fullscreen on video complete using Javascript? So basically once the video ends I want it to exit fullscreen mode.

What you need is the following:
document.exitFullscreen()
Here you can read more about the Fullscreen API

The short answer, is NO. At the moment, there is no way to programatically exit from Youtube player 100% safe, But there is a workaround that IS 100% safe.
Basically what you need to do is follow a series of simple steps and it will work fine in ALL browsers:
Step 1: Put your Youtube code inside an invisible DIV, lets say it is called "codeholder".
Step 2: Put a visible DIV as holder for the invisible DIV. This is where the code will go, let's say its called "ytPlayer".
Step 3: When the page loads, copy the invisible DIV into the visible DIV. This can be done for example as follows:
document.getElementById('ytPlayer').innerHTML = document.getElementById('codeholder').innerHTML;
Step 4: I'm assuming you are using the Youtube API, so, when the YouTube.PlayerState.ENDED event is fired (or whenever you want), copy the invisible DIV into the visible DIV. This will force the browser to close the player to close fullscreen and it will display the original player.
I like to do this on YouTube.PlayerState.ENDED event because this is a destructive way to close the player, so, the video will NOT continue playing after "exiting" full screen.
However, the Youtube API allows you to "read" the playing position, and you can restore the playing position easily with some light coding. There will be a pause of a fraction of a second though.

<cfmediaplayer> how to pause the player through javascript calls?

I'm implementing the Coldfusion <cfmediaplayer> tag for playing flash videos on a touch-screen based local web application. I am aware that by default the user is able to simply tap the video itself to pause/play the video.
I am also aware that <cfmediaplayer> has a built-in control panel through the use of the controlbar="true" attribute, but the problem is the buttons are way too small for a touchscreen and I don't want the user to be able to access any other controls.
To combat this, I disabled the controlbar and tried to add a custom play/pause button below the player to essentially mimic the actions of touching the video itself. My problem is that I cannot find a way to simply pause the video... the only Javascript functions I could find are:
ColdFusion.Mediaplayer.stopPlay and ColdFusion.Mediaplayer.startPlay
The issue is that ColdFusion.Mediaplayer.stopPlay restarts the video from the beginning and not from where the video currently is.
Is there any way around this? As a last resort I will simply stick the play/pause button in the corner of the video to hint to the user that they can touch the video screen to enable those actions, but I'd rather have a separate button so as not to obstruct the user...
Thanks in advance.

Thanks to #Miguel-F for his help.
We have figured out that <cfmediaplayer> does NOT have pausing functionality by default, and only has the ability to Play or Stop the video entirely and restart from the beginning of the clip.
Looks like workarounds are required (or other methods of showing the videos entirely).