How to use picture in picture mode for a button - javascript

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.

Related

How does youtube web prevent playing from control center on safari iOS

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).

Add play button to toolbar

I have recently seen a play button in the tab menu which triggers an action in that page. (When opening a youtube video in a new tab)
Here is a picture of it:
Does anyone know how to add such a button?
(Picture made in Firefox Developer Edition - 57.0b13)
That is a browser feature, you can't "add" it, but it will automatically be displayed when you have an audio or video element on your site that is playing sound, giving users the possibility to mute and unmute sound for the specific tab.
You don't have to implement the icon by yourself. Chrome or any other modern browser automatically displays that icon when that specific tab makes a sound.
But if you want to implement a button by yourself,
You would want to alter the 'title' of the page with a Unicode icon when you start playing a sound. Not very practical method though.

How to use mobiscroller *instead of* input?

I'm want to use the mobiscroll selector (demo | source) on my (desktop oriented) website. I've got a basic version working here. The way that works is that when you click the input at the top, it loads the (enormously sexy) spinner as an overlay with a dark layer over the rest of the site (try it out).
What I would rather have instead of this behaviour though, is that on my desktop website it shows this spinner instead of the input. So not as an overlay, but integrated with the rest of the design without needing to click to bring it up. That way the user is saved one click and it is immediately clear what's expected of him or her.
Does anybody know how I would be able to use this spinner instead of the input, so that it integrates nicely with the rest of my page instead of working as some sort of pop-up/overlay?
All tips are welcome!
You can use it display: 'modal' on mobile and use it in display: 'inline' on desktop. You'll find more info about the display option that you can pass on init in the documentation.
Now you just need to detect if your users are browsing from a mobile device or a desktop. You have a couple of options there, this would be one approach.

Maximizing the current window in javascript

Is there a way I can maximize a currently minimized window from Javascript? Here's my situation:
I have a series of links that all target the same external window (e.g. "MyNewWindow"). When I click a link, a new window pops up. If I click another link, the page pops up in the same window as expected. If I minimize the "MyNewWindow" popup, I'd like to be able to click another link and have that window maximize.
My approach was to put something on the onLoad part of the body so that when the page is refreshed it will automatically "maximize" if it is minimized. Note: Using window.MoveTo() and window.resizeTo() doesnt seem to do the trick (the window stays minimized).
Thanks!
For all of you know-it-alls, there are perfectly good reasons to want to know how to do this. Here's the reason I needed this:
I'm deploying SCORM modules to a variety of Learning Management Systems (LMSs)
One LMS that a client is using launches the module in a small (600x400) window, with the user controls to maximize or resize said window DISABLED
The client doesn't know how to change this launch behavior
My only option is to try to maximize via javascript, because the idiots who made the LMS took away the user's ability to manage their own windows.
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);
This may not work in IE depending on the security zone your page is falling under, and it may not work in Chrome at all. But for a corporate environment in an intranet, it has a good chance of working.
Don't do this, you are not allowed to do this by most modern browsers for a reason.
In a tabbed environment you're not messing with only the window you may have created, but all of my tabs, that's unacceptable. It's the user's computer, user's browser, it's the user who chose to go to your site...let them size the window the way they want it, doing anything else breaks their experience...and their trust in your site.
The behavior you're looking to emulate is what your run-of-the-mill malware does...re-think your approach, please. For example focusing that window is appropriate for what you want, let the default behavior of the browser take over from there, like this:
var thatWindow = window.open(url, "linkWindow");
thatWindow.focus();
try to use window.open(url,fullscreen=yes);
if you out fullscreen=yes than while clinking on link automatically

For my website, is it possible to create a button where users can click on it to create an ICON on their iPhone desktop?

User clicks the button, and an icon is added to the iPhone desktop.
If possible, can I activate this button manually?
There is no way for you to do this, because otherwise every developer would do this by invoking it with an automated script and then everyone would just be annoyed. You will have to direct users to press the + sign and then Add to Home Screen.
I believe this is not possible. However a common approach is to detect whether running in an iPhone browser (not as an HTML app) and show a huge arrow pointing at the + sign.
You can take a look at this tool, which is a nice JavaScript snippet giving the user a hint on how to add your homepage as a Icon on your homescreen:
http://cubiq.org/add-to-home-screen
For a live demo visit this page with your iOS-device:
http://cubiq.org/dropbox/a2h/examples/simple/

Categories