Storyline Toggle Fullscreen Mode in Web Browser

May 15, 2017

Cruz Rincon
By Cruz Rincon

Compatible with HTML5 compliant browsers only. Tested on Chrome 57 for Windows and Chrome for Android Nougat (Storyline 3)

Proof of concept:

https://cruzrincon.github.io/Fullscreen/story_html5.html

Instructions: Assign the following Javascript to be executed via Trigger:

if ((document.fullScreenElement && document.fullScreenElement !== null) || 
 (!document.mozFullScreen && !document.webkitIsFullScreen)) {
 if (document.documentElement.requestFullScreen) { 
 document.documentElement.requestFullScreen(); 
 } else if (document.documentElement.mozRequestFullScreen) { 
 document.documentElement.mozRequestFullScreen(); 
 } else if (document.documentElement.webkitRequestFullScreen) { 
 document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
 } 
 } else { 
 if (document.cancelFullScreen) { 
 document.cancelFullScreen(); 
 } else if (document.mozCancelFullScreen) { 
 document.mozCancelFullScreen(); 
 } else if (document.webkitCancelFullScreen) { 
 document.webkitCancelFullScreen(); 
 } 
 }
16 Replies
Simon Wood
almost 7 years ago06/27/17 at 1:53 am (UTC)

Hey Cruz,

For some reason I can't get this code to work in my course.  Your live-version works on my mobile device, but when inserting the code into my course - it doesn't.

Are you able to share the Storyline project file so I could take a deeper look at your example?

What publishing settings are you using?

Knut Jackowski
over 6 years ago10/16/17 at 12:43 pm (UTC)

The reason is probably that fullscreen is only granted by the browser to user interaction events. This is part of the official way it works to prevent phishing and other undesirable things that could happen when websites could enter fullscreen without the user wanting or even knowing it.

https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/#comment-7930

Cruz Rincon
almost 6 years ago05/24/18 at 10:39 am (UTC)

"Not all platforms are equal. iOS Safari doesn't have a fullscreen API"

https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

and

https://caniuse.com/#feat=fullscreen

Also, it appears that Chrome on iOS uses Safari rendering engine

 

I'm working on an alternative solution. Stay tuned

 

Max Ricketts
almost 6 years ago05/24/18 at 11:36 pm (UTC)

Awesome, I will.  Be sure to update this thread!

This is such a useful script for getting courses to use up all the real estate on mobile devices and eliminate browser chrome, which is currently a challenge for us in our transition to full mobile support for our corporate university catalog.  It's really a shame that iOS doesn't support it.

Even with the new player's ability to go full screen, giving learners the toggle as a button so they can freely switch between views is the best experience in my opinion, and matches what they are used to in modern commercial sites that contain media.

Cruz Rincon
almost 6 years ago05/25/18 at 12:16 pm (UTC)

It turns out that, no matter what, fullscreen in safari ios is unsupported. Unless you tell your users to add your storyline html page as a homescreen icon.

Warining: it requieres fiddling with the html output. Not for the faint of heart

More info here

http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/

Max Ricketts
almost 6 years ago06/01/18 at 12:47 am (UTC)

Thanks for confirming that Cruz...it matches what I'd found with all my testing at the time.

I've been playing with the new modern player and I can now get iPhones to go full screen by swiping up on the address bar (when player settings are configured correctly).  I'm not sure if this is "truly" fullscreen (in the exact way that the javascript forces it) but all the browser chrome is eliminated and the course was taking up as much room on the screen as possible with its resolution.

I haven't been able to get that to work on iPads though, which always display the address bar no matter what (excepting the home screen html meta tag workaround, which I can't use as we publish to an LMS).  This indeed seems to be built into iPad Safari itself.  I rarely use Apple products so it had never occurred to me that Safari might just work this way.

I'll have to just accept the browser chrome I suppose until Apple decides to change this functionality...

Sign In to Reply