Adding Closed Captioning to MediaElement (media video player module).

improve_mediaelement.module.php

/**
 * Adds Closed Captioning support to the MediaElement module - http://www.drupal.org/project/mediaelement
 *
 * Parts of this should be turned into a patch eventually for that module.
 *
 * The preprocess assumes a field_collection with the media file field and a file field to upload captions
 * This can obviously be altered to work with other configurations.
 */
/**
 * Implements hook_theme_registry_alter().
 *
 * Adds support for subtitles to the mediaelement module by overriding the theme function.
 */
function improve_mediaelement_theme_registry_alter(&$registry) {
  $registry['mediaelement_video']['variables']['captions'] = FALSE;
  $registry['mediaelement_video']['theme path'] = drupal_get_path('module', 'cdn_video');
  $registry['mediaelement_video']['function'] = 'cdn_video_theme_mediaelement_video';
}

/**
 * Theme callback for mediaelement_video.
 *
 * Essentially the same as the mediaelement function, but adds track tags for the subtitles
 * if they are given.
 */
function improve_mediaelement_theme_mediaelement_video($variables) {
  $output = '<div class="mediaelement-video">';
  $output .= '<video ' . drupal_attributes($variables['attributes']) . ' >';
  if (!empty($variables['captions'])) {
    $output .= '<track kind="subtitles" src="'.$variables['captions'].'" srclang="en" />';
  }
  $output .= '</video>';
  if ($variables['settings']['download_link']) {
    $output .= '<div class="mediaelement-download-link"><a href="' . $variables['attributes']['src'] . '">' . filter_xss_admin($variables['settings']['download_text']) . '</a></div>';
  }
  $output .= '</div>';
  return $output;
}

/**
 * Implements hook_preprocess_HOOK().
 *
 * Preprocess the video field_collection to show the proper things
 * and pass values to the correct functions.
 */
function improve_mediaelement_preprocess_field(&$variables) {
  if ($variables['element']['#field_name'] != 'field_videos_extra') {
    return;
  }

  foreach ($variables['items'] as $key => $item) {
    if (!empty($item['entity']['field_collection_item'])) {
      foreach ($item['entity']['field_collection_item'] as $delta => $fci) {
        if (!empty($fci['field_video'][0]) && !empty($fci['field_closed_captioning'][0]['#markup'])) {
          $url = parse_url($fci['field_closed_captioning'][0]['#markup']);
          $fci['field_video'][0]['#captions'] = $url['path'];
          $fci['field_closed_captioning']['#access'] = FALSE;
          $variables['items'][$key]['entity']['field_collection_item'][$delta] = $fci;
        }
      }
    }
  }

  //this code is required to make mediaelement.js work with jquery < 1.6
  drupal_add_js('
    jQuery.fn.extend({
      prop: function( name, value ) {
        this[0][name] = value;
        return this;
      }
    });', array('type' => 'inline', 'weight' => -5));
}