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).

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).

• javascript
• jquery
• html
• events

• Does the href you are referring to , open the third party website in a new tab or on the same tab.If it's on the same tab , I am afraid you can't save the state of your video and return to it that easily,unless you are making an AJAX call to save the state,using web storage , creating a session and all that. You could take a look at stackoverflow./questions/3648120/… – Harsha Venkataramu Commented Jun 20, 2013 at 6:26
• Sorry I did not think to mention it, it opens a new web page. – Jie Hart Commented Jun 20, 2013 at 6:55

3 Answers 3

window.addEventListener('focus', function() {
  document.title = 'focused';
});

window.addEventListener('blur', function() {
  document.title = 'not focused';
});

You can use this code to get focus and blur 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.

For my blog I needed this functionality, as when I write a new post, I'll have a live rendered version on a secondary screen. So having videos playing as I'm focusing on typing, can be rather distracting. So I needed the same functionality as OP.

Since none of the answers contain a full snippet, then here's the dead simple pure JavaScript snippet I used. To automatically pause all videos, when the browser is unfocused. While resuming all videos, when the browser receives focus again.

var videos = document.getElementsByTagName("video");

window.addEventListener("focus", function() {
    for (var i = 0; i < videos.length; ++i) {
        var video = videos[i];
        video.play();
    }
});

window.addEventListener("blur", function() {
    for (var i = 0; i < videos.length; ++i) {
        var video = videos[i];
        video.pause();
    }
});