Explore the community Forums Lectora Online Lectora Online Questions & Answers Closed Captioning Issues and Position/Customization

Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #439605 Score: 0
    Profile photo of Jonathan Orchin
    Jonathan Orchin
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    2 pts
    @jorchin.3930

    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!

    Attachments:
    #439620 Score: 0
    Profile photo of tea
    tea
    Member
    beginner
    intermediate
    curious george
    profile
    friend finder
    wise owl
    picture perfect
    contributor
    5 pts
    @tea

    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.

    #439623 Score: 0
    Profile photo of Jonathan Orchin
    Jonathan Orchin
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    2 pts
    @jorchin.3930

    @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.

    #439625 Score: 0
    Profile photo of Jonathan Orchin
    Jonathan Orchin
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    2 pts
    @jorchin.3930

    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.

    #439627 Score: 0
    Profile photo of tea
    tea
    Member
    beginner
    intermediate
    curious george
    profile
    friend finder
    wise owl
    picture perfect
    contributor
    5 pts
    @tea

    @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.

    Attachments:
    #439630 Score: 0
    Profile photo of Jonathan Orchin
    Jonathan Orchin
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    2 pts
    @jorchin.3930

    @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.

    #439657 Score: 0
    Profile photo of Josefin Westlund
    Josefin Westlund
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    1 pt
    @jwestlund6143

    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)

     

    #439678 Score: 0
    Profile photo of Jonathan Orchin
    Jonathan Orchin
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    2 pts
    @jorchin.3930

    @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

    #439681 Score: 1
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    Howdy @jorchin.3930 and <span class=”bbp-user-nicename”><span class=”handle-sign”>@</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.

    Custom HTML5 Media Player Skins

    Skinning Lectora’s New HTML5-based Media Player

    This post has received 1 vote up.
    #439704 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    74 pts
    @wheels

    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

    • This reply was modified 8 months, 1 week ago by Profile photo of Joe Wieloch Joe Wieloch.
    #439730 Score: 0
    Profile photo of Jonathan Orchin
    Jonathan Orchin
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    2 pts
    @jorchin.3930

    @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

    #439745 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    74 pts
    @wheels

    @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

    #448865 Score: 0
    Profile photo of Shawn McCulley
    Shawn McCulley
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    1 pt
    @smcculley1282

    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

    #448997 Score: 1
    Profile photo of Shawn McCulley
    Shawn McCulley
    Member
    beginner
    intermediate
    friend finder
    curious george
    picture perfect
    wise owl
    contributor
    1 pt
    @smcculley1282

    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

     

    This post has received 1 vote up.
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.