I am looking a way to open html page in full screen mode but without user interaction. I have tested fullscreen API to open webpage in full screen but it needs a user interaction. Is it possible i can do it without user interaction like onbodyload etc. Currently i am getting a warning if i try to call fullscreen API onbodyLoad
Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.
have any otherway to solve this.
Related
I'm trying to trigger Pictuer-in-picture (PiP) on a HTML video using the following code:
await videoElement.requestPictureInPicture().catch((error) =>
alert(`PiP failed, ${error}`);
);
This works fine in Safari, but when you use 'Add to home screen' with "display": "standalone" set in the manifest, this code returns an error saying picture in picture is unsupported.
Additionally the built-in PiP control is missing from the video player.
Any ideas why this is happening or how to fix it? I assumed the PWA/standalone version uses the same browser/js engine behind the scenes as regular Safari on the device, but it looks like it may be different?
As of March 2021:
Unfortunately, I don't think there is a way to trigger PiP mode in PWAs (yet).
The API is missing in standalone mode.
I did some research and tried to find some workarounds.
The only thing that somehow works is to force the user to load the page containing the video in Safari. In order for this to work you have to play with the scope param inside your manifest.
Put your PWA in a subfolder like /pwa and set "scope": "/pwa"
Put your Video pages in another subfolder like /videos
Everytime a user navigates to a video page, the scope of your PWA will be left. As soon as this happens, your PWA will leave the fullscreen mode and safari will render its top and bottoms bars.
Inside the bottom bar will be a small safari icon. The user must click it. Safari will open, PiP will be available.
To make the process a little bit smoother you can render a custom PiP button as video control. If the user clicks it, you check if your app is running in standalone mode by checking window.navigator.standalone. If it's false, just request PiP.
Otherwise, you navigate out of your PWAs scope. Use the history API (history.pushState) to change the location without reloading the page. You can add a query param like autopip=true. Finally, you show an overlay describing that the user should click the safari button in the bottom right corner.
Safari will open the page you pushed to the history. In Safari, check if the query param autopip=true is set and use JS to request PiP after video has loaded.
The big gotcha: There is no way to redirect the user back to your PWA.
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 have a series of pages that have "next" and "back" buttons. I would like the user to be able to go fullscreen through the whole flow. Fullscreen is working for individual pages but exits when the user goes back or forwards a page in my flow.
My fullscreen function:
var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
rfs.call(el);
Is there any way to keep the browser in full screen when the user navigates around?
Thanks!
No, you will not be able to do that. Fullscreen mode must be initiated by the user.
From https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Using_full_screen_mode:
In addition, navigating to another page, changing tabs, or switching to another
application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.
You will have to have the user activate fullscreen mode at each new page they navigate to.
There is an alternative. You could create a single-page app. Then the user will only have to initiate fullscreen mode once, and they will be able navigate through different "pages" while remaining in fullscreen mode.
EDIT
but then how come using cmd-shift-f to get into fullscreen allows you to navigate around?
That enables the browser into fullscreen mode, which is different than using the fullscreen API. Using the fullscreen API, you are able to specify an element in fullscreen mode.
In your example the element you are displaying in fullscreen is document.documentElement which is the html element.
That's why, when your navigating in browser fullscreen mode, it stays in fullscreen. As opposed to when you have specified an element to be in fullscreen mode, fullscreen mode will exit when you navigate to a new page,changed tabs, or switch to another application.
Your options as I see it:
Ask the user to enable their browser into fullscreen mode.
Enable fullscreen (via a button which uses the API) on each page navigation (your current problem).
Go with a single-page app design, so the user only has to activate Fullscreen once (via button which uses the API).
Don't worry about fullscreen mode.
For internal application I use solution with fullscreen iframe - simple page like this:
...
<body>
<iframe id="ifr" frameborder="0" width="XXX" height="XXX" src="normal-page-with-links.html"></iframe>
</body>
...
And this page is fullscreen in browser and navigation in iframe content stays in fullscreen.
I have an audio element on a page which is currently being loaded inside an iframe with zero height and width.
I'm using a postMessage from the parent page to tell the child page to play some audio.
This is working great on desktop browsers, however I'm having some trouble on mobile browsers. (I'm testing on Chrome for Android, but I think iOS will have the same problem).
Mobile browsers require that the media play() command is triggered by a user initiated action.
In my case, the user is clicking a button on the parent page to initiate the play, but it seems that the when doing the postMessage, the browser looses track of that.
Is there any way for me to get audio to play inside the iframe without making the page inside the iframe visible to the user?
You could try to directly access the inner DOM from the outside via myIframe.document. That way you can link your JavaScript objects and call a function upon click. That direct call may work better than posting a message.
Limitations may apply according to this question: How can I access the contents of an iframe with JavaScript/jQuery?
is there a javascript script that auto fullscreen mode the browser? example if you visit my site, the browser will auto fullscreen upon load..
Please, don't do this. You shouldn't resize the browser, that's the user's choice to make.
If I have my browser at a certain size, and your site is one of 20 tabs, why should the other 20 be resized?
If you're using window.open() to open a new window and want to specify a size, that's fine, but don't resize the browser. Most browsers actively block this, for a reason.
I looked into this once and like Nick said browsers do not allow you to control setting fullscreen for security reasons e.g. think malicious website recreating the toolbar to trick users. The closest you can get to it is explaining to the user in a ribbon or popup the first time they visit, how to get to fullscreen and letting them make the decision. Then the trick is check for the keypress on f11 assuming that's how you had the user do it.
The only place I wish it was allowed for the site to go fullscreen is webapps.