Skip navigation
hello1966
Currently Being Moderated

Autoplay with HTML 5

Jul 25, 2012 4:43 AM

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

 
Replies
  • Currently Being Moderated
    Jul 28, 2012 9:38 PM   in reply to hello1966

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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 6:43 AM   in reply to hello1966

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 9:53 AM   in reply to hello1966

    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/C onceptual/Using_HTML5_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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 4, 2012 11:33 AM   in reply to guitaristtuckty

    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 

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 4, 2012 8:43 PM   in reply to StevePixel

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 4, 2012 9:43 PM   in reply to hello1966

    Hey Dave;

     

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

     

    Steve

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 5, 2012 3:30 PM   in reply to StevePixel

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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 26, 2013 2:59 PM   in reply to Kurrykid

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 26, 2013 3:14 PM   in reply to Mike McCauley

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2013 8:38 AM   in reply to Kurrykid

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Calculating status...
    Nov 14, 2013 6:37 AM   in reply to hello1966

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 14, 2013 7:14 AM   in reply to BarbaraFEWW

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points