Custom audio player skin issue.

tbrodowski6367 Community Member Posts: 31

I've tried to add custom audio player skin to a title but when I preview it, it shows the default Lectora skin.  I even downloaded the "Green Tea" skin from the community and tried using it and again on preview I see the default Lectora player skin.  Does anyone else have this issue or know how to fix it?

I'm attaching a Lectora title and added the file to that folder as well.

Thank you!


  • carlfink
    carlfink Community Member Posts: 1,099 ✭ Legend ✭
    Confirmed for video in 18.2.3: import the custom skin, there are no errors, and the appearance of the video is the standard player with no change. Tested locally in "Preview in browser" and on Reviewlink.

    Thanks to <span class="handle-sign">@&lt;/span>tbrodowski6367 for the pointers to custom skins ... if only they worked, they would solve my problem.

    Edit: even if I edit one of the standard skins (I increased the size of the volume button), Lectora 18.2.3 ignores the skin entirely and shows the standard player. I honestly don't know how you did that--the selected skin is displayed if you don't edit the CSS, but if you do, the entire CSS file is ignored?
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 665 eLearning ROCKSTAR Admin Team
    We updated the media player in v18.2 and it used different class names and some of the css sizing changed. So there has to be conversion done for any custom skins. The help is updated with the necessary instructions:

    Here was another post on the issue:
  • klaatu
    klaatu Community Member Posts: 986 ☆ Roadie ☆
    Have you considered importing your own copy of MediaElement.js and forgoing Lectora's altogether?

    Just another option. Full control without wrestling.
  • tbrodowski6367
    tbrodowski6367 Community Member Posts: 31
    Thank you all.  I'll try both solutions.
  • carlfink
    carlfink Community Member Posts: 1,099 ✭ Legend ✭
    Joe, I copied the exact CSS from your linked help file to a file, search/replaced the file names to match my actual file names on the disk and ... when imported, there are no errors, but it does not work. The player remains the default player, totally ignoring the custom skin. This is an actual bug.

    Honestly, if you want to allow customizing the player and the reaction to some trivial error is to ignore the file entirely, you need to create a GUI skin editor instead of expecting users to debug undocumented text config files for you. I'm a Unix systems admin (and documentation writer) and I find this to be difficult. (It doesn't help that the MediaElement.js documentation is atrocious.)
  • tbrodowski6367
    tbrodowski6367 Community Member Posts: 31
    I've created a sprite and CSS file from the linked document, then changed the sprite images and updated the CSS and it works perfect.
  • KaiNie
    KaiNie Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 11 ☆ Roadie ☆
    Having the same issue ...
    Would anyone be able to post a working skin file, to allow us to check if it works basically and to continue customizing it from there?