116 lines
4.8 KiB
HTML
116 lines
4.8 KiB
HTML
<%! from django.utils.translation import ugettext as _ %>
|
|
|
|
% 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">
|
|
<a href="#before-transcript_${id}" class="nav-skip sr">${_("Skip to a navigable version of this video's transcript.")}</a>
|
|
|
|
<article 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>
|
|
<section class="video-player">
|
|
<div id="${id}"></div>
|
|
<h4 class="hd hd-4 video-error hidden">${_('No playable video sources found.')}</h4>
|
|
</section>
|
|
<div class="video-player-post"></div>
|
|
<div class="closed-captions"></div>
|
|
<section class="video-controls is-hidden">
|
|
<div>
|
|
<div class="vcr"><div class="vidtime">0:00 / 0:00</div></div>
|
|
<div class="secondary-controls"></div>
|
|
</div>
|
|
</section>
|
|
<a class="nav-skip sr" id="before-transcript_${id}" href="#after-transcript_${id}">${_('Skip to end of transcript.')}</a>
|
|
</article>
|
|
</div>
|
|
|
|
<a class="nav-skip sr" id="after-transcript_${id}" href="#before-transcript_${id}">${_('Go back to start of transcript.')}</a>
|
|
|
|
<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>
|
|
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);
|
|
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;
|