Full screen in html5

Report · Jan 31, 2017

Hi,

I created a responsive project, but I would like the desktop view to be full screen. Is that possible?

Cheers!

Report · Feb 01, 2017

Hi,

In case of responsive project, the published output adjust as per the browser size.

If you are not able to get the responsive HTML5 output correctly in browser, please reply with the screenshot, so that We can have more details regarding the issue.

Also, please mention the version of Adobe Captivate, if it is version 8 or version 9.

Regards,

Deep

Report · Mar 02, 2017

Hi Deep,

I'm using Captivate 9. Here's a screenshot:

thanks!

Report · Feb 01, 2017

I created a solution for this some time ago... I no longer have access to all the files but essentially you can run this JS to toggle HTML Fullscreen mode:

if (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {
var i = document.getElementById("main_container")
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}

Report · Mar 02, 2017

Hi there,,

where should I put this js, in the head tag of my index page? It shows promise, but my lack of scripting skills is preventing it from working.

Thanks!

Report · Mar 03, 2017

You will need to add it to a button that the learner will use to toggle fullscreen on/off.

Report · Mar 03, 2017

hmmmmm . . . did that . . . doesn't work. What am I doing wrong? Will I be able to see it work in preview?

Report · Mar 20, 2018

I tried this today and it did not work for me either. I'm using Captivate 9, publishing to a SCORM 1.2 zip file, and importing into a Moodle-based LMS (Totara). The file is presented in a box that just isn't wide enough for the file (thus needed to go full screen). Maybe it's a Moodle thing?

Report · Mar 20, 2018

Hi all, as I mentioned I was kind of doing that from memory. I just tried this successfully in CP2017

  if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {        var i = document.getElementById("main_container")        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {            // exit full-screen           if (i.exitFullscreen) {               document.exitFullscreen();           } else if (document.webkitExitFullscreen) {               document.webkitExitFullscreen();           } else if (document.mozCancelFullScreen) {               document.mozCancelFullScreen();           } else if (document.msExitFullscreen) {               document.msExitFullscreen();           }       } else {           if (i.requestFullscreen) {               i.requestFullscreen();           } else if (i.webkitRequestFullscreen) {               i.webkitRequestFullscreen();           } else if (i.mozRequestFullScreen) {               i.mozRequestFullScreen();           } else if (i.msRequestFullscreen) {               i.msRequestFullscreen();           }       }   }

Report · Jul 16, 2018

Hi this.onEnterFrame,

I'm still using Captivate 9. I tried your code above on a button--put this in Script Window for Execute Java Action and it didn't work. Any idea what I could be doing wrong? Thanks!

if (document.fullscreenEnabled ||

document.webkitFullscreenEnabled ||

document.mozFullScreenEnabled ||

document.msFullscreenEnabled

) {

var i = document.getElementById("main_container")

if (document.fullscreenElement ||

document.webkitFullscreenElement ||

document.mozFullScreenElement ||

document.msFullscreenElement)

{ // exit full-screen

if (i.exitFullscreen)

{ document.exitFullscreen();

}

else if (document.webkitExitFullscreen)

{

document.webkitExitFullscreen();

} else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if (document.msExitFullscreen) {

document.msExitFullscreen();

}

} else {

if (i.requestFullscreen) {

i.requestFullscreen();

} else if (i.webkitRequestFullscreen) {

i.webkitRequestFullscreen();

} else if (i.mozRequestFullScreen) {

i.mozRequestFullScreen();

} else if (i.msRequestFullscreen) {

i.msRequestFullscreen();

}

Report · Jun 05, 2019

hi..did you ever get that problem fixed for fullscreen ?

Report · Jun 06, 2019

nope.

Report · Jul 17, 2019

Must remove line <meta http-equiv="x-ua-compatible" content="IE=10"> from index.html for"msRequestFullscreen" to work in IE11

Report · Nov 06, 2019

Thanks thomasc, it did work to remove the line. And yes, it does go full screen--but it's the browser that goes full screen—my project stays the same size. I was hoping to have my captivate project go full screen. I guess my only solution is that I should have created the project as scaleable.

Thanks for your help!

Report · Jun 06, 2019

I'm currently trying to figure that one out, I know how to do a non-responsive blank project full scale in a browser. Those settings when publishing a project are not the same when is a responsive project file...that's where the trick lies. Hopefully there's away and is just located in another section? In the top menu ribbon > under modify there's the option to retain ratio when rescaling but that's where my search stop...tomorrow is another day to continue this hunt!

Report · Jun 07, 2019

Maybe only my personal logic, but I asking to have a responsive project going full screen seems contradictory with the concept of a responsive project.

Report · Jun 07, 2019

There is no default option in the HTML5 publish settings in Captivate to turn off browser chrome and make the content fully Full-Screen.

The Scalable HTML setting is only intended to make the content fill the available browser space INSIDE the chrome, not designed to force a full-screen mode. Hitting F11 when viewing content in a desktop computer gets you closer toward full-screen but still keeps at least enough control elements to allow the user to close the window if they so desire.

Some browsers have the option of displaying content in what is known as 'Kiosk Mode' where all browser chrome is disabled. But to get that you usually need to launch the window FROM another window using JavaScript to control the window properties. Captivate doesn't give this option, so you would need to work out the JavaScript yourself.

However, even if you DID manage to crack that code, this doesn't mean you will have the same result when you launch the content from an LMS because the LMS controls the link that launches the window. Additionally, since HTML5 output (especially responsive HTML5 output) is mainly designed for mobile devices, their browsers also behave somewhat differently due to the smaller available screen real estate.

So it's quite a mixed bag of choices and obstacles.

Report · Jun 09, 2019

I have 2 sides to this project. 1st is the presentation side that is non responsive as it is viewed on 65" touch screens in the training center. 2nd is the knowledge check and assignments that is done on all other devices which is responsive. So for now i need to play a non responsive project in full screen.. Everything runs through Captivate prime .. Be happy if you could help me get past this one.

TIA

Report · Jun 09, 2019

You cannot have one project CPTX with both non-responsive AND responsive slides.

If you want some content to be non-responsive and other parts of the course to be responsive then you'll need to separate them out into different CPTX project files.

Report · Jun 09, 2019

I understand yes. They are separate

Report · Jun 07, 2019

Hi Chessie

I'm new to captivate (more active in the Animate community) and haven't tested this with responsive output from Captivate yet. Nevertheless you could try this:

var elem = document.getElementById("project_container");
var fullscreen = false;
toggleFullscreen = function () {
    if (!fullscreen) {
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
            fullscreen = true;
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
            fullscreen = true;
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
            fullscreen = true;
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
            fullscreen = true;
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
            fullscreen = false;
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
            fullscreen = false;
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
            fullscreen = false;
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
            fullscreen = false;
        }
    }
}
toggleFullscreen();

As you can see I'm using a var fullscreen to check what the click on a button should do, either request or exit fullscreen. You know that requestFullscreen can only work if a user has willingly triggered it.

And as element to be fullscreened I'm using the project_container because this seems to be the one with the essential content from Captivate. See this screenshot from my project I'm currently working on with the particular element highlighted through Web Tools / Inspector.

Not guaranteed but it might work

Klaus

Report · Sep 12, 2019

Hi Klaus, this works very well for my project. Is there a way to force the project to either center or stretch to fit the screen? In full screen the project is smaller than the screen and in the top left corner. Thanks!

Report · Jun 07, 2019

And additionally

you should consider that the Javascript Fullscreen API doesn't work on iOS.

Klaus

Report · Jun 07, 2019

OP is talking about a responsive project! Is that taken into account?

Report · Jul 18, 2019

Sorry I didn't follow up on this sooner. The issue you are having with my solution is probable due to the different Captivate version and publishing options. This line

document.getElementById("main_container")

Is finding the DOM element we want to make fullscreen. In my case CP17 the element's ID when published in "main_container"... But I would not be too suprised if CP9 used a different ID (if not a whole different layout).

So you may need to figure out what the ID of the element is that you want to go fullscreen. I don't have a CP9 published course handy to look at... I guess you could just make the whole BODY fullscreen but then you would have all the player stuff too.

Adobe Community

Full screen in html5