Skip to main content
Swsubs
Participant
March 22, 2018
Question

How to do a video poster frame?

  • March 22, 2018
  • 2 replies
  • 406 views

In Captivate 2017 I have an embedded video that is not set to autoplay.  The first frames of the video happen to be solid white.  When the slide with the video appears in a browser all you get is a very tiny play arrow in the middle of the white screen that you're supposed to tap to start the video.  On small screens it's about the size of a text list bullet.

Anyway if I could have a poster frame image with a larger play arrow and maybe an instruction it would fill the void.  I tried placing a large circle with an arrow over the tiny play arrow but the video screen appears on to of it.

Does anyone have a way of doing this?

    This topic has been closed for replies.

    2 replies

    TLCMediaDesign
    Inspiring
    March 22, 2018

    If you execute this JavaScript on enter of the slide with the video, it will add the poster.

    setTimeout(function(){var vid=document.getElementsByTagName("video")[0];vid.setAttribute("poster","poster.jpg"); }, 100);

    This script works with the image at the root of the project, i.e. where the index.html is. Just drop the image there.

    Lilybiri
    Legend
    March 22, 2018

    I have an idea, but don't know if you will like it and I didn't test it out.

    Instead of event video, you could use synchronized video because that allows you to cotnrol the video by Captivate actions. It means extending the slide duration to the length of the video. Delay the video a short time on the slide, insert a still image before the video. Then use a custom 'Play button' that will pause the slide just before the video start time. Success action for that button to be set to 'Continue'. Of course, if you want also play and rewind functionality you'll have to create custom buttons for those as well.