Sanj
13 years ago
commit
c07b62095e
5 changed files with 553 additions and 0 deletions
@ -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> |
|||
File diff suppressed because one or more lines are too long
@ -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; |
|||
} |
|||
|
|||
@ -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); |
|||
@ -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