Adapt Learning Community: Video captions

This might be built in but I can't find a reference to it. I'm trying to add subtitles to a video for accessibility. I did try to update the template for the media component and the component configuration. No dice. Caption control doesn't show. The captions vtt file is in the video folder. It looks like the component is using mediajs.

{
"_id":"c-102",
"_parentId":"b-52",
"_type":"component",
"_component":"media",
"_classes":"",
"_layout":"full",
"title":"Media component",
"displayTitle":"Media component",
"body": "As mentioned above in the hot graphic - a media component is both a single and spanned component. Below is a media component spanned.",
"instruction":"",
"_setCompletionOn":"play",
"_media": {
"mp4": "course/en/video/big_buck_bunny.mp4",
"ogv": "course/en/video/big_buck_bunny.ogv",
"poster": "course/en/video/big_buck_bunny-large.jpg",
"subtitles":"course/en/video/captions.vtt"
},
"_pageLevelProgress": {
"_isEnabled": true
}
},

*****************

And in media.hbs:

{{#if _media.subtitles}}
<track srclang="en" kind="subtitles" type="text/vtt" src="{{_media.subtitles}}" />
{{/if}}

Found it! Added tracks (and volume / fullscreen) as a feature in adapt-contrib-media.js

postRender: function() {
var mediaElement = this.$('audio, video').mediaelementplayer({
pluginPath:'assets/',
success: _.bind(function (mediaElement, domObject) {
this.mediaElement = mediaElement;
this.setReadyStatus();
this.setupEventListeners();
}, this),
features: ['playpause','progress','current','duration','tracks','volume','fullscreen']
});

Show parent | Reply

Hey Steve,

Would you mind doing a pull request for this feature in the media components github account please? You can find it here github.com/adaptlearning/adapt-contrib-media. Do you know if not having the captions attribute filled out affects the media player?

Thanks,

Daryl

Show parent | Reply

Sure,will do a pull request once I figure out how to do that:) New to GIT and this whole build philosophy. Digging it but learning.

Adding the element with a blank caption won't break the player. In the example above, it's only displaying the element if the attribute is added to the JSON.

Show parent | Reply