Develop Reference

How do mobile websites pause videos when other apps start playing audio?

Some mobile sites, like YouTube and Twitch, will pause html <video> elements if other apps (like Spotify, or a podcast player that puts media controls in the notifications) start to play audio.
Interestingly, these don't just take audio focus - they also stop playing if they can't obtain it. As an example, I'm using firefox for android, so I tried disabling its ability to take audio focus with adb:
cmd appops set org.mozilla.firefox TAKE_AUDIO_FOCUS ignore
But now, videos just immediately pause, since it can't pause the other audio source.
How do the sites detect this? I attached a debugger to my phone and looked through the docs but I didn't see anything in either place.

I'm not sure about how this specific flag "TAKE_AUDIO_FOCUS" is interpretted, but modern Android focus management is based on "requesting" (not taking) audio focus. Apps would request it and either get it immediately or listen for updates from the AudioManager as to whether they got it. Similarly they will get updates when someone else requests (and then subsequently receives) focus, and they should react accordingly (i.e. pause/duck themselves). Presumably the apps you mention have asked for audioFocus and were denied it and then hadn't received focus yet, so they just chose to stay paused rather than start playing audio/video and blare out over the app that hadn't released focus yet.
source: https://developer.android.com/guide/topics/media-apps/audio-focus

HTML/JS - Play audio file on page load

I would play an audio file (on loop) after I open my website.
I know browsers have restrictions about autoplay, but is it possible to autoplay any audio using JavaScript?
Thank you!

There currently isn't any guaranteed way; MDN has the following general guidance:
As a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true:
The audio is muted or its volume is set to 0
The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
If the site has been whitelisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
If the autoplay feature policy is used to grant autoplay support to an and its document.
Otherwise, the playback will likely be blocked. The exact situations that result in blocking, and the specifics of how sites become whitelisted vary from browser to browser, but the above are good guidelines to go by.
Current policies of Chrome and Safari are that you can not just play audio once the page has loaded (unless it's muted).
Chrome has the following policies:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Safari has the following guidance regarding autoplay:
Websites should assume any use of or requires a user gesture click to play.
It’s important to detect if auto-play was denied, since users now have the ability to turn off all forms of auto-play, including silent videos.
Auto-play restrictions are granted on a per-element basis.

Youtube Javascript API not allowing playback control on mobile even when initiated through user input

In the following fiddle there are external controls for the youtube player. They work fine on desktop browsers, however in a mobile browser the play button fails to start the playback of the video.
https://jsfiddle.net/wittjosiah/oLxv6ep2/
According to the Apple Developer Library:
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
However, in this scenario the play() method is user-triggered but is still failing to initiated playback on both the iPhone simulator and my iPhone 6S.
Am I missing something? Is there a reason this isn't working? Youtube's mobile site initiates playback from a user-action so it must be possible. Any help is appreciated.

YT.Player does not guarantee that playVideo() will work in all mobile environments.

Try setting the preference MediaPlaybackRequiresUserAction to true

How can I detect whether or not a device uses it's own video player rather than the HTML5 player?

How can I detect whether the actual HTML5 player is being used, or if a 3rd party player is hi-jacking the video outside of HTML5?
iPhone doesn't use the HTML5 video player (thanks Apple) but rather uses its own player full-screen. This means any apps, regardless of responsive design, don't work if they expect an interface to be involved with the video.
So I need to know this in order to either make my app work differently with devices that do something similar to iPhone, or at least fail gracefully.

As I told in you in my comment, it seems that is not possible.
So I am afraid that you will need to go for agent sniffing. Check this post to see how to identify an iOS device.

Set JWPlayer User-Agent?

Is it possible to set the user agent in JWPlayer ? I have a streaming link that checks to see if the user is on an ipad, and will only work if this is the case. In VLC, I can set the player declare itself an ipad. Just wondering if this is possible with JWPlayer