149 lines
6.8 KiB
HTML
149 lines
6.8 KiB
HTML
<%! from django.utils.translation import ugettext as _ %>
|
|
|
|
% if display_name is not UNDEFINED and display_name is not None:
|
|
<h2>${display_name}</h2>
|
|
% endif
|
|
|
|
<div
|
|
id="video_${id}"
|
|
class="video closed"
|
|
|
|
data-streams="${youtube_streams}"
|
|
|
|
${'data-sub="{}"'.format(sub) if sub else ''}
|
|
${'data-autoplay="{}"'.format(autoplay) if autoplay else ''}
|
|
|
|
${'data-mp4-source="{}"'.format(sources.get('mp4')) if sources.get('mp4') else ''}
|
|
${'data-webm-source="{}"'.format(sources.get('webm')) if sources.get('webm') else ''}
|
|
${'data-ogg-source="{}"'.format(sources.get('ogv')) if sources.get('ogv') else ''}
|
|
|
|
data-save-state-url="${ajax_url}"
|
|
data-caption-data-dir="${data_dir}"
|
|
data-show-captions="${show_captions}"
|
|
data-general-speed="${general_speed}"
|
|
data-speed="${speed}"
|
|
data-saved-video-position="${saved_video_position}"
|
|
data-start="${start}"
|
|
data-end="${end}"
|
|
data-transcript-language="${transcript_language}"
|
|
data-transcript-languages='${transcript_languages}'
|
|
data-autoplay="${autoplay}"
|
|
data-yt-test-timeout="${yt_test_timeout}"
|
|
data-yt-api-url="${yt_api_url}"
|
|
data-yt-test-url="${yt_test_url}"
|
|
data-transcript-translation-url="${transcript_translation_url}"
|
|
data-transcript-available-translations-url="${transcript_available_translations_url}"
|
|
|
|
## For now, the option "data-autohide-html5" is hard coded. This option
|
|
## either enables or disables autohiding of controls and captions on mouse
|
|
## inactivity. If set to true, controls and captions will autohide for
|
|
## HTML5 sources (non-YouTube) after a period of mouse inactivity over the
|
|
## whole video. When the mouse moves (or a key is pressed while any part of
|
|
## the video player is focused), the captions and controls will be shown
|
|
## once again.
|
|
##
|
|
## There is no option in the "Advanced Editor" to set this option. However,
|
|
## this option will have an effect if changed to "True". The code on
|
|
## front-end exists.
|
|
data-autohide-html5="False"
|
|
|
|
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>
|
|
<h3 class="hidden">${_('ERROR: No playable video sources found!')}</h3>
|
|
</section>
|
|
<div class="video-player-post"></div>
|
|
<section class="video-controls is-hidden">
|
|
<div class="slider" title="${_('Video position')}"></div>
|
|
<div>
|
|
<ul class="vcr">
|
|
<li><a class="video_control" href="#" title="${_('Play')}" role="button" aria-disabled="false"></a></li>
|
|
<li><div class="vidtime">0:00 / 0:00</div></li>
|
|
</ul>
|
|
<div class="secondary-controls">
|
|
<div class="speeds menu-container">
|
|
<a class="speed-button" href="#" title="${_('Speeds')}" role="button" aria-disabled="false">
|
|
<span class="label">${_('Speed')}</span>
|
|
<span class="value"></span>
|
|
</a>
|
|
<ol class="video-speeds menu" role="menu"></ol>
|
|
</div>
|
|
<div class="volume">
|
|
<a href="#" title="${_('Volume')}" role="button" aria-disabled="false"></a>
|
|
<div class="volume-slider-container">
|
|
<div class="volume-slider"></div>
|
|
</div>
|
|
</div>
|
|
<a href="#" class="add-fullscreen" title="${_('Fill browser')}" role="button" aria-disabled="false">${_('Fill browser')}</a>
|
|
<a href="#" class="quality-control is-hidden" title="${_('HD off')}" role="button" aria-disabled="false">${_('HD off')}</a>
|
|
|
|
<div class="lang menu-container">
|
|
<a href="#" class="hide-subtitles" title="${_('Turn off captions')}" role="button" aria-
|
|
disabled="false">${_('Turn off captions')}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<a class="nav-skip sr" id="before-transcript_${id}" href="#after-transcript_${id}">${_('Skip to end of transcript.')}</a>
|
|
</article>
|
|
|
|
<ol id="transcript-captions" class="subtitles" tabindex="0" role="group" aria-label="${_('Activating an item in this group will spool the video to the corresponding time point. To skip transcript, go to previous item.')}">
|
|
<li></li>
|
|
</ol>
|
|
</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 sources.get('main'):
|
|
<li class="video-sources video-download-button">
|
|
${('<a href="%s">' + _('Download video') + '</a>') % sources.get('main')}
|
|
</li>
|
|
% endif
|
|
% if track:
|
|
<li class="video-tracks video-download-button">
|
|
% if transcript_download_format:
|
|
${('<a href="%s">' + _('Download transcript') + '</a>') % track
|
|
}
|
|
<div class="a11y-menu-container">
|
|
<a class="a11y-menu-button" href="#" title="${'.' + transcript_download_format}">${'.' + transcript_download_format}</a>
|
|
<ol class="a11y-menu-list">
|
|
% 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
|
|
<% dname = item['display_name'] %>
|
|
<a class="a11y-menu-item-link" href="#${item['value']}" title="${_(dname)}" data-value="${item['value']}">
|
|
${_(dname)}
|
|
</a>
|
|
</li>
|
|
% endfor
|
|
</ol>
|
|
</div>
|
|
% else:
|
|
${('<a href="%s" class="external-track">' + _('Download transcript') + '</a>') % track
|
|
}
|
|
% endif
|
|
</li>
|
|
% endif
|
|
% if handout:
|
|
<li class="video-handout video-download-button">
|
|
${('<a href="%s" target="_blank">' + _('Download Handout') + '</a>') % handout}
|
|
</li>
|
|
% endif
|
|
</ul>
|
|
</div>
|