initial commit
This commit is contained in:
Sanj
commit
c07b62095e
87
index.html
Normal file
87
index.html
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
<!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>
|
||||||
18
jquery.js
vendored
Normal file
18
jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
45
mypadma.js
Normal file
45
mypadma.js
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
228
padma.layers.js
Normal file
228
padma.layers.js
Normal file
|
|
@ -0,0 +1,228 @@
|
||||||
|
var padmaConfig = {
|
||||||
|
'background': 'rgba(0,0,0,0.85)',
|
||||||
|
'color': '#fff',
|
||||||
|
'links_url': 'pad.ma/',
|
||||||
|
'data_url': 'http://pad.ma/',
|
||||||
|
'default_layers': ['transcript', 'description'],
|
||||||
|
};
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
var BASE_URL = padmaConfig.data_url;
|
||||||
|
|
||||||
|
var padmaVideo = function(videoId) {
|
||||||
|
this.id = videoId;
|
||||||
|
this.videoUrl = BASE_URL + videoId + "/video.js";
|
||||||
|
this.layersUrl = BASE_URL + videoId + "/layers.js";
|
||||||
|
this.infoUrl = BASE_URL + videoId + "/info";
|
||||||
|
this.hasVideoData = false;
|
||||||
|
this.hasLayersData = false;
|
||||||
|
this.hasAllData = false;
|
||||||
|
this.video = {};
|
||||||
|
this.layers = {};
|
||||||
|
var that = this;
|
||||||
|
padmaVideo.cache.push(that);
|
||||||
|
}
|
||||||
|
|
||||||
|
padmaVideo.prototype.getAllData = function(callback, data) {
|
||||||
|
var that = this;
|
||||||
|
if (!this.hasAllData) {
|
||||||
|
$.getScript(that.videoUrl, function() {
|
||||||
|
that.video = video;
|
||||||
|
that.hasVideoData = true;
|
||||||
|
$.getScript(that.layersUrl, function() {
|
||||||
|
that.layers = layers;
|
||||||
|
that.hasLayersData = true;
|
||||||
|
that.hasAllData = true;
|
||||||
|
callback(that, data);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
callback(that, data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//tc in npt
|
||||||
|
padmaVideo.prototype.getFrame = function(tc, size) {
|
||||||
|
if (typeof(size) == 'undefined') {
|
||||||
|
sizeStr = '';
|
||||||
|
} else {
|
||||||
|
sizeStr = '.' + size;
|
||||||
|
}
|
||||||
|
return BASE_URL + this.id + "/frame/" + tc + sizeStr + ".jpg";
|
||||||
|
}
|
||||||
|
|
||||||
|
padmaVideo.prototype.getPoster = function() {
|
||||||
|
return this.getFrame(ms2npt(this.video.poster_frame), '320');
|
||||||
|
}
|
||||||
|
|
||||||
|
//tc in npt
|
||||||
|
padmaVideo.prototype.getVideo = function(tc, size) {
|
||||||
|
if (!this.hasVideoData) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (typeof(size) == 'undefined') {
|
||||||
|
size = '128';
|
||||||
|
}
|
||||||
|
return this.video.urls[size] + "?t=npt:" + tc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
padmaVideo.prototype.getDownloadLink = function(tcIn, tcOut) {
|
||||||
|
return BASE_URL + this.id + "/download/" + tcIn + "-" + tcOut + ".ogv";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
padmaVideo.prototype.getLayerVideo = function(tcIn, tcOut) {
|
||||||
|
return this.video.urls['320'] + "?t=" + tcIn + "/" + tcOut;
|
||||||
|
}
|
||||||
|
|
||||||
|
padmaVideo.prototype.noop = function() {
|
||||||
|
// console.log("I'm done:)");
|
||||||
|
$.noop();
|
||||||
|
}
|
||||||
|
|
||||||
|
padmaVideo.prototype.getVideoData = function(callback, data) {
|
||||||
|
var that = this;
|
||||||
|
if (this.hasVideoData) {
|
||||||
|
callback(that, data);
|
||||||
|
} else {
|
||||||
|
$.getScript(that.videoUrl, function() {
|
||||||
|
that.video = video;
|
||||||
|
that.hasVideoData = true;
|
||||||
|
callback(that, data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
padmaVideo.prototype.getLayersData = function(callback, data) {
|
||||||
|
var that = this;
|
||||||
|
if (this.hasLayersData) {
|
||||||
|
callback(that, data);
|
||||||
|
} else {
|
||||||
|
$.getScript(that.layersUrl, function() {
|
||||||
|
that.layers = layers;
|
||||||
|
that.hasLayersData = true;
|
||||||
|
callback(that, data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
padmaVideo.prototype.getLayerById = function(id) {
|
||||||
|
var that = this;
|
||||||
|
if (!this.hasLayersData) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
for (var i=0; i < that.layers.length; i++) {
|
||||||
|
var thisLayer = that.layers[i];
|
||||||
|
if (thisLayer.id == id) {
|
||||||
|
return thisLayer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
//timecode in ms
|
||||||
|
padmaVideo.prototype.getLayersAtTimecode = function(tc) {
|
||||||
|
var that = this;
|
||||||
|
if (!this.hasLayersData) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// console.log(tc);
|
||||||
|
var layers = [];
|
||||||
|
for (var i=0; i < that.layers.length; i++) {
|
||||||
|
var thisLayer = that.layers[i];
|
||||||
|
if (tc > thisLayer.time_in && tc < thisLayer.time_out) {
|
||||||
|
layers.push(thisLayer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return layers;
|
||||||
|
}
|
||||||
|
|
||||||
|
padmaVideo.prototype.getLayerById = function(id) {
|
||||||
|
var that = this;
|
||||||
|
var id = $.trim(id);
|
||||||
|
for (var i=0; i < that.layers.length; i++) {
|
||||||
|
var thisLayer = that.layers[i];
|
||||||
|
if (thisLayer.id == id) {
|
||||||
|
return thisLayer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterLayersByTracks(layers, tracks) {
|
||||||
|
var matchedLayers = []
|
||||||
|
for (var i=0; i < layers.length; i++) {
|
||||||
|
var layer = layers[i];
|
||||||
|
// console.log(layer.track);
|
||||||
|
if ($.inArray(layer.track, tracks) != -1) {
|
||||||
|
matchedLayers.push(layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return matchedLayers;
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterLayersByContributors(layers, users) {
|
||||||
|
var matchedLayers = [];
|
||||||
|
for (var i=0; i < layers.length; i++) {
|
||||||
|
var layer = layers[i];
|
||||||
|
if ($.inArray(layer.contributor, users)) {
|
||||||
|
matchedLayers.push(layer);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return matchedLayers;
|
||||||
|
}
|
||||||
|
|
||||||
|
padmaVideo.cache = [];
|
||||||
|
|
||||||
|
padmaVideo.getFromCache = function(videoId) {
|
||||||
|
var cache = padmaVideo.cache;
|
||||||
|
for (var i=0; i<cache.length; i++) {
|
||||||
|
var v = cache[i];
|
||||||
|
if (v.id === videoId) {
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.padmaVideo = padmaVideo;
|
||||||
|
window.filterLayersByTracks = filterLayersByTracks;
|
||||||
|
window.filterLayersByContributors = filterLayersByContributors;
|
||||||
|
|
||||||
|
function ms2npt(pos) {
|
||||||
|
var h = Math.floor(pos / 3600000);
|
||||||
|
var m = Math.floor(pos % 3600000 / 60000);
|
||||||
|
var s = Math.floor(pos % 60000 / 1000);
|
||||||
|
var ms = pos % 1000;
|
||||||
|
return h.toString().pad('0', 2) + ':' + m.toString().pad('0', 2) + ':' + s.toString().pad('0', 2) + '.' + ms.toString().pad('0', 3);
|
||||||
|
// return strpad(h.toString(), '0', 2, 'left') + ':' + strpad(m.toString(), '0', 2, 'left') + ':' + strpad(s.toString(), '0', 2, 'left') + '.' + strpad(ms.toString(), '0', 3, 'left');
|
||||||
|
}
|
||||||
|
|
||||||
|
function npt2ms(npt) {
|
||||||
|
var ms = 0.0;
|
||||||
|
var p = npt.split(':');
|
||||||
|
for (i=0; i<p.length; i++) {
|
||||||
|
ms = ms * 60 + parseFloat(p[i]);
|
||||||
|
}
|
||||||
|
return ms * 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
String.prototype.pad = function(pad, len, dir) {
|
||||||
|
if (typeof(dir) == 'undefined')
|
||||||
|
dir = 'left';
|
||||||
|
var str = this;
|
||||||
|
while (str.length < len) {
|
||||||
|
if (dir == 'left')
|
||||||
|
str = pad + str;
|
||||||
|
else if (dir == 'right')
|
||||||
|
str = str + pad;
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
})(jQuery);
|
||||||
175
style.css
Normal file
175
style.css
Normal file
|
|
@ -0,0 +1,175 @@
|
||||||
|
@charset "utf-8";
|
||||||
|
/* CSS Document */
|
||||||
|
|
||||||
|
/* Reset */
|
||||||
|
|
||||||
|
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, address, code, img,
|
||||||
|
small, strong, dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1.5;
|
||||||
|
font-family: arial, sans-serif;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End Reset */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#secondary #vidbox {
|
||||||
|
margin-right:10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
-webkit-box-shadow: 0px 0px 4px #514216;
|
||||||
|
-moz-box-shadow: 0px 0px 4px #514216;
|
||||||
|
box-shadow: 0px 0px 4px #514216;
|
||||||
|
background-color: #fffcf8;
|
||||||
|
width:530px;
|
||||||
|
min-height:560px;
|
||||||
|
max-height:560px;
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoPlayer {
|
||||||
|
float:left;
|
||||||
|
margin:10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
-webkit-box-shadow: 0px 0px 4px #514216;
|
||||||
|
-moz-box-shadow: 0px 0px 4px #514216;
|
||||||
|
box-shadow: 0px 0px 4px #514216;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .location {
|
||||||
|
background:#e4dbc2;
|
||||||
|
border:2px solid #716c5e;
|
||||||
|
-webkit-box-shadow: 0px 0px 4px #514216;
|
||||||
|
-moz-box-shadow: 0px 0px 4px #514216;
|
||||||
|
box-shadow: 0px 0px 4px #514216;
|
||||||
|
width:176px;
|
||||||
|
max-height:100px;
|
||||||
|
min-height:100px;
|
||||||
|
font-size:11px;
|
||||||
|
overflow:auto;
|
||||||
|
padding:5px;
|
||||||
|
margin:10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .location:before {
|
||||||
|
content:'Locations :-';
|
||||||
|
font-weight:bold;
|
||||||
|
padding-bottom:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .location .annotItem {
|
||||||
|
padding:2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .location .annotItem:after {
|
||||||
|
content:',';
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .location .annotItem:last-child:after {
|
||||||
|
content:'.';
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .keyword {
|
||||||
|
background:#e4dbc2;
|
||||||
|
border:2px solid #716c5e;
|
||||||
|
-webkit-box-shadow: 0px 0px 4px #514216;
|
||||||
|
-moz-box-shadow: 0px 0px 4px #514216;
|
||||||
|
box-shadow: 0px 0px 4px #514216;
|
||||||
|
width:176px;
|
||||||
|
max-height:100px;
|
||||||
|
min-height:100px;
|
||||||
|
font-size:11px;
|
||||||
|
overflow:auto;
|
||||||
|
padding:5px;
|
||||||
|
margin:10px 0;
|
||||||
|
margin-top:12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .keyword:before {
|
||||||
|
content:'Keywords :-';
|
||||||
|
font-weight:bold;
|
||||||
|
padding-bottom:5px;
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .keyword .annotItem {
|
||||||
|
float:left;
|
||||||
|
padding:2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .keyword .annotItem:after {
|
||||||
|
content:',';
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .keyword .annotItem:last-child:after {
|
||||||
|
content:'.';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .description {
|
||||||
|
background:#e4dbc2;
|
||||||
|
border:2px solid #716c5e;
|
||||||
|
-webkit-box-shadow: 0px 0px 4px #514216;
|
||||||
|
-moz-box-shadow: 0px 0px 4px #514216;
|
||||||
|
box-shadow: 0px 0px 4px #514216;
|
||||||
|
width:505px;
|
||||||
|
max-height:100px;
|
||||||
|
min-height:100px;
|
||||||
|
font-size:11px;
|
||||||
|
overflow:auto;
|
||||||
|
padding:5px;
|
||||||
|
margin:10px 0 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .description:before {
|
||||||
|
content:'Description :-';
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .description .annotItem {
|
||||||
|
margin-top:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .transcript {
|
||||||
|
background:#e4dbc2;
|
||||||
|
border:2px solid #716c5e;
|
||||||
|
-webkit-box-shadow: 0px 0px 4px #514216;
|
||||||
|
-moz-box-shadow: 0px 0px 4px #514216;
|
||||||
|
box-shadow: 0px 0px 4px #514216;
|
||||||
|
width:505px;
|
||||||
|
max-height:132px;
|
||||||
|
min-height:132px;
|
||||||
|
font-size:11px;
|
||||||
|
overflow:auto;
|
||||||
|
padding:5px;
|
||||||
|
margin:10px 0 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .transcript:before {
|
||||||
|
content:'Transcript :-';
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vidbox #videoAnnotations .transcript .annotItem {
|
||||||
|
margin-top:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user