Closed Captioning Issues and Position/Customization

Hi @jorchin.3930 Clicking the CC only stops showing the text, if there is a CC file for that audio we show the box where the text will appear should you toggle it back on. I don't know of a way to remove it when the CC button is clicked, but I will check with the dev team.

@tea

Thanks for the quick response. I don't understand why it would function that way. If the CC is off the box should go away. What if it is covering some bit of content on the screen?

Do you have any idea if my second question is even possible? I could live with the box staying up the entire time if I could size it and position it correctly.

Please let me know if the dev team has any answers, thanks.

Just as a follow up, I find it interesting that CC on a video can be turned on and off and the black box will appear and dissappear.

@jorchin.3930 it turns out something was put into LO to allow you not to show the black box. Select your audio file, gp tp Properties and click the Add Captions. There is a checkbox that allows you to display or not display the box.

@tea Amazing! Thanks so much. That did the trick for the box! Still wondering about customizing its size and location if anyone else has any ides. Again, thanks @tea for the timely responses.

Hi, I dont have a answer but the same question as you (3).

We also looking into how we can display CC like you want. We want the same player and CC position for sounds and movies. Its strange little box to have the captions for sounds? For now we dont use built in caption, we put them there manually but we really have. to find a way that both looks well and follow WGA. We just build a course in Storyline and there it worked much better.

We have not had that much time yet to investigate this properly so I hope there is a solution that we have missed=)

(We use online)

undefined

Howdy @jorchin.3930 and undefinedjwestlund6143!undefined

It's been awhile since I'd developed my own custom players, so I had to do some digging around. Which Lectora version are you using?

Essentially, what you have to do make any changes to the appearance of the player or its elements, you need to create a custom CSS file that targets the elements of the player you want to change. In the case of the caption positioning, this is what I have on one of my customer players:

div[class="mejs-captions-layer mejs-layer"] {

width: 340px !important;

background: #000;

}

/* Sets vertical position of captions and alignment of text */

div[id^="audio"] .mejs-captions-position-hover {

width: 500px;

bottom: 54px;

text-align: left;

left: 10px;

}

/* Changes color for captions text background use visibility: visible; to auto display captions */

div[id^="audio"] .mejs-captions-text {

padding: 3px 5px;

background: #000;

white-space: pre-wrap;

}

/* Hides background of display */

div[id^="audio"] .mejs-container {

position: relative;

background: none;

font-family: Helvetica, Arial;

text-align: left;

vertical-align: top;

text-indent: 0;

}

(Side note: If you're using Lectora 18, the "-" in the mejs names are now double underscored "__").

Here's the caveat - see that "left: 10px" in the vertical alignment section? That will move the location of the captions relative to the left boundary of the player itself. You can change this to whatever you want, so you may need to play with the number to see what works.

The OTHER caveat that I don't know that you'll be able to overcome is a limitation I found on the width of a player. If I understand correctly, you want the caption line to be the entire width of the window with the caption text centered. Sadly, I've never been able to create a player with a width of more than 500px. What that means is that when you offset, the caption text will move, but will be no more than 500px wide. The other piece of this is that you have to set the width of the player itself to 500px, as well.

I've attached the zip files with two of the players I've developed, one for Lectora 16 and one for Lectora 18 (it's important to differentiate as the code is different between the two versions).

Toy around with them at your leisure. There are couple of helpful tutorials that got me started that may inspire you to do more, which I've added at the end here.

https://community.trivantis.com/shared-content/custom-html5-media-player-skins/

https://www.trivantis.com/blog/skinning-lectoras-new-html5-based-media-player/

@JasonADal, @wheels I see you guys have chimed in in the past about customizing CC and video/audio players. Do you guys have any thoughts for how to implement my second question from the original post (accidentally labeled as question 3, sorry!)

Thanks

@jorchin.3930

Try putting that JavaScript action at the title level and inheriting it to all pages, I don't see why it wouldn't just work.

Dis-inherit it on pages if it causes problems, but it shouldn't cause problems unless you have some media player you don't want the behavior on.

The JS is necessary to move the CC display area onto the page and out of the player control, the other CSS might make sense to move into a CSS object but I was being lazy here.

Thanks for the feedback on associating a Text Block, we are talking about it!

- Joe

Hi All,

I made a very quick example in Lectora Online for how this can be done. It needs some tweaking for Lectora Desktop but should work similarly. It is just using css to move the location of the CC display area.

It only moves the CC display area after publishing or in single page preview mode. Adjust the CSS as necessary. Hope this helps you out. We will look into making the CSS display area a separate object, maybe we could just allow you to specify a text block to display the CC information, that way you can use all the text block formatting as well?

See attached PKG file.

- Joe

@wheels and @JasonADal thank so much for the detailed responses!

Joe, I think you nailed it! This looks like a great solution. One question - I see the CSS is added via javascript as an action on the audio. Would it be possible to add some CSS at the title level to affect all of my audio clips? This is a pretty lengthy course with a lot of audio so I would prefer to be able to tackle that in one pass.

Also, I like your potential solution of specifying a text block to display the CC information. That would be quite useful!

Thanks again,

Jon

Hi Joe.

I'm trying to make what you did with the LO captions CSS work in Lectora Inspire 18. The part of making the black box that appears when adding CC, disappears with this code, which is good, but the captions themselves don't show up like they do in your sample image. Do you have a sample or an idea of what I would need to do in order to make this work in Inspire?

Thanks.

Shawn

Hi All.

I figured out how to make Joe Wieloch's Close Captioning position code for the audio player work for Lectora Inspire 18 (desktop version) and wanted to share it. It was a very simple change, just adding __ between mejs and captions and then adding the top and left css to position the CC text. Add the html extension (see attached Lectora file) to the title level of your project and it will work for all of your audio files in the project. This works great and gets rid of the standard ugly black box that appears above the audio player when CC text is added to it. Hopefully someone at eLearning bros. will see this and include this functionality in one their updates (unless they already have).

Thanks Joe for posting this code. It was the final touch I needed for my project.

-Shawn

undefined