Develop Reference

Will calling $.click() cause video.play() to be allowable by Webkit/IOS/Android

I want to have a HTML5 <video> autoplay on Android and IOS browsers.
I cannot have the user do a button click, however my interaction flow is this:
The user enters the video playing page by pressing a submit button on a form.
Then the user waits for the video to start playing when a program on the server tells it to (checked via AJAX).
The video should autoplay at this point.
This is ethical because in step 1 there is user interaction. However, webkit states that:
A note about the user gesture requirement: when we say that an action must have happened “as a result of a user gesture”, we mean that the JavaScript which resulted in the call to video.play(), for example, must have directly resulted from a handler for a touchend, click, doubleclick, or keydown event.
In my application, the video autoplay is not directly triggered by the button click, but it is an AJAX success handler.
I could change my approach here and have AJAX tell the script how many seconds before starting and wait with a Promise, but that may lock up the user interface, if I'm not mistaken. This way, the call to play() would be inside the click event handler.
I could write an click event handler:
<video id="video" src="video.mp4">Browser Unsupported</video>
<button id="button" style="display:none>invisible</button>
<script>
$('#button').click(function() {
$("#video").get(0).play();
});
// Then click the invisible button...
$("#button").click();
But I'm not sure if this will work because the click event is not genuine.
Will the above code example work to play the video automatically on Ios and bandroid devices, or is there another way?

mute all audio when users tab away from the site

Is it possible to mute embedded ( tag) audio when the user leaves the site (goes on another tab). I've seen this with other websites where they change their title when the users leave. I'd expect you'd need a bit of javascript and jquery to do this.

You can listen to the blur event on the window object to detect when the user switches tabs or apps:
window.addEventListener('blur', () => console.log('blur'))
Take care though, as this fires on all occasions when the window loses focus, including for example, pressing ctrl+f to open the find dialog or clicking on an extension popup.
As to audio, assuming you are using standard html5 <audio> element, you can set the muted property to true:
document.getElementById('my-audio-tag').muted = true

What variable/attribute changes when you hit play on an HTML5 video controller?

I'm using HTML5 video tags in my webpage. I have a small "Watch Video" button that opens a modal displaying this video. Everything works as intended. I am, however, trying to determine what changes in the HTML document (or possibly the DOM?) when I hit the controller's play button.
The goal in determining this is to have the video begin playing automatically once the modal is revealed which I plan to do with a small JS script. Also, when I close the modal window, I will have it disappear.
I did a few Google searches and started to see people discussing creating custom controllers for these videos which I feel is unnecessary - I want to utilize/modify what is already in existence.
To summarize: What is happening when I hit the play/pause controllers in an HTML5 video?

The W3C has a handy <video> interface that shows how the properties and events on a video element change and fire as you interact with it.
As you can see from that demo, the major things that occur when you play a video are:
the video's paused attribute is set to false
the video emits a play event
If the video has preload value of "none" (as this one does), then the video will begin loading when the user presses play, which triggers a few other events, e.g, the canplaythrough event will eventually fire, the buffered attribute will continue to change as the video loads, etc.

How to pause a video when focus leaves my web page (html5)

I want to be able to pause a video when the user clicks on an href that links to a third party web site and start it again when focus returns. I have searched for events but am unable to find one that works eg onunload onchange. I have an event handler that starts a new video when one stops and scrolls down the page (javascript) but I am stuck on this problem. I tried an href that called a javascript function but it became messy (the href is generated dynamically).

window.addEventListener('focus', function() {
document.title = 'focused';
});
window.addEventListener('blur', function() {
document.title = 'not focused';
});
You can use this code to get focus and blue event for window tab and call your play and pause functions from here.

If the third party link opens in the same tab (as opposed to a new tab or popup window) you won't be able to just pick up where you left off until you save it.
You could potentially store current state data on the client using html5 web storage. You would want to fire this on the window.onbeforeunload event. When they return just check for any stored data to resume playback with. This obviously isn't supported on all browsers yet. If saving server side is an option you could do that as well.
web storage spec from w3 here
web storage currently supported by browsers here
If, however, the page never unloads, it just loses focus, you could just add a listener on the page's html to trigger pause on the blur event. Resume on focus.

Any Javascript event occurring when user clicks Stop load button?

I want to run some Javascript when the user clicks the Stop Load-button (red X in most browsers) or hit Esc on the keyboard, which usually does the same.
I've seen questions here covering the Esc button by hooking onto document.body.onkeyup, but couldn't find anything covering mouse click on the Stop button.

Internet Explorer has a document.onstop event that is fired, but other browsers don't seem to support that. Note that it's fired when the user clicks Stop or hits Esc, OR if the user navigates to another page during page load, which has the same effect.
I don't believe there is a reliable way to trigger an event on clicking Stop in other browsers. Perhaps it would be possible to do something like: keeping the connection to the server open (as in the Comet approach), streaming some sort of keep-alive down the connection, and detecting if the stream ends (as I assume it would if the Stop button were clicked).

If it's images that are still getting loaded on the page, you can use the onabort event to monitor for the stop load.
Monitoring for the mouse click should be impossible, as it doesn't happen inside the current browsing window.

There isn't any cross browser way of doing this.
However, IE has a special event, onstop which occurs on the body when the stop button is pressed. You cannot override the stop button functionality (that is, you cannot cancel it), but you can detect that it has happened in IE.