88 lines
2.6 KiB
HTML
88 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Test Padma API</title>
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
<script type="text/javascript" src="jquery.js"></script>
|
|
<script type="text/javascript" src="padma.layers.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var videoId = "Vdy5qr4j";
|
|
|
|
$(document).ready(function() {
|
|
var v = new padmaVideo(videoId);
|
|
v.getAllData(setupVideo, {});
|
|
});
|
|
|
|
|
|
function setupVideo(v) {
|
|
var vidInterval = 0;
|
|
var vidSrc = v.video.urls['320'];
|
|
$('#videoPlayer').attr("src", vidSrc).attr("poster", v.getPoster()).get(0).load();
|
|
$('#videoTitle').text(v.video.title);
|
|
$('#videoPlayer').bind("play", function() {
|
|
var $this = $(this);
|
|
clearInterval(vidInterval);
|
|
vidInterval = setInterval(function() {
|
|
var tc = $this.get(0).currentTime;
|
|
var tcMs = parseInt(tc * 1000);
|
|
var currentLayers = v.getLayersAtTimecode(tcMs);
|
|
var annotHtml = getAnnotHtml(currentLayers);
|
|
if (annotHtml == $('#videoAnnotations').html()) {
|
|
$.noop();
|
|
} else {
|
|
$('#videoAnnotations').html(annotHtml);
|
|
}
|
|
// console.log(tc);
|
|
}, 400);
|
|
});
|
|
|
|
$('#videoPlayer').bind("pause", function() {
|
|
clearInterval(vidInterval);
|
|
});
|
|
}
|
|
|
|
function getAnnotHtml(padmaLayers) {
|
|
var html = '';
|
|
var types = ['location', 'keyword', 'description', 'transcript'];
|
|
for (var i=0; i<types.length; i++) {
|
|
var t = types[i];
|
|
html += "<div class='" + t + "'>";
|
|
var theseLayers = filterLayersByTracks(padmaLayers, [t]);
|
|
for (var j=0; j<theseLayers.length; j++) {
|
|
html += "<div class='annotItem'>";
|
|
html += theseLayers[j].value_html;
|
|
html += "</div>";
|
|
}
|
|
html += "</div>";
|
|
}
|
|
return html;
|
|
}
|
|
|
|
$('.tcLink').live("click", function(e) {
|
|
e.preventDefault();
|
|
var href = $(this).attr("href");
|
|
var tc = parseInt(href.substring(1, href.length));
|
|
$('#videoPlayer').get(0).currentTime = tc;
|
|
$('#videoPlayer').get(0).play();
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Video Box Starts Here -->
|
|
<div id="vidbox">
|
|
<h1 id="videoTitle"></h1>
|
|
<video id="videoPlayer" src="" controls="controls"></video>
|
|
<div id="videoAnnotations"></div>
|
|
</div><!-- Video Box Ends Here -->
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|