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