HTML5 pub: Android Mobile Browser to run full screen?

Stephen · **Posted:** November 11th, 2014, 5:20 am

Any way to add script/code to an HTML5 pub to get the browser to run full screen? Checked using the FireFox mobile for Android plug-in for full screen. Works OK but, if you've disabled the context menu so the page source code is not easily visible, then no easy way to exit full screen.

Hoping, if possible, to find another way to enter/exit full screen using script/code?

Any suggestions appreciated.

mackavi · **Posted:** November 11th, 2014, 10:32 am

It why Opus 9.5 is so brilliant... :-)

http://sandbox.interaktiv.co.uk/forum/fullscreen/

http://sandbox.interaktiv.co.uk/forum/fullscreen/fs.zip

Uses both the new JS action to trigger the fullscreen API and the new HTML5 Header Additions to add some style to solve the webkit issue.

</mack>

Stephen · **Posted:** November 11th, 2014, 1:49 pm

Hi Mack,

Thank you for these. Agreed: Opus 9.5 is brilliant!

Had difficulty getting the full screen to work on an Android 4.4 (Kitkat) tablet viewing with latest version FireFox mobile for Android. Published your sample IMP, ran it up to the server, but no joy. Did work flawlessly on my desktop. But not on FireFox/Android device. (Interestingly, when viewing using Windows desktop, a Windows prompt displays when first trying to enter full screen, which asks if user allows or denies permission. No such prompt appears in the Android device.)

Decided to try it on the same tablet using Chrome. Uh,Oh. This time, pressing the enter button, the screen shrunk instead of filling the full screen and a prompt came up: "The site has gone fullscreen. Drag from top to exit." Exit button also works to resume previous view. But no full screen either way.

So, I wonder if FireFox mobile browser for Android and Chrome mobile browser for Android would need a different or added script? As far as I know, latest FireFox and Chrome mobile still use webkit, but I'm not very knowledgeable about HTML5 yet. Not sure why this won't work? Been reading about full screen here:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode. If FireFox mobile for Android is using Gecko instead of webkit, the mozilla developer page referenced above mentions adding the following to the CSS style:

Code:

:-webkit-full-screen #myvideo { //I would guess #myvideo would need to be changed to #body?
  width: 100%;
  height: 100%;
}

I would try this additional code if I knew where to add it in the Opus pub?

mackavi · **Posted:** November 11th, 2014, 3:34 pm

webkit (Chrome / Opera) handles the full screen differently or Firefox does - depending on your perspective :-)

That CSS pseudo-class in the HTML Header Addition should stop webkit shrinking the page - though I believe that the actual CSS might be different for different versions of Android. It works on my Phone and Fire tablet and for my desktop.

As for the enter button in FF Mobile - the code is fine but I think it simply won't trigger from an Opus button. Possibility something to do with the event handling - in which case it might be best to add your own HTML element.

Here's a rough example:

http://sandbox.interaktiv.co.uk/forum/fs
http://sandbox.interaktiv.co.uk/forum/fs/fs.zip

</mack>

Stephen · **Posted:** November 11th, 2014, 4:22 pm

No joy yet. Tried adding the CSS pseudo-class in the HTML header found in the publish dialog. Didn't fix the problem.

Code:

:-webkit-full-screen #body { 
  width: 100%;
  height: 100%;
}

I downloaded your zip folder, but this fullscreen sample file seems to be the same as the previous one. Can't find the HTML element mentioned in your posting. I must be missing something?

mackavi · **Posted:** November 11th, 2014, 4:38 pm

Doh. Forgot to save the file before zipping.

Try again.

</mack>

Stephen · **Posted:** November 11th, 2014, 5:24 pm

Will keep playing with latest sample. But, so far, using an HTML element for a button to trigger full screen has not worked.

However, while searching online, came across additional suggestions: http://www.html5rocks.com/en/mobile/fullscreen/. Especially:

Code:

document.documentElement.requestFullscreen();

If I change the script using this, I can get it to work on Chrome mobile Android, without shrinking the screen:

Code:

if (document.documentElement.requestFullscreen) {
  document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
  document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
  document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
  document.documentElement.webkitRequestFullscreen();
}

mackavi · **Posted:** November 11th, 2014, 6:38 pm

Glad your tweak worked. It actually creates a massive white bar on my various Chrome versions :-?

Just for reference, we're basically doing the same thing - your documentElement just references the <HTML> tag whilst I've picked the <BODY> tag. In theory any tag should work - with something like <VIDEO> proving popular.

I charged an old JellyBean device and installed the latest Firefox and Chrome and got the same results that I had for KitKat.

/fullscreen worked for Chrome but not Firefox

/fs worked for both.

</mack>

Stephen · **Posted:** November 11th, 2014, 8:57 pm

Mack,

I noticed that you mentioned fs worked for both. I probably hadn't tried to view your demo of fs on my tablet directly. I had used the IMP in the zip folder to publish a new item. Had to change the font from Indie Flower to Arial to prevent an error message when publishing. I tested using this uploaded version, and it didn't work.

When I use my tablet to navigate directly to your demo (fs), it works for both FF and Chrome.

So, I'm wondering what I am doing wrong when publishing from the sandbox zip IMP?

Going from your IMP to my pub, something is not working on my end?

Could the IMP in the zip folder be different than the one you used to create the demo in your sandbox? Maybe, my version of Opus 9.5 (build 16632) is not working correctly or not the latest one? Or changing the font...

Not sure how to get the same result, but clearly your fs demo works exactly as needed for both FF and Chrome when viewed on my tablet. A puzzle.

mackavi · **Posted:** November 11th, 2014, 10:14 pm

It's the Opus downloaded yesterday. 9.51 technically although still showing 9.50.

There is the HTML5 object on the page plus a <script> and <style> in the HTML header section on settings.

</mack>

Stephen · **Posted:** November 11th, 2014, 10:38 pm

I'm not sure where the latest version 9.51 can be downloaded from? Is it the regular download on the DW updates page that updates 9 to 9.5?

My downloaded copy of the IMP from your sandbox has the following in the html header section of the HTML5 object:

Code:

<button onClick="runFullScreen()" style="width:110px;height:40px">enter FS</button>

If possible, can you specify the download link that will get 9.51 (even if only called 9.50)? And if I use that to open the IMP @ http://sandbox.interaktiv.co.uk/forum/fs/fs.zip hopefully this is the correct version of your IMP with these html headings?

I'll also clear the tablet's browser caches between viewings.

mackavi · **Posted:** November 11th, 2014, 11:08 pm

Just downloaded that previous fs.zip and it's right.

The Opus download is from the DW download page. Paul Harris mentioned it in a post yesterday - viewtopic.php?f=4&t=5498

I do wonder if you're misunderstanding and confusing the Opus HTML5 object (on the vertical toolbar) and the HTML5 header additions which can be found on the advanced tab of the settings dialogue when publishing?

</mack>

Stephen · **Posted:** November 12th, 2014, 12:27 am

OK. Installed the latest version. Seems to have made the difference. Everything is working.

Again, much thanks.

Digital Workshop

HTML5 pub: Android Mobile Browser to run full screen?

Who is online