Closed Caption Positioning

I cannot. Lectora only allows me to upload/add an XML file. The file contents can be anything, including WebVTT format, and mediaelement seems to be able to auto-detect it.

On a separate note, I tried adding VTT file to a Lectora Online course and it didn't work. It says "XML subtitles" only despite the help detailing use of three formats.

UPDATE: Ok, I got it. I have to rename .vtt to .xml to be able to upload.

@Ssneg and others:

Sorry for the confusion. We've apparently had a mishap in our Help. Lectora Online (3.1) currently only supports the XML closed caption format. The next release of Lectora Online will also support WebVTT and SRT.

- Daryl

Sergey - That's interesting that you had to rename the file. I'm attaching the VTT file supplied by our translation service. Can you upload it without renaming?

Thanks for the info on Media Element JS. This is a GREAT lead for me to research further to not only learn more about their closed caption capabilities, but to learn more about the options we have post-publish with their code.

BrianR

undefined

@broeme, Lectora uses mediaelement.js to play video so you can consult with http://mediaelementjs.com guys to find out which features of VTT they support, whether expanding support is on their roadmap. Or maybe this is a browser issue, VTT support is uneven across browsers (http://caniuse.com/#feat=webvtt)

Yep, I just tried a multi-line CC right aligned and it looks nice. I can envision using it. 

@broeme

Yes, I checked on that too. We currently set the closed caption space as side-to-side on the media, and force the text for each line to be centered. Based on this thread, I have already spoken with the development team leads and we will look to allow left, center, and right justified text in the next releases of Lectora Online and Lectora desktop. Thanks for the suggestion.

Note: CC has been in the products for years and no on has asked for alignment. In fact, thinking about movies and my TV I don't think I've ever seen anything except centered.

@dfleary, this is what it shows in Lectora 16, too. Just XML (and the file picker also targets XML only). But if I rename .vtt to .xml it can be added and it actually works :)

Daryl - Thanks for the follow-up. I recently updated to 16.2.1 so that explains why I had the VTT option. Circling back to my initial question, are you aware if we can use position and formatting parameters to change the location of the closed caption text? My initial efforts to add those characteristics have failed to produce results different than the standard bottom/center justification.

@ssneg, yes that is correct.

• In Lectora 16.0 nothing was changed regarding the media player.
• In Lectora 16.1 we changed to the HTML5 media player.
• In Lectora 16.2 we began supporting WebVTT and SRT along with XML captioning.

Everyone will need to upgrade to the latest version (16.2.1) to use the new CC formats.

Daryl, thank you for the explanation, now I get it. I also want to second your comment about CC alignment. I never knew you could even control CC alignment via the subtitle source file and never heard anyone asking for this in 8 years.

However, I can imagine why someone would want to do that. Imagine CC-ing a software screen recording, there could be a situation when the subtitle text will obscure something important in the lower part of the screen. Also, when CC-ing a video with some hard-coded subtitles (e.g. movie cast list at the beginning of a feature film) one might want to move CC text away from the hard-coded text.

Anyhow, this conversation should continue on the mediaelement's GitHub page since this is their code.

Attached a screen cap of the css (HTML extension , Cascading Style Sheet type) we used to format the VTT audio captions the way we wanted them. Worked like a charm :)

I did not have any difficulty importing WebVTT captions one by one each of my audio files, but I had hoped to bring them en masse into Lectora's media library, to make this process easier (we have a lot of audio!). Unfortunately, the media library does not recognize the WebVTT file type yet, so I couldn't import all of them at once. (Please let me know if that will change in an upcoming Lectora Publisher update!)

undefined

Yeah. Try the following placed in a Run JavaScript action on show of the video player.

$('video125').objMedia({

startLanguage: 'en'

});

Replace video125 with the HTML Name of your video player.

undefined

Quick follow-up question regarding closed caption. By default, the cc text is turned off, and the user has to click the cc button and choose a language for the text to appear. Is there a way to have the closed caption text appear by default? Thanks!

Rats! I may have spoken too soon. The javascript action seemed to work because when I viewed the video pages via "preview in browser" feature, the closed caption appeared on load. However, it appears that those course launches were just "remembering" that I had previous turned closed caption on. If I turn off closed caption, then preview the course again, the closed caption is not visible, even with the action in place. Additionally, if I import the course into SCORM Cloud, the closed caption is not visible upon first launch.

My action is placed on the video object and set to On Show -> Run JavaScript. The script is...

$('video50225').objMedia({startLanguage: 'es'});

The resulting code after the course is published is...

video50225 = new ObjMedia('video50225','High Bandwidth Video',263,169,580,303,0,119,'media/49_svmt02.hr.mp4',0,0,1,0,1,0.80,1,'div', 0 );

video50225.addCaption('49_svmt02.hr.es.vtt', 'es');

video50225.BuildMediaString()

video50225.actionShow = video50225actionShow

video50225.build()

Do you see any error or issues?

Boom! That worked...thanks Darrel. The only change I had to make was to clean up the single quotes. They came in as weird characters that were breaking the course in HTML, however that's likely just due to the copy/paste process. Thanks again!

Daryl or Darrel,

Is there a way to change the color of the CC background panel? I'm working on an instructional video that describes the steps of a certain application online. The background of this application is white, so when the CC lines are displayed on the default semi-transparent panel, they're visually blurred.

Thanks for any tip.