I was trying to stop a video on Safari for iOS, when the browser goes in background. I was able to do that through Page Visibility API.
On iOS's home screen, if I open the Control Center and press play button, it normally plays the last Safari's content.
What I'm trying to achieve is a Youtube Web mobile-like behavior: it is able to prevent this behavior. If you close Safari with a tab running Youtube, you are not able to press play in the control center and play the content.
I've already tried e.preventDefault() behavior on event.
I've tried to insert flags in pageshow/pagehide (as I found in another SOW answer, but these events seems to not being called on background running.
Also, I wasn't able to control that through the Page Visibility API and inserting flags in it's callbacks: even if events gets called when going in background, "overriding" HTMLMediaElement.play() does not work and the problem concerns iOS's Control Center.
It is like it does not use HTMLMediaElement.play()...
Does anyone have a clue on how to override Control Center's "Play button" behavior from web? Thank you.
It seems like Youtube fully unloads the content when the browser goes on the background and reloads the content starting at the point the user "interrupted".
I decided to follow the same way.
Moreover, the same iOS behavior seems to happen also on Android notification center (when Chrome shows you a tab is reproducing audio).
Related
We all know that by picture in picture mode we can pop out the video and that video will be on the top always, can we do this for a button also?
I am making a web project in which I want to pop out a button for the user and this button should be on top always, it should not go back to any other window, when we work on any other window.
So, do anyone have any idea how can i do it by html, css and javascript.
No, this is not possible. PIP is only supported on video elements, and even then, browser support is close to none https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API. Android devices have an API called "bubbles" that does basically what you want, but it's for native apps, not web pages https://developer.android.com/guide/topics/ui/bubbles.
I'm having a bit of a problem with mobile safari's swipe animation:
I've created a popup window of sorts, for the search functionality (with a similar purpose and look to ebay's mobile site. Go to ebay on mobile, and focus on the search field and it will overlay a sort of popup over the entire site)
The difference, however, is that I've added a pushstate command so that when you open the search popup, it advances the browser history. That way, if a user wants hits "back" on the browser, it'll just close the popup instead of going to whatever previous page the user came from.
Another thing is that I've created an animation for the window's appearance and disappearance. So when you focus on the search field, the popup appears by sliding from right to left, and also goes away in a similar fashion.
Here's the problem, though: iPhone's swiping navigation functionality destroys the sliding effect -
when you open the popup, it advances you forward in the browser's history. Now, if you try to go back by using the swiping functionality, it shows the sliding animation of the previous page into view (iPhone's default), but then, as it's done, my code kicks in (because ultimately, it triggers the popstate event) and also does the sliding animation, so it looks broken. So, as a result, the way it looks is: you swipe to go back to the previous page which shows the search popup being pushed out of the view (just like my animation), and then when you're done, boom, the animation reappears, and plays again.
Ideally, I'd like to be able to detect the swipe functionality somehow. That is, some event, or something in the popstate event to indicate that a swipe navigation is, or has just occurred?
Or perhaps, being able to disable safari's default effect? (to which the answer, I suspect, is a big fat NO)
Is there anything I could do about any of that stuff short of disabling my custom animation when I detect safari, or doing away with the pushstate functionality?
Any advice towards a solution would be highly appreciated.
Is there anyway to prevent changes to web pages such as a live chat or a video feed? Im guessing its a javascript that times out the webpage and then exits it or prevents further entry.
I saw this question: Freeze screen in chrome debugger / DevTools panel for popover inspection?
What I did was I inspected the element, then went to the line of code and then clicked on :hover but the script still executed and locked me out. Any other ways you can think of to prevent changes being made to a page?
Chrome allows you to disable JavaScript on certain pages, to do so click on the globe of the URL bar and it will show some permission options for the site you are. There disable JavaScript.
How to deliberately freeze javascript in chrome (plugin/console)
Found another solution in the link above:
Open Chrome javascript console
Go to "sources"
On the right side, click the little "pause" icon, or press F8 to pause script execution.
On iPhone Safari, when you tap on the clock in the black title bar, a web page normally scrolls to the top.
Does anyone know whether this generates a Javascript event that can be intercepted in order to provide custom functionality - and if so, which one? (The reason for asking is that I want to scroll the contents of an inner div while leaving a pair of header and footer divs unchanged.)
It's certainly not a js event but I saw some sites which deactivated the function somehow(but that's for sure not what apple intended with this function)
I am having trouble in mobile Safari. I have a link that when clicked (or tapped) fires some Javascript but does not navigate to a new page (onclick="return false"). The link is performing the way that I want but when it is tapped the address bar in mobile safari pops down for a second giving the impression that one is navigating somewhere. I need a way to prevent this behavior.
The only solution I have found is to remove the href's from the links in general via javascript.