video.html

<%page expression_filter="h"/>

<%!
from django.utils.translation import ugettext as _
from openedx.core.djangolib.js_utils import js_escaped_string
%>
% if display_name is not UNDEFINED and display_name is not None:
    <h3 class="hd hd-2">${display_name}</h3>
% endif

<div
    id="video_${id}"
    class="video closed"
    data-metadata='${metadata}'
    data-bumper-metadata='${bumper_metadata}'
    data-poster='${poster}'
    tabindex="-1"
>
    <div class="focus_grabber first"></div>

    <div class="tc-wrapper">
      <div class="video-wrapper">
          <span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span>
          <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span>
          <div class="video-player-pre"></div>
          <div class="video-player">
              <div id="${id}"></div>
              <h4 class="hd hd-4 video-error is-hidden">${_('No playable video sources found.')}</h4>
          </div>
          <div class="video-player-post"></div>
          <div class="closed-captions"></div>
          <div class="video-controls is-hidden">
              <div>
                  <div class="vcr"><div class="vidtime">0:00 / 0:00</div></div>
                  <div class="secondary-controls"></div>
              </div>
          </div>
      </div>
    </div>

    <div class="focus_grabber last"></div>
  <ul class="wrapper-downloads">
    % if download_video_link:
        <li class="video-sources video-download-button">
            <a href="${download_video_link}">${_('Download video')}</a>
        </li>
    % endif
    % if track:
        <li class="video-tracks video-download-button">
          % if transcript_download_format:
            <a href="${track}">${_('Download transcript')}</a>
            <div class="a11y-menu-container">
                <a class="a11y-menu-button" href="#" title="${'.' + transcript_download_format}" role="button" aria-disabled="false">${'.' + transcript_download_format}</a>
                <ol class="a11y-menu-list" role="menu">
                % for item in transcript_download_formats_list:
                  % if item['value'] == transcript_download_format:
                  <li class="a11y-menu-item active">
                  % else:
                  <li class="a11y-menu-item">
                  % endif
                  ## This is necessary so we don't scrape 'display_name' as a string.
                  <% dname = item['display_name'] %>
                      <a class="a11y-menu-item-link" href="#${item['value']}" title="${_(dname)}" data-value="${item['value']}" role="menuitem" aria-disabled="false">
                        ${_(dname)}
                      </a>
                  </li>
                % endfor
                </ol>
            </div>
          % else:
            <a href="${track}" class="external-track">${_('Download transcript')}</a>
          % endif
        </li>
    % endif
    % if handout:
        <li class="video-handout video-download-button">
            <a href="${handout}" target="_blank">${_('Download Handout')}</a>
        </li>
    % endif

    % if branding_info:
      <li id="branding" class="branding">
        <span class="host-tag">${branding_info['logo_tag']}</span>
        <a href="${branding_info['url']}" target="_blank" title="${branding_info['logo_tag']}"><img class="brand-logo" src="${branding_info['logo_src']}" alt="${branding_info['logo_tag']}" /></a>
      </li>
    % endif
  </ul>
</div>
% if cdn_eval:
<script>
  //TODO: refactor this js into a separate file.
  function sendPerformanceBeacon(id, expgroup, value, event_name) {
    var data = {event: event_name, id: id, expgroup: expgroup, value: value, page: "html5vid"};
    $.ajax({method: "POST", url: "/performance", data: data});
  }
  var cdnStartTime;
  var salt = Math.floor((1 + Math.random()) * 0x100000).toString(36);
  var id = "${id | n, js_escaped_string}";
  function initializeCDNExperiment() {
    sendPerformanceBeacon(id + "_" + salt, ${cdn_exp_group}, "", "load");
    cdnStartTime = Date.now();
    $.each(['loadstart', 'abort', 'error', 'stalled', 'loadedmetadata',
                    'loadeddata', 'canplay', 'canplaythrough', 'seeked'],
                    function(index, eventName) {
      $("#video_" + id).bind("html5:" + eventName, null, function() {
        timeElapsed = Date.now() - cdnStartTime;
        sendPerformanceBeacon(id + "_" + salt, ${cdn_exp_group}, timeElapsed, eventName);
      });
    });
  }
  $("#video_" + id).bind("initialize", null, initializeCDNExperiment);
  if ($("#video_" + id).hasClass("is-initialized")) {
    initializeCDNExperiment();
  }
</script>
% endif;