Custom HTML5 Media Player Skins

With the release of Lectora 16.1, a new HTML5-based media player has been introduced. Just as with the old Flash-based media player, you can develop custom skins for it. However, the format of the skins for the new player differs from the old format. The new skins are based on a sprite sheet of controller elements and a CSS file. This freebie is a set of skins for the new HTML5 media player. These skins were designed to match the blue, green, and red responsive GUI themes that were designed for the release of Lectora 16. You can find those themes here:

http://community.trivantis.com/shared-content/flat-rcd-themes-for-lectora-16-and-lectora-online/

To download the media player skins, click on the Download Lectora File button. We are also providing the Photoshop file for the sprite sheets if you would like to modify the design. To download this, click on the spritesheets.psd link beneath the preview image.

To use the skins in your own title, unzip the downloaded skins file. Inside the zip are three more zip files called bluetea.zip, greentea.zip, and redtea.zip. These are the actual skin files. Double-click the media in your title for which you would like to apply one of the custom skins. Then open the Controller menu on the media Properties ribbon and choose Manage Custom Skins at the bottom of the menu. The resulting dialog box will allow you to import a skin. Once imported, open the Controller menu again and scroll to the bottom of the list. Here you will see the name of the imported custom skin. Select the name to apply the skin to your media.

To find out more about how to build your own custom skins, see our blog post about how to build the skins yourself.

The new HTML5-based media player will also be coming to Lectora Online very soon!

*Very special thanks to Johnattan Barona, Rene Morgan @rmorgan9926, Tom Leone @tleone4566, Stephen Wu @swu7570, Luiz Dias, and Daryl Fleary @dfleary who were all a huge help to me in putting this freebie together! 

Preview image
Additional files: spritesheets.psd

Tags: , , , , , , , ,

Comments

  1. Profile photo of Gary Fisher
    Gary Fisher

    Where is the option to have the player use a HTML5 player instead of using a Flash/shockwave player by default?

    1. Profile photo of Wendy Miller
      Wendy Miller Post author

      Hi Gary,
      There is no option to use the HTML5 player. With Lectora 16.1 and above, the HTML5 player is used by default. However, you may notice that the player.swf is still included with your published files. This is just a fall-back in the event that the user is running the course on an old browser that does not support the playing of media via HTML5.

Your email address will not be published. Required fields are marked *