Closed Captioning Issues and Position/Customization

jorchin-3930
jorchin-3930 Community Member Posts: 46 ☆ Roadie ☆
Hello,

I've seen a lot of discussions on CC issues and customization but I can't seem to find a solution to my two problems.

1: The CC on and off button doesn't seem to remove the black box that would contain the text. If I select "none" the black box stays with no text. If I select "CC" I get the closed captioning in the box. I am using the default controller and have tried this with the the default for CC being both ON and OFF.

3: I would like to customize where the CC displays in my course. Is this possible? Please see the attached screen shots. CC_1.png is standard and CC_2.png is how I would prefer to have it work.

Thanks!

Comments

  • tea
    tea Community Member Posts: 128
    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.
  • jorchin-3930
    jorchin-3930 Community Member Posts: 46 ☆ Roadie ☆
    @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.
  • jorchin-3930
    jorchin-3930 Community Member Posts: 46 ☆ Roadie ☆
    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.
  • tea
    tea Community Member Posts: 128
    @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.
  • jorchin-3930
    jorchin-3930 Community Member Posts: 46 ☆ Roadie ☆
    @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.
  • jwestlund6143
    jwestlund6143 Community Member Posts: 17
    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)

     
  • jorchin-3930
    jorchin-3930 Community Member Posts: 46 ☆ Roadie ☆
    @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
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    Howdy @jorchin.3930 and <span class="bbp-user-nicename"><span class="handle-sign">@&lt;/span>jwestlund6143!</span>

    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/
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 610 eLearning ROCKSTAR Admin Team
    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
  • jorchin-3930
    jorchin-3930 Community Member Posts: 46 ☆ Roadie ☆
    @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
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 610 eLearning ROCKSTAR Admin Team
    @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
  • smcculley1282
    smcculley1282 Community Member Posts: 14 ☆ Roadie ☆
    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
  • smcculley1282
    smcculley1282 Community Member Posts: 14 ☆ Roadie ☆
    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