Storyline Toggle Fullscreen Mode in Web Browser
May 15, 2017
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
Hey Cruz! Thanks for testing that out and sharing the knowledge!
Does this still work in Chrome on iOS? I cannot get it to work on timeline start.
About the timeline trigger: My thoughts on this was that it could posibly
be done in theory. But it has proven impossible to get done no matter what.
The reason escapes me.
Yep, just realised that as it works great on a button. I cannot get it to work in Mobile Chrome on iOS though and the del breaker is that it breaks Safari on my Mac.
Thanks for getting back to me really appreciate it.
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?
Hello,
This is not working in LMS(Moodle)
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
I have not been able to get this code to work on an iOS device under any circumstances (Chrome/Safari, published to an LMS, published to the web, published to SCORM Cloud, etc). It works fine on Android devices. Does anyone know why this might be the case?
"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
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.
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/
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...
Thank you for this code, most helpful. Can you advise how to add a button to leave full screen.
This code includes a toggle like behavior. It will switch in and out of the full screen state whenever assigned to a button trigger
Hello, any progress on that? did you manage to solve the issue on Iphones? thanks!!!
Would be great to have this functionality within the Modern Player Menu and if it could work on iOS. Do you know if there will be a solution from Articulate anytime soon?