Lectora 21 Custom Audio Player skin difficulty

kaz
kaz Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 8 ☆ Roadie ☆
Hello!

We have used this custom CSS in the past with no issues. Had to modify it slightly for Lectora 18. And now things are pretty funky in 18 or 21. Not sure where the disconnect is.

The main issue I am having now is controlling the background of the closed captioning. CHanges to that section have no affect.

Can anyone give me some direction on what to look for to fix this?

This is what we have been using:

/* Hides Overlay Button on pause/end */
.mejs__overlay-button {
display: none;
}


/* Changes width of control bar */
div[id^="audio"] .mejs__container .mejs__controls {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
bottom: 0;
left: 0;
background: url(MediaPlayer/control-default.png) 0 0;
height: 24px;
width: 575px;
}

/* Hides background of display */
.mejs__container {
background: none;
}

/* Sets vertical position of captions */
div[id^="audio"] .mejs__captions-position-hover {
bottom: 70px;

}

/* Changes alignment of caption text in player */
.mejs__captions-layer {
position: absolute;
bottom: 0;
left: 0;
text-align:center;
line-height: 18px;
font-size: 14px;
color: #fff;
visibility: visible;

}

/* Adjusts width and position of captions-need to hide background to extend width to 500 */
.mejs__captions-position {
position: absolute;
width: 500px;
bottom: 15px;
left: 0;
}

/* Changes color for captions text background - may control initial visibility */

div[id^="audio"] .mejs__captions-text {
padding: 3px 5px;
background: #000;
white-space: pre-wrap;
visibility: visible;
width: 550px;
}

div[id^="video"] .mejs__captions-text {
padding: 3px 5px;
background: #000;
white-space: pre-wrap;
visibility: visible;
width: 550px;
}

.mejs-controls .mejs-captions-button .mejs-captions-selector {
position: absolute;
bottom: 26px;
right: -51px;
width: 85px;
height: 100px;
background: #000;
border: solid 1px;
padding: 10px 10px 0 10px;
overflow: hidden;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
z-index: 99;
}

.mejs__controls .mejs__volume-button .mejs__volume-slider {
/*display: none;*/
height: 115px;
width: 25px;
background: #000;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
top: -115px;
left: 50%;
z-index: 1;
position: absolute;
margin: 0;
}

Comments

  • kaz
    kaz Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 8 ☆ Roadie ☆
    In the meantime, we are unchecking the background box in the closed caption properties so the black background box does not display. This is usable for now.
  • kaz
    kaz Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 8 ☆ Roadie ☆
    The problem we are experiencing now is that when we uncheck the "Display Closed Captions Background" box, and allow the captions to show by default, the audio player displays as expected, and allows a small closed captions area above the audio player. The text is white on a black background. Perfect. We are able to publish with this look.
    However, when we save and open the project again, all the "Display Closed Caption Background" checkboxes are checked again, the audio player moves, and the big background box displays again.
  • thires
    thires Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 6 ☆ Roadie ☆
    I'm having the same 'Display Caption Box' setting won't save issue. Anybody know why? Thanks.
  • jholland
    jholland Administrator, Rockstar Manager Posts: 88 eLearning ROCKSTAR Admin Team
    @kaz and @thires There is a bug in the last version of Lectora Desktop that the "Display Caption box" setting is being saved properly, but is not being loaded properly when the course is reopened. This will be fixed in the next release of Lectora.

    While the Edit mode needs to be fixed by our Devs, maybe as a work around, there is some CSS you can add to the course so that at publish time, your desired settings will be used. Might be able to do this globally, or worst case, address the specific audio objects by their HTML name.
  • kaz
    kaz Community Member, Lectora® Accessibility Group (LAUG) Member, eLearning Brothers® Partner Posts: 8 ☆ Roadie ☆
    Thank you for this suggestion.
    We have been dealing with this since we submitted the bug, and I have not come back to check new responses, so I apologize for the delay.
    We used to use custom CSS to control this, as you can see from the beginning of this post. I have since cleaned up that CSS to include only the items that still work. I have not found the right CSS code to use to address this. If you have a hint about what that might be, I would appreciate it.
    Currently, it takes about 300 clicks to fix all the audio players in our current 55 page course. Thats about 10 min, so not terrible. But I have already had to do that 3 times today for various reasons.
    I tend to keep the course open at all times during the development cycle to avoid having to reset the audio players.
    Today I decided to save the course to a new folder, using save as from the interface and selecting a new folder. I did not close the course. But doing this also reset all the audio players.
    Makes me think there is a preferences file or perhaps the .ini file that might control this? Perhaps if we knew what that was, we can update it manually? Wishful thinking... :)