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.
Related
This is pretty insane. I've built a VueJS based frontend for an order recieving application. Technically I'm making an ajax call every two minutes to check for orders. If there are any orders I have it play a sound. This I've implemented by calling play on an hTML audio element.
The problem is that if the browser tab is not focused or if the user is on another tab. The sound doesn't play. I've even changed the code to instead of playing a sound file - refresh a hidden iframe that loaded the sound file. But that also doesn't seem to work if the browser is out of focus. What exactly am I missing here.
-- EDIT
My situation is that - the user would have multiple browser tabs open and the only way to alert the user would be via a unique sound that would be played. I know it can be done because there are a number of other sites that do this somehow. I'm not sure how. Is there a way to force focus back to the tab using javascript?
I designed a website for a client and had a developer (better than me) put together some Javascript which shows a video on hover. Works fine on all browsers except safari; it has a strange quirk.
The first time the page loads and the user performs the hover, the video plays no problem. If the user clicks on another tab (in the same browser window) and tabs back to the page, the video doesn't show. Just a box where the video should be.
Here's the page where you can see it in all its glory: removed
Video is MP4 H.264.
What the hell is the problem? The developer can't solve the mystery. Can you?
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?
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
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.