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?
Related
Let's say I have multiple tabs in chrome and current tab is on Youtube. In chrome, If I click
another tab, the Youtube still works so I can hear the sound. I want to make the Youtube stops
when I click other tab. I mean not destoying the Youtube but stop the page. whenever I come back to Youtube tab, so I can keep run the video.
It is like applications when we use our smart phones. when we click the home button, current application stops and we can reopen our application whenever we want. I wonder how can I approach this in electron.
I'm building a quiz app, basically, I want a sound to start playing when a user enters the web page to start playing the quiz.
I tried using javascript to activate sound on page load but the browser does not allow it, it says:
Autoplay is only allowed when approved by the user.
I tried to use jquery to auto click a button to start sound but it does not still work.
const themeSound = new Audio("theme.mp3");
themeSound.play();
broswer error: Uncaught (in promise) DOMException: play() failed
because the user didn't interact with the document first.
but if I put the function in a button and I press the button the sound plays perfectly.
This restriction is placed on you by the browser.
For example, in chrome, 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.
Disable this feature all together by launching with the autoplay-policy parameter chrome.exe --autoplay-policy=no-user-gesture-required.
Source: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
I've surveyed most of the questions on the web but this still gets me confused....
My question is, how to detect hide/leave event of a website tab in mobile phone browser, my situation is NOT about closing the tab(like pressing the X button at the up-right or up-left corner), and also NOT about closing the whole mobile browser app directly.
(Previously, I have a webpage with a websocket connected to receive the encoded audio content, and then use AudioContext to play the sound)
Below are the two situations I've encountered.
When I press the HOME button and the mobile browser app hides.
When I click a url in the Messenger app or Facebook app of my iPhone, and press the Back button to go back.
the url link is opened in the in-app browser which made by Facebook directly, and when I press the back button on the left-up corner, the view jumps back to the Messenger window or the Facebook timeline.
In these two cases, I have listened beforeunload (and also pagehide event for iOS), but neither one is catched. And I have found that the websocket connection is still connecting and the audio is still playing. It seems like the whole page is still running somewhere(but you cannot see). I also tried listening to a div :visible, but it is still giving me true when I pressed the home button or leave the facebook in-app browser.
Is there still any way to detect these two kinds of situation? I want to turn off the streaming sound and also close the websocket connection.
Just found the answer....
Page Visibility API https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
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 am creating an iPad app for running YouTube video using IFrame.
I referred to many questions regarding YouTube integration in UIWebView and understand that:
Autoplay is not possible
Apple doesn't allow to run video without user interaction (starting).
In my simple app, I have a JavaScript button in the first page, and in the next page integrated YouTube with IFrame.
If I click on the JavaScript button, is there any way to pass this click event to the next page for running YouTube?
Is event bubbling in HTML helps this?
As far as I know no, you can't do anything about it. Event triggering can be easily simulated (some example) without user interaction which can't work on iOS devices (because of the policy you mentioned).
iOS video tag (used by YouTube in this case) is handled by iOS browser. Mobile version is showing placeholder with play button which you need to 'tap'. And only this action can play the video. Notice that you can't even overlay video tag with anything, because it will simply not work.