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:

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,, and 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: , , , , , , , ,

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