Add support for track/captions/subtitles

This sounds like a great step forward for accessibility within Video.js

Hi Christian,

I'm interested in adding captions to my video too, but can't seem to get this to work. Any chance you'd mind posting/emailing the complete template file?

Thanks in advance!

Matt

Never mind, I figured it out:

The time format in the .vtt file MUST match the time format in the video file it is attached to. E.g., if the video length is 0.35 (35 seconds), then the the time format in the .vtt file must be M:SS.

And in case this helps someone out there trying to accomplish the same thing, here is the entire videojs.tpl file with Christian's modifications added (Thanks, Christian)

<?php
/**
 * @file
 * Provide the HTML output of the Video.js video player.
 */

$attrs = '';
if (!empty($autoplay)) {
  $attrs .= ' autoplay="autoplay"';
}
if (!empty($poster)) {
  $attrs .= ' poster="'. check_plain($poster) .'"';
}

if (!empty($items)): ?>
<video id="<?php print $player_id; ?>-video" data-setup="{}" class="video-js vjs-default-skin" width="<?php print($width) ?>" height="<?php print($height) ?>" controls="controls" preload="auto"<?php echo $attrs; ?>>
<track srclang="en" label="English" kind="subtitles" src="<?php print(file_create_url('public://test.vtt'));?>" default />
<?php foreach ($items as $item): ?>
  <source src="<?php print(file_create_url($item['uri'])) ?>" type="<?php print check_plain($item['videotype']) ?>" />
<?php endforeach; ?>
</video>

<?php endif;

As mentioned in #1, it would be a wonderful feature to have caption/subtitle support for this module. Drupal is a fantastic CMS not least of all because of its localization capabilities. Thanks for considering!

Matt

Here's some documentation I wrote on using tracks/captions/subtitles with HTML5.

http://drupal.org/node/1927080

Matt

Added to 7.x-3.x.

Awesome! Can't wait to try it out.

Thanks, Jorrit!

Matt

Let me know if it works for you. I have updated the readme file, the instructions for vtt files are a bit specific, because you have to specify the language.

Hi Jorrit,

I can't seem to make it work. I have a Content Type called HTML5 Movie with a file field for video.js and a link field for the VTT file. I want to use the link field here because I have views set up to provide a dynamic feed for the VTT file. I tried to specify the language in the link title, but I don't think this is right. I don't see any options for enabling track either. I read the README, but could you please provide some more specific directions, with an example, perhaps?

Thanks!

Matt

At this moment it only works when you add the vtt to the file field. So the vtt and the mp4 must be both in the file field or both in the link field. Sorry, your way of working doesn't work at this moment.

Okay, I see. I wonder if I could post the video to YouTube or something and then link to the Views URL. I saw it worked where both movie and subtitles were uploaded as files, but the option to activate subtitles was not obvious. Is there a way to set the default to play subtitles?

Thanks very much,

Matt

At this moment, no, but I can add it later.

I have enhanced track support. You can now refer to another field for the subtitle source and you can configure which track will be the default track. Keep in mind that Video.js has a bug regarding default tracks at the moment, but when Video.js is fixed, it will work.

You will find the new configuration options in the field display settings or the View field settings.

Excellent! I can't wait to give it a try!

Thank you very much!

Matt

Sorry to reopen this issue -- there's nothing wrong with the videojs module, but the default language bug still hasn't been fixed in the videojs plugin and I didn't know where else to post. This jQuery snippet is a quick and easy fix for the problem:

(function ($) {
Drupal.behaviors.PixtureReloaded = {
attach: function() {
$("li.vjs-menu-item").eq(1).trigger('click');
}
};
}(jQuery));

Just thought I'd post in case anyone else really needs this default functionality, as I do.

By the way, using the links option in the latest dev version with a Views Datasource feed, I've been able to dynamically create a VTT file for each page, using nid as an argument. This allows an end-user to populate the times and text for the VTT file through the edit page directly, with no explicit VTT file creation required. The datasource view creates the file, which is specified in the link, below the video path link.

Thanks, Jorrit, for the excellent work on this module!

Updated issue summary.