How do I Remove The Play button & White Screen that shows on the IPad?

Report · Jan 06, 2014

Can anyone tell me how to remove the play button that apears on a white screen before the course starts? it only shows on the iPad and if this is going to be published as an IOS app using phone gap build i dont want this to show.

I have found some javascript that i have tried but it dosent seem to remove the white screen or browser warning does anyone know the correct javascript to use?

Current Javascript:

http://floatlearning.com/2013/10/a-more-mobile-friendly-captivate-html-template/

$(function() {

FastClick.attach(document.body);

$("#CPUnSupportedBrowserWarning_ID").remove(); // Removes browser warning

cp.movie.play(); // Skips play button screen

});

</script>

I am using the latest version of Captivate 7.0.1 on Mac

Thanks,

Oliver

Report · Jan 06, 2014

Here is a thread offering solution on the browser warning issue.

http://forums.adobe.com/message/5882655#5882655

Sreekanth

Report · Jan 06, 2014

Look in the HTML file that Captivate created.

Near the bottom there should be a function called "function ContinueCPInit()"

put the cp.movie.play(); directly after the following line:

document.getElementById('playImage').focus();

cp.movie.play();

Report · Jan 06, 2014

Hey, thanks for you reply

I cant seem to find that function this is what captivate 7.0.1 generatesin terms of HTML:

<!DOCTYPE html>

<html>

<head>

<title>Brainstorming eLearning Course</title>

function initializeCP()

{

function cpInit();

cp.movie.play();

{

document.body.innerHTML = " <div class='cpMainContainer' id='cpDocument' style='left: 0px; top:0px;' > <div id='main_container' style='top:0px;position:absolute;'> <div id='projectBorder' style='top:0px;left:0px;position:absolute;display:block'></div> <div class='shadow' id='project_container' style='left: 0px; top:0px;position:absolute;' > <div id='project' class='cp-movie' style='width:1024px ;height:748px '> <div id='project_main' class='cp-timeline cp-main'> <div id='div_Slide' onclick='cp.handleClick(event)' style='top:0px; width:1024px ;height:748px ;position:absolute;-webkit-tap-highlight-color: rgba(0,0,0,0);'></div> </div> <div id='autoplayDiv' style='display:block;text-align:center;position:absolute;left:0px;top:0px;'> <img id='autoplayImage' src='' style='position:absolute;display:block;vertical-align:middle;'/> <div id='playImage' tabindex='9999' role='button' aria-label='play' onkeydown='cp.CPPlayButtonHandle(event)' onClick='cp.movie.play()' style='position:absolute;display:block;vertical-align:middle;'></div> </div> </div> <div id='toc' style='left:0px; float:left;position:absolute'> </div> <div id='playbar' style='left:0px; float:left;position:absolute'> </div> <div id='cc' style='left:0px; float:left;position:absolute;visibility:hidden;pointer-events:none;' onclick='cp.handleCCClick(event)'> <div id='ccText' style='left:0px;float:left;position:absolute;width:100%;height:100%;'> <p style='margin-left:8px;margin-right:8px;margin-top:2px;'> </p> </div> <div id='ccClose' style='background-image:url(./assets/htmlimages/ccClose.png);right:0px; float:right;position:absolute;cursor:pointer;width:13px;height:11px;' onclick='cp.showHideCC()'> </div> </div> <div id='pwdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> <div id='exdv' style='display:block;text-align:center;position:absolute;width:100%;height:100%;left:0px;top:0px'></div> </div> </div></div><div id='blockUserInteraction' class='blocker' style='width:100%;height:100%;'> <table style='width:100%;height:100%;text-align:center;vertical-align:middle' id='loading' class='loadingBackground'> <tr style='width:100%;height:100%;text-align:center;vertical-align:middle'> <td style='width:100%;height:100%;text-align:center;vertical-align:middle'> <image id='preloaderImage'></image> <div id='loadingString' class='loadingString'>Loading...</div> </td> </tr> </table></div> <div id='initialLoading'></div>";

cp.DoCPInit();

}

if((typeof InitAppPackager !== "undefined") && (typeof InitAppPackager === "function"))

{

InitAppPackager(cpInit);

}

else

{

cpInit();

}

</script>

</head>

<body>

(function()

{

if(document.documentMode < 9)

{

document.body.innerHTML = "";

document.write("The content you are trying to view is not supported in the current Document Mode of Internet Explorer. Change the Document Mode to Internet Explorer 9 Standards and try to view the content again.<br>To change the Document Mode, press F12, click Document Mode: <current mode>, and then select Internet Explorer 9 Standards.");

return;

}

window.addEventListener("load",function()

{

setTimeout(function()

{

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'assets/js/CPXHRLoader.js';

script.defer = 'defer';

script.onload = function()

{

var lCSSLoaded = false;

var lJSLoaded = false;

function constructDIVs()

{

if(lCSSLoaded && lJSLoaded)

{

initializeCP();

}

cpXHRJSLoader.css('assets/css/CPLibraryAll.css',function() {

lCSSLoaded = true;

constructDIVs();

});

var lJSFiles = [ 'assets/js/jquery-1.6.1.min.js','assets/js/CPM.js' ];

cpXHRJSLoader.js(lJSFiles,function()

{

//console.log("js loaded");

lJSLoaded = true;

constructDIVs();

});

}

document.getElementsByTagName('head')[0].appendChild(script);

},1);

},false);

})();

</script>

</body>

</html>

Report · Jan 06, 2014

You should be able to check autoplay in the preferences/project/start and end/, but that is persnickety. Adobe changed the html file in the update. Put it here:

cp.DoCPInit();
}
if((typeof InitAppPackager !== "undefined") && (typeof InitAppPackager === "function"))
{
InitAppPackager(cpInit);
}
else
{
cpInit();
}
cp.movie.play();
}

</script>
</head>

Report · Jan 08, 2014

Hey thanks for your help, that works great! in the iOS safari browser but when I convert my HTML5 package to an ISO App using phone gap the play screen appears again any ideas why that is do i need to place the cp.movie.play(); somwhere diffrently just for the IOS app version?

Thanks,

Oliver

Report · Jan 08, 2014

Sorry, can't help you there. Never used Phone Gap, so I don't know what the package does to the file. Even if you select autoplay, CP still puts the screen with the play button in your file. You would have to dig through all of the script and find out how it is turning the div on and off and playing the movie.

Report · Mar 31, 2014

Hi

Has anybody figured out how to remove the Play button when the HTML5 package is published via PhoneGap? I want to get rid of that from the Android app I created.

Sreekanth

Adobe Community

How do I Remove The Play button & White Screen that shows on the IPad?