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.
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 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.
I have a webpage that uses the history api to navigate between pages without complete page refreshs. It all worked great on desktop and mobiles until the last chrome update (38.0.2125.102) on Android (4.4.2).
The problem is with the full screen mode of the browser: when the user comes to our site there's a link to a video gallery, he clicks it and a lightbox opens up with a vimeo embedded video in it. He then taps the video to watch it and it goes fullsceen (a message appears on top that the browser is in fullscreen mode). If the user closes the video like suggested (by dragging down from the top) everything works as expected, but if he taps the devices 'back' button, the browser kinda closes the video (I can still hear it play somewhere) but doesn't really leave the full screen mode (messing up stuff until the user drags from the top).
I'm able to detect when the user has tapped that button, and my question is can I force the browser to leave the fullscreen mode through javascript?
Thanks
As stated on the comment above:
On back button click you can check if the current document is in full screen (document.webkitIsFullScreen) and in case cancel it (document.webkitCancelFullScreen();).
I need a link to invoke a flash movie (with javascript) that takes the view to full screen, and show the page content. Exactly as if the user has pressed F11. Is there such flash movie?
Edit
This is different from what the flash player does on Youtube and other video sites in that the flash movie has no content to show and after the page goes fullscreen I want the normal page content to be displayed. The only role of the flash object would be invoking the fullscreen mode.
JavaScript (and therefore Flash) does not have access to activating full-screen mode (and thank god it doesn't!).
The best you can do is measure the user's screen size and open a new window that emulates this layout.
See: How to make the window full screen with Javascript (stretching all over the screen)
No. Flash full screen mode (which can only be triggered with a click) is independent from browser full screen mode (which not all browsers have anyway).
I have a 100% width and height flash object in my site. Activating and exiting browser full screen mode with F11 only works as long the user didn't click the Flash movie. And I doubt many users know they have to click the address bar to enable F11 after using a (browser) full screen Flash movie.
Is there any way I can enable F11 to work if the Flash object is active?
Thanks,
Jan
No, for security reasons Adobe disable all keyboard events while in full-screen mode, you still have full mouse events, but the only key that can change the full-screen mode back to windowed mode is the Esc key.
When switching to full-screen mode a transparent message shows up briefly explaining this before fading away.