#437557 Score: 1
Profile photo of Robert Aung-Naing
Robert Aung-Naing
friend finder
wise owl
19 pts

For item 1:

To show a poster (thumbnail) image for the video before it starts playing, you can add an image to the title and add a couple of Run Javascript actions (one to image and one to video). Basically, when the page loads it will set the image URL to the “poster” attribute of the video player. The player will then show the image until you play the video.

Note that I only tested with MP4 videos. Also, this will work in published content only – does not work in Run Mode.

Here are the steps:

  • On the page with the video, add an image that you want to use as poster and make it a very small size. Make sure this image is above the video on the left-hand-pane of the editor so that it will be behind the video when rendered. Also set the opacity to 0 (opacity setting is on Style tab). We just want that image available on the page but not actually show it as an image.
  • To that image, add a “Run Javascript” action with trigger “Show” with the following code:
        window.myPoster = %HTMLNAME%;
  • To the video, add a “Run Javascript” action with trigger “Show” with the following code:
        window.myVideo = %HTMLNAME%;
        if(myVideo && window.myPoster && myPoster.dCon)
          myVideo.mePlayer.poster = myPoster.dCon.src;
  • Click on Page Preview (F9) to test it.

For item 2:

If you are using the default controller, Lectora Online should determine the correct video size and you should not see any horizontal or vertical black bars. If you change the controller from the Playback Options tab, you may see black bars since the controller height changes. To fix it go to Position & Size tab and un-check (un-highlight) Maintain Ratio. Then fine adjust the Width or Height as needed.


This post has received 1 vote up.