133 lines
4.0 KiB
HTML
133 lines
4.0 KiB
HTML
% if name is not UNDEFINED and name != None:
|
|
<h1> ${name} </h1>
|
|
% endif
|
|
|
|
<div class="video-subtitles">
|
|
<div class="tc-wrapper">
|
|
|
|
<div class="video-wrapper">
|
|
<div class="video-player">
|
|
<div id="ytapiplayer">
|
|
</div>
|
|
|
|
<iframe id="html5_player" type="text/html" frameborder="0">
|
|
</iframe>
|
|
</div>
|
|
|
|
<section class="video-controls">
|
|
<div id="slider"></div>
|
|
|
|
<section>
|
|
<ul class="vcr">
|
|
<li><a id="video_control" class="pause">Pause</a></li>
|
|
|
|
<li>
|
|
<div id="vidtime">0:00 / 0:00</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<div class="secondary-controls">
|
|
<div class="speeds">
|
|
<a href="#">
|
|
<h3>Speed</h3>
|
|
<p class="active"></p>
|
|
<ol id="video_speeds"></ol>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="#" class="add-fullscreen" title="Fill browser">Fill Browser</a>
|
|
|
|
<a href="#" class="hide-subtitles" title="Turn off captions">Captions</a>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
|
|
<ol class="subtitles">
|
|
<!-- <li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li> -->
|
|
<li id="stt_n4"><div id="std_n6" onclick="title_seek(-6);"></div></li>
|
|
<li id="stt_n4"><div id="std_n5" onclick="title_seek(-5);"></div></li>
|
|
<li id="stt_n4"><div id="std_n4" onclick="title_seek(-4);"></div></li>
|
|
<li id="stt_n3"><div id="std_n3" onclick="title_seek(-3);"></div></li>
|
|
<li id="stt_n2"><div id="std_n2" onclick="title_seek(-2);"></div></li>
|
|
<li id="stt_n1"><div id="std_n1" onclick="title_seek(-1);"></div></li>
|
|
<li id="stt_0 "class="current"><div id="std_0" onclick="title_seek(0);"></div></li>
|
|
<li id="stt_p1"><div id="std_p1" onclick="title_seek( 1);"></div></li>
|
|
<li id="stt_p2"><div id="std_p2" onclick="title_seek( 2);"></div></li>
|
|
<li id="stt_p3"><div id="std_p3" onclick="title_seek( 3);"></div></li>
|
|
<li id="stt_p4"><div id="std_p4" onclick="title_seek( 4);"></div></li>
|
|
<li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
|
|
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
|
|
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
|
|
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
|
|
</ol>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<%block name="js_extra">
|
|
<script src="/static/js/jquery.ui.touch-punch.min.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(function() {
|
|
// tooltips for full browser and closed caption
|
|
$('.add-fullscreen, .hide-subtitles ').qtip({
|
|
position: {
|
|
my: 'top right',
|
|
at: 'top center'
|
|
}
|
|
});
|
|
|
|
//full browser
|
|
$('.add-fullscreen').click(function() {
|
|
|
|
$('div.video-subtitles').toggleClass('fullscreen');
|
|
|
|
if ($('div.video-subtitles').hasClass('fullscreen')) {
|
|
$('div.video-subtitles').append('<a href="#" class="exit">Exit</a>');
|
|
} else {
|
|
$('a.exit').remove();
|
|
}
|
|
|
|
$('.exit').click(function() {
|
|
$('div.video-subtitles').removeClass('fullscreen');
|
|
$(this).remove();
|
|
return false;
|
|
});
|
|
|
|
var link_title = $(this).attr('title');
|
|
$(this).attr('title', (link_title == 'Exit fill browser') ? 'Fill browser' : 'Exit fill browser');
|
|
|
|
return false;
|
|
});
|
|
|
|
|
|
//hide subtitles
|
|
$('.hide-subtitles').click(function() {
|
|
$('div.video-subtitles').toggleClass('closed');
|
|
|
|
var link_title = $(this).attr('title');
|
|
$(this).attr('title', (link_title == 'Turn on captions') ? 'Turn off captions' : 'Turn on captions');
|
|
|
|
return false;
|
|
});
|
|
|
|
$("div.speeds a").hover(function() {
|
|
$(this).toggleClass("open");
|
|
});
|
|
|
|
$("div.speeds a").click(function() {
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
</%block>
|
|
|
|
<ol class="video-mod">
|
|
% for t in annotations:
|
|
<li id="video-${annotations.index(t)}">
|
|
${t[1]['content']}
|
|
</li>
|
|
% endfor
|
|
</ol>
|