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
Related
I'm writing chrome extension, I made a button on an active tab(AT), if you press it, it sends message to content script on a specific non-active tab(NAT) and emulates there "click" event to play some audio content (which it gets by http request). But I have a problem - after I press button on AT, nothing is played. Then I activate NAT - and audio plays, so playing is defered. After that I go back to AT and press the button again - and audio plays without breaks.
The question - Is there any methods to force playing audio on non-active tabs?
Or maybe short-time activation of specific tab would be the best way?
It seems to be a common complaint that mobile devices won't autoplay video or audio. According to the Apple Developer Library it is disabled on purpose:
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.
What is allowed is for a direct user action to trigger the play event. My problem is that I have thumbnails of videos which when clicked load a video element in their place and need to play once they are loaded. On mobile the user has to click twice to make the video play which is not good. I am frustrated because my user actually is triggering a play action but there are a few other events which take place in between. I started testing a different user-triggered-event to see what the scope or limitations of what apple calls a "direct user action" are.
I found that this code triggered the play event:
$(".clickElement").click(function(){
$("video").get(0).play();
});
while this did not:
$(".clickElement").click(function(){
setTimeout(function(){
$("video").get(0).play();
},0);
});
the same went for different timeout durations and when setInterval was used instead.
My question is what / how does apple define a direct user action? Obviously timeouts and intervals aren't direct enough. Is there a way for me to trigger the play event "directly" from the user and allow enough time for my video element to enter the page?
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.
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.
I've made a popup div that shows a video if you press a button. If you press Esc, the div is hidden again and the video is removed. (Using JWPlayer in Flash.)
If you click on the JWPlayer video, Flash gets the focus and JavaScript can't listen for keypresses on the document anymore. Is it possible to make JavaScript get the focus after you've interacted with the JWPlayer video player, so that you can still press the Esc button after for example pausing the video?
No there isn't, once focus is given to flash, the only way to get keypresses back is to click somewhere else.
This happens because flash is under a completely different process, it is responsible for everything within its 'window' and it doesn't bubble its own events back to JS