37 Replies Latest reply on Jul 31, 2016 11:06 PM by arunshete

    Autoplay with HTML 5

    hello1966 Level 1

      Hi How can you put AutoPlay on HTML5? I still have to click on an arrow, so that the content starts.  With Flash was not a problem ...  Regards Chris

        • 1. Re: Autoplay with HTML 5
          Kurrykid Adobe Community Professional

          Yes, I am having this issue too...any suggestions on how to have it bypass the arrow?

          • 2. Re: Autoplay with HTML 5
            hello1966 Level 1

            No, Unfortunately not. And you?

            • 3. Re: Autoplay with HTML 5
              Kurrykid Adobe Community Professional

              I haven't been able to bypass having to click to start but I was able to remove the arrow and replace that image with an image that looks like my quiz and says click here to start. It took some code modifications and lots of testing but it is much better than it was.

              • 4. Re: Autoplay with HTML 5
                hello1966 Level 1

                Well, that is one possibility. I have the content in a lms, with SCORM implemented. When the student start in the lms the content it think it is very bad, if they have to start a second time! Above all, I still use the table of contents, which looks even more stupid. This is not professional.

                • 5. Re: Autoplay with HTML 5
                  guitaristtuckty

                  If you want autoplay with HTML5, edit index.html and find function DoCPInit(). After CPPostInit(), add the lines

                   

                  CPPlayButtonHandle("onkeydown");

                  cp.movie.play();

                   

                  This will sort of automatically press the play button for you on load. Please note that this will cause problems with audio if you are using IOS. This is because of apple's standards - https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML 5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref /doc/uid/TP40009523-CH5-SW1

                   

                  I disabled autoplay for a captivate project I use as a course menu, and I had no problems because there was no audio in the background. However, with projects that have background audio, I just have to get used to the big play button.

                  • 6. Re: Autoplay with HTML 5
                    StevePixel Level 1

                    Hey Kurrykid;

                     

                    I am really curious about your arrow image swap solution. It sounds like something that will work for me. Can you explain it a little. Specifically what image did you swap (was it the PlayIcon in the Playbar folder? If so how did you size it correctly?

                     

                    Any guidance would be greatly appreciated.

                     

                    Thanks

                    Steve 

                    • 7. Re: Autoplay with HTML 5
                      Kurrykid Adobe Community Professional

                      Hi Steve,

                       

                      It took quite a bit of digging into the code to solve this. I had to modify the Index.html file and a CSS file (CPLibrary.css). This css file determines the size and image name and the Index file is checking for the correct browser (and will throw an error...at least how I am using it). It also causes the play button to be centered.

                       

                      What I did was created an image the size of the screen (1024x768) and "pasted" the play arrow on top of it. So I replace the play Icon image with my image with the play arrow. Here's some details: Edit the index.html to #1 Remove the Browser check #2 Remove the code that is causing the play arrow to be centered.

                       

                      #1

                      Index1.html.png

                       

                      #2

                      Index2.html.png

                       

                      On the CSS side, you need to change the code in the CPLibrary.css file to reflect the new image file and the size. #1 shows the original and #2 shows it edited:

                       

                      #1

                      css1.png

                      #2

                      css2.png

                       

                      So what happens now is I get a screen that looks like the first page of my quiz with a play button on it. I click it and the quiz begins. Not the best way to do it but it's a decent workaround.

                       

                      I hope it makes sense and it helps.

                       

                      Dave

                      • 8. Re: Autoplay with HTML 5
                        StevePixel Level 1

                        Hey Dave;

                         

                        Thanks for the detailed answer. Makes total sense ! Appreciate your time and expertise.

                         

                        Steve

                        • 9. Re: Autoplay with HTML 5
                          Kurrykid Adobe Community Professional

                          You're welcome. I hope you get it working for you.

                          • 10. Re: Autoplay with HTML 5
                            Mike McCauley Level 1

                            Hello Dave,

                             

                            Do you know of a way to make to make this permanent?  I modified the CSS library and deleted code in the Captivate source html but it keeps moving the file to the left of center when I publish.

                             

                            Mike

                            • 11. Re: Autoplay with HTML 5
                              Kurrykid Adobe Community Professional

                              Are you updating the files you changed and saved to your webserver? Also, you may need to clear your cache. That's about the only things I can think of as to why the changes wouldn't be permanent.

                               

                              HTH

                              • 12. Re: Autoplay with HTML 5
                                ryan.vontrapp Level 1

                                I opened up the HTML template in <installed directory>\HTML and added the following line of code at the bottom of the script (just above "</script></body></html>"):

                                 

                                "cp.movie.play();"

                                 

                                The play button still loads, but the cp.movie.play() command happens so fast that you don't even notice the play button.

                                 

                                 

                                Ryan

                                • 13. Re: Autoplay with HTML 5
                                  BarbaraFEWW Level 1

                                  Is there a way to eliminate existence of the start arrow? I am using 6.0 and outputing to HTML5 with Autoplay and Preload checked but the program doesn't start automatically - the user must press start. I don't want to change the image, I want the start arrow to be eliminated.

                                   

                                  Thanks,

                                  Barbara

                                  • 14. Re: Autoplay with HTML 5
                                    dt4pt Level 1

                                    I'm using CP7 and would be keen to know how to get rid of the start arrow once and for all. A solution that requires implementation each time I publish isn't going to be viable.

                                    • 15. Re: Autoplay with HTML 5
                                      jeanrouge Level 1

                                      By the way if you are using CP 8 and need to achieve a similar effect let me know and I will show you the required steps

                                      • 16. Re: Autoplay with HTML 5
                                        IdeaTrack Level 1

                                        jeanrouge - hey I'm using Captivate 8 and I can't get the bloody thing to autoplay. When I load the published files in Chrome from my web server it doesn't autoplay! It just sits there with the playbar.

                                         

                                        Please show me the required steps!

                                        • 17. Re: Autoplay with HTML 5
                                          Randall Fujimoto Level 1

                                          In Captivate 8, I opened up index.html and added:

                                          cp.movie.play();

                                          at the end of "function initializeCP()" right after the line "cpInit();"

                                           

                                          Now, there is no play button at the start on tablet and mobile versions. Hope that was what you were looking for.

                                          • 18. Re: Autoplay with HTML 5
                                            jeanrouge Level 1

                                            Could you please add a screenshot of the location of cp.movie.play()

                                            I tried adding it as you mentioned but the movie doesn't load anymore it just sits there with the loader spinning.

                                            • 20. Re: Autoplay with HTML 5
                                              jeanrouge Level 1

                                              Thanks a Million

                                              Works like a charm

                                               

                                              • 21. Re: Autoplay with HTML 5
                                                GMOMike Level 1

                                                Thanks Kurrykid for the detailed workaround. I have Captivate 8 and am having this problem as well, but I think my LMS (Docebo), being over-zealous about security, strips out the window.cp script object. So I can't just use cp.movie.play();

                                                 

                                                I'm hoping there's a way I can use HTML5 so that I can avoid Flash for mobile devices, but I'm finding that in Chrome, HTML5 can't be made to autoplay, in Firefox, it throws up the Unsupported Browser box (disabled this with $("#CPUnSupportedBrowserWarning_ID").remove();)

                                                 

                                                I don't mind editing code a little, but I need some kind of workaround: my users aren't going to know what to do. I was originally hoping to have my own simplified buttons on each slide but I don't see a good practical way around the default playbar.

                                                 

                                                Can anyone from Adobe chime in on this issue? I would like to see if I can verify that the LMS is stripping out Javascript in the SCORM file. Thanks so much for any help!

                                                • 22. Re: Autoplay with HTML 5
                                                  windscorpion Level 2

                                                  Put an alert('hi'); into the javascript, you will see if the javascript is being run or not then

                                                  • 23. Re: Autoplay with HTML 5
                                                    GMOMike Level 1

                                                    Hi windscorpion thanks so much for responding - Javascript is working, it's the window.cp object that is getting stripped out. Sorry, I shouldn't have made it sound as if ALL js was getting removed. ScormCloud LMS lets me interact with window.cp, but not Docebo.


                                                    Does anyone know an alternate way of getting that movie to play without access to the cp object? Thanks again

                                                    • 24. Re: Autoplay with HTML 5
                                                      RBurke82 Level 1

                                                      I'm sorry.  Where is the index.html file?  Is it in the Captivate project or in the published files?  Thanks

                                                      • 25. Re: Autoplay with HTML 5
                                                        Lilybiri MVP & Adobe Community Professional

                                                        With the Published files.

                                                        • 26. Re: Autoplay with HTML 5
                                                          RBurke82 Level 1

                                                          Hey GMOMike,

                                                           

                                                          I just tried adding the cp.movie.play() to the index_SCORM.html file as suggested above and this worked in Docebo (in Chrome), so apparently it is not getting stripped out of Docebo.

                                                           

                                                          However, Firefox and IE still throw the error message.  I want to try $("#CPUnSupportedBrowserWarning_ID").remove();) as you suggested, but I don't know where you put that.  Can you maybe include a screen shot of your code?

                                                           

                                                          Here is mine (this is what worked for my HTML5 project in Docebo/Chrome)

                                                           

                                                          2015-03-05_15-45-49.png

                                                          • 27. Re: Autoplay with HTML 5
                                                            RBurke82 Level 1

                                                            Ok, for everyone struggling with this issue I hopefully have a fix (it worked for me so hopefully it works for you too).

                                                             

                                                            I made my HTML5 project autoplay in Chrome, Firefox, IE, and Safari by adding some code.  This worked great EXCEPT Firefox kept giving me the error mentioned above, so I added some additional code to strip out the error message.  Works like a charm now in all four browsers (thanks to our development team who looked at the code for me).  If you haven't been following the thread, this code should be added to the index.html file in our collection of output files you get after publishing the project (the screen shot shows the middle section of the index.html file).

                                                             

                                                            2015-03-06_14-25-41.png

                                                             

                                                            One more note: in order for me to even edit this file, I had to tell my OS to open the index.html file with Notepad (by default, it wanted to open in my browser, which does you no good).  Good luck!

                                                            • 28. Re: Autoplay with HTML 5
                                                              GMOMike Level 1

                                                              Hey RBurke82, this is great, thanks. You're right. I was looking at what Docebo was doing too simply. It isn't stripping it out, just encapsulating it several layers down so it's hard to get to from the console.

                                                               

                                                              I'm going to have to try your solution - it would seem like something you could put into the Index.html file in the Captivate folder's HTML folder BEFORE you create your SCORM files.

                                                               

                                                              I've been running a regular expression in a text editor after-the-fact:

                                                               

                                                              In the CPM.js file, first I replace:

                                                              ,showRuntimeWarning:function\(a,c,e\)\{.*?\rf.*\..*\r.*\r.*?\}\};

                                                              with:

                                                              ,showRuntimeWarning:function(a,c,e){log("browser warning: ",a,c,e)}};

                                                               

                                                              That keeps the warning present; it just puts it into a console log instead of an obtrusive dialog box that would frighten users.

                                                               

                                                              Next, I replace:

                                                              (cp.CPProjInit\s*=\s*function\(\))

                                                              with:

                                                              window.log=function(){log.history=log.history||[];log.history.push(arguments);if(this.console){console.log(Array.prototype.slice.call(arguments))}};\1

                                                              That provides a universal console log if they don't have Firefox Firebug extension.

                                                               

                                                              I do already have the fastclick.js fix applied. I found that somewhere else in this forum. That fixed the autoplay issue with Chrome browser for me.

                                                               

                                                              Now, I have a question for you. If you're using Docebo LMS, are you also having any trouble with URLs? There are several ways to link to an address from within Captivate, and all of them seem to be thwarted by Docebo.

                                                               

                                                              Thanks again for your help

                                                              Mike

                                                              • 29. Re: Autoplay with HTML 5
                                                                b.rembrandt Level 1

                                                                Thank you for this info.  I just used it with PhoneGap and the Captivate 9 file loaded immediately.

                                                                • 30. Re: Autoplay with HTML 5
                                                                  tunghoy Level 1

                                                                  The good news is that this works. The not-so-good news is that it blows by the invisible checkbox I inserted with the "Pause project until user clicks" option, meant as a way of stopping the timeline. I had the checkbox enter after 1 second, to eliminate conflict with the code, but the slides advance, anyway.

                                                                  • 31. Re: Autoplay with HTML 5
                                                                    Express1999 Level 1

                                                                    I know this thread is getting old but I'm hoping someone still gets messages from it...

                                                                    I got the CP movie to play automatically on mobile but I'm not getting audio with it. Any suggestion to get the audio to play? When I had to tap the play button to run the CP on mobile, I got everything but now that it plays automatically, there's no audio. Thanks for any help!

                                                                    • 32. Re: Autoplay with HTML 5
                                                                      bartk67848914 Level 1

                                                                      Same here. Removing the play button using the method above breaks any video functionality in my particular project. There has to be a better way.

                                                                      • 33. Re: Autoplay with HTML 5
                                                                        b.rembrandt Level 1

                                                                        All you have to do is open the index page in a text editor and add this little code snippet:

                                                                         

                                                                        cp.movie.play();

                                                                        }

                                                                         

                                                                        below this:

                                                                        cpInit();

                                                                         

                                                                        It will work on all IOS devices.

                                                                        • 34. Re: Autoplay with HTML 5
                                                                          fujih94238004

                                                                          @ - Wonderful! Thank you so much!

                                                                          • 35. Re: Autoplay with HTML 5
                                                                            arunshete Level 1

                                                                            Hi, i have try this code:

                                                                            If you want autoplay with HTML5, edit index.html and find function DoCPInit(). After CPPostInit(), add the lines

                                                                             

                                                                            CPPlayButtonHandle("onkeydown");

                                                                            cp.movie.play();

                                                                             

                                                                            its working fine. But now i am facing issue with SCORM bookmarking. When i am re-login the LMS, i am not able to view last visited slide where i left course last time.

                                                                             

                                                                            Please help me on this issue.

                                                                            Thanks

                                                                            • 36. Re: Autoplay with HTML 5
                                                                              jeanrouge Level 1

                                                                              On CP 9 HTML5 published, Changing:

                                                                               

                                                                              cpInit();

                                                                                initialized = true;

                                                                              }

                                                                               

                                                                              To:

                                                                               

                                                                              cpInit();

                                                                                cp.movie.play();

                                                                              }

                                                                               

                                                                              Works but there is no audio.

                                                                              • 37. Re: Autoplay with HTML 5
                                                                                arunshete Level 1

                                                                                Thanks.

                                                                                I am using Captivate6 & my project also includes audio as well. So can anyone please help me with this scorm bookmarking issue.