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

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.

Related

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

Detect browser Back Button VS Reload/Refresh

window.onbeforeunload = goodbye;
I currently use the code above to detect the onbeforeunload event, but I'm wondering if there is a way to use the event object that was passed in to determine if the event was fired due to the back button being pressed or if it was from the user attempting to reload the page.
There is no life or death scenario here as Chrome (possibly others) tailors the text of the button.
I'd simply like to the tailor the message that I display...and it's bugging me that I can't find it when looking through the object in Chrome.

in html, window.onpopstate fires both on loading and on back arrow - how to know?

on my page, I have a listener on window.onpopstate
I wish to trap the user's back arrow and run my own routine
but window.onpopstate fires when 1) the page is initially loaded, 2) is reloaded, as well as when 3) user presses the back arrow
I could create a state space flag and check it. but more natural would be to determine from the event itself what's going on.
is there anything intrinsic way to determine whether the event was fired from loading or back button? when I inspect the two events, they look pretty much the same.
The window.onpopstate event is triggered when the user navigates between two history entries for the same document, i.e. every time the active history entry changes.
It is fired when clicking on back button, on page load and also on page reload (Firefox doesn't emit this event on page load). So, the behavior you are seeing is intended.
And, for the back button, i guess there is no any way to detect the back-button-click using this event.
You can compensate for popstate bugs in browsers. When someone uses my editor and hits the Backspace button sometimes that triggers navigation (this should not be a default but not everyone is qualified for their position) so I cancel it (yes, you can) and then fix the address bar with history.go(1);. I'm not posting dependency related code here as various people will need this for different contexts but it forms the basis of what you'll need.
window.onpopstate = function(e)
{
if (id_('editor') && is_node_parent(document.activeElement,id_('editor')))
{
e.preventDefault();
history.go(1);
}
}

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.

window.unbeforeunload show div IE7 problem

Currently I am developing a web application for which I am using a pre-loader icon. What I want is that the pre-loader becomes visible every time the user navigates to another page or refreshes the page. So far I have the following solution:
window.onbeforeunload = function() { $("applicationdisabler").show(); };
For Safari and Firefox it works fine when the user clicks a link or refreshes the page. However in IE7 the div only becomes visible when the user clicks a link and NOT when the user refreshes the page.
The user can refresh the page by hitting F5 (on Windows) or any other possible way the browser provided.
Of course I have been looking for some workarounds already. The following code shows the alert in IE7, but the div still doesn't become visible.
window.onbeforeunload = function() { $("applicationdisabler").show(); alert("come on!"); };
The code of my div:
<div id="applicationdisabler"><img src="images/preloader.gif" /></div>
Hopefully someone can help me out.
You need to put the # before the id on the jQuery selector:
$("#applicationdisabler").show();
Why not use just use the onLoad listener instead? Although it would be slightly slower it should be more reliable.
Actually after a bit of looking around I'm not sure modifying the DOM makes any sense unless the onBeforeUnload handler returns false first - i.e. forces the user to stay on the same page.
As I understand it the onBeforeUnload event is fired just before the page is unloaded, so if you don't return false the browser will unload the page and DOM, and any JavaScript executed after that will be pointless.
That doesn't quite explain why JavaScript isn't executed properly in the onBeforeUnload function, but from what I've seen sites only use the window.alert or window.prompt dialogs to ask the user if they want to leave the site, and then often executing JavaScript if the user decides to stay.
Hence I'm guessing that some browsers may not allow DOM manipulation when this event is fired - since if the page is unloaded any DOM manipulation done is completely pointless.
So either:
Return false in your onBeforeUnload method, and then show your preloader (although this will stop navigation to the next page)
Use the onLoad event of the next page to show the preloader image instead
Also note: Opera versions 9.5 and below do not support this event (I'm unsure about later versions) but GMail does manage to catch the back button in Opera.
Possibly related is this security warning for IE7's implementation of the onBeforeUnload event - it's possible Microsoft patched it in a way that prevents the things you're trying to do. And I know IE6 and below don't allow commands like document.location='' in the onBeforeUnload handler for security reasons.

Categories

Resources