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();).
Related
I have multiple iframes on a page that when they start to play they automatically go fullscreen on mobile. I am using the youtube api to load the videos and have a "cover" image over the top with a custom play button. On mobile, when the user clicks the play button the cover image disappears and the video goes fullscreen and starts playing - so far so good. But what I need to be able to do is that when the user clicks 'done' the video leaves fullscreen (which it does) and the cover image comes back up (which it currently doesn't). The problem is that I cant seem to detect when the user clicks 'done'.
I've tried using:
$('iframe').bind('webkitendfullscreen', function(){
// code in here shows the cover image but even just a standard alert isn't firing.
$('#coverImage').show();
});
No matter what I do the webkitendfullscreen isn't firing. Is there no way to detect when an iframe is done on mobile?
any help/pointers appreciated!
According to the answer from powtac from this SO post:
You can not interact with iframes which are not under the same domain.
This is always prevented by the browser's policy.
I think from this SO post you will have a hint on your problem.
You can check this SO post as well.
I'm using Crosswalk webview on Cordova to display a webApp made with Ember.js.
In some pages the app have iframes which open a Vimeo player, and I allow them to play in fullscreen.
When the user plays it, it enters fullscreen automatically, resizing the page to increase its height. But, if the user closes fullscreen (or when the video ends and the fullscreen closes), the page isn't resized back to the original height, and my top menu gets hidden behind the mobile status bar.
If then I navigate to another url, the page gets resized and everything is beautiful again.
My question is: is there any javascript/CSS trick I could try to get around this?
INFO: I tested this against 2 phones, one Android 4.1 and the other Android 5.0, and it only happened in the Android 5.0 one. So maybe this is a Crosswalk bug. Doesn't happen at all if I use the native webView, but I wanted to avoid switching to it.
Any help appreciated ;)
I have added this http://cubiq.org/add-to-home-screen plugin to a website and it works ok but I have a question. For a better understanding I will describe the scenario.
SCENARIO:
The user enters the site and the add to home screen pop-up appears, he taps the add to home screen icon and adds it to his iPhone homescreen.So far so good. He enters the site from the homescreen icon and whenever he taps a link it will open in a SAFARI window not in the current window. The desired beahviour would be to let the user in the current fullscreen window not to redirect him to a regular safari window. NONE of the links have target _blank. Is this an iPhone bug or is it a "normal" behaviour ?
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 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.