first commit
This commit is contained in:
sanj
commit
cc3428b6f2
302
test.html
Normal file
302
test.html
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="jquery.js"></script>
|
||||
<script type="text/javascript" src="vidList.js"></script>
|
||||
<script type="text/javascript">
|
||||
var VID_PATH = "file:///media/SanjBeirutHFS/9-11/";
|
||||
var NETWORKS = ['abc', 'bbc', 'cbs', 'cnn', 'fox', 'nbc'];
|
||||
var currentVideos = {};
|
||||
var timeInterval = -1;
|
||||
var ALL_VIDEOS = {};
|
||||
for (var n = 0; n < NETWORKS.length; n++) {
|
||||
var network = NETWORKS[n];
|
||||
ALL_VIDEOS[network] = [];
|
||||
}
|
||||
|
||||
for (var i=0; i < VID_LIST.length; i++) {
|
||||
var filename = VID_LIST[i],
|
||||
network = filename.substring(0,3),
|
||||
date = filename.substring(9,11),
|
||||
start_time = filename.substring(11,15),
|
||||
end_time = filename.substring(16,20);
|
||||
ALL_VIDEOS[network].push({
|
||||
'network': network,
|
||||
'filename': filename,
|
||||
'path': (VID_PATH + filename).replace("fox", "fox5"),
|
||||
'date': parseInt(date, 10),
|
||||
'start_time': parseInt(start_time, 10),
|
||||
'end_time': parseInt(end_time, 10),
|
||||
'id': '#' + network
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getVideosAtTime(d, t, channels) {
|
||||
if (typeof channels == 'undefined') {
|
||||
channels = NETWORKS;
|
||||
}
|
||||
var ret = {};
|
||||
for (var c = 0; c < channels.length; c++) {
|
||||
var channel = channels[c];
|
||||
var v = getVideoAtTime(d, t, channel);
|
||||
if (v) {
|
||||
ret[channel] = v;
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getVideoAtTime(d, t, network) {
|
||||
for (var i=0; i < ALL_VIDEOS[network].length; i++) {
|
||||
var thisVid = ALL_VIDEOS[network][i];
|
||||
if (thisVid.date == d) {
|
||||
if (thisVid.start_time < t && thisVid.end_time > t) {
|
||||
return thisVid;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
//accepts an integer like 1450, 45, 930, etc. Returns the correct hour of the time (NOTE: it will return 12 if the time is 45).
|
||||
function getTimeHour(time) {
|
||||
var timeString = time + '';
|
||||
if (timeString.length == 4) {
|
||||
return parseInt(timeString.substring(0,2));
|
||||
}
|
||||
if (timeString.length == 2) { // since we're converting from an int, this would be a time like 0045, which for the sake of math, is 1245 ..
|
||||
return 12;
|
||||
} else {
|
||||
return parseInt(timeString.charAt(0));
|
||||
}
|
||||
}
|
||||
|
||||
function getSecs(time, start_time) {
|
||||
var timeHr = getTimeHour(time);
|
||||
var startHr = getTimeHour(start_time);
|
||||
if (timeHr > startHr) {
|
||||
time = time - 40;
|
||||
}
|
||||
return (time - start_time) * 60;
|
||||
}
|
||||
|
||||
function getTimeMinutes(time) {
|
||||
timeString = time + '';
|
||||
var minutes = timeString.substring(timeString.length - 2, timeString.length);
|
||||
return parseInt(minutes);
|
||||
}
|
||||
|
||||
function getTime(startTime, currentTime, date) {
|
||||
var seekTime = Math.floor(currentTime / 60);
|
||||
var currTime = startTime + seekTime;
|
||||
if (getTimeMinutes(currTime) >= 60) {
|
||||
currTime = currTime + 40;
|
||||
}
|
||||
var hr = getTimeHour(currTime) + '';
|
||||
if (hr.length == 1) {
|
||||
hr = '0' + hr;
|
||||
}
|
||||
if ((currTime + '').length == 2) {
|
||||
hr = "00";
|
||||
}
|
||||
var minutes = getTimeMinutes(currTime);
|
||||
if ((minutes + '').length == 1) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
var seconds = parseInt(currentTime % 60);
|
||||
if ((seconds + '').length == 1) {
|
||||
seconds = '0' + seconds;
|
||||
}
|
||||
return date + "th Sept. " + hr + ":" + minutes + ":" + seconds;
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$('#search').click(function() {
|
||||
var date = parseInt($('#date').val());
|
||||
var time = parseInt($('#time').val(), 10);
|
||||
console.log(time);
|
||||
var videos = getVideosAtTime(date, time);
|
||||
currentVideos = videos;
|
||||
console.log(videos);
|
||||
for (var v in videos) {
|
||||
if (videos.hasOwnProperty(v)) {
|
||||
var video = videos[v];
|
||||
var id = '#' + video.network;
|
||||
var jq = $(id);
|
||||
var secondsToSeek = getSecs(time, video.start_time);
|
||||
var currPath = jq.attr("src");
|
||||
if (currPath != video.path) {
|
||||
jq.attr("src", video.path);
|
||||
jq.get(0).load();
|
||||
(function(vid, seconds) {
|
||||
$('#' + video.network).one("loadedmetadata", function() {
|
||||
console.log(vid.network, seconds);
|
||||
this.currentTime = seconds;
|
||||
this.play();
|
||||
});
|
||||
})(video, secondsToSeek);
|
||||
} else {
|
||||
jq.get(0).currentTime = secondsToSeek;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
$('video').click(function(e) {
|
||||
var that = this;
|
||||
e.stopPropagation();
|
||||
clearInterval(timeInterval);
|
||||
$('.menu').remove();
|
||||
var videoObj = currentVideos[$(that).attr('id')];
|
||||
var start_time = videoObj.start_time;
|
||||
var currentTime = getTime(start_time, $(this).get(0).currentTime, videoObj.date);
|
||||
var html = tmpl("videoMenu", {
|
||||
'network': videoObj.network,
|
||||
'time': currentTime
|
||||
});
|
||||
var top = $(this).position().top;
|
||||
var left = $(this).position().left;
|
||||
$('body').append(html);
|
||||
$('.menu').css({'top': top, 'left': left});
|
||||
timeInterval = setInterval(function() {
|
||||
var currentTime = getTime(start_time, $(that).get(0).currentTime, videoObj.date);
|
||||
$('.menuCurrentTime').text(currentTime);
|
||||
}, 800);
|
||||
});
|
||||
$('body').click(function() {
|
||||
clearInterval(timeInterval);
|
||||
$('.menu').remove();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var menuActions = {
|
||||
'muteThis': function(v) {
|
||||
$(v.id).get(0).muted = !$(v.id).get(0).muted;
|
||||
},
|
||||
'muteOthers': function(v) {
|
||||
for (var c in currentVideos) {
|
||||
if (currentVideos.hasOwnProperty(c)) {
|
||||
var t = currentVideos[c];
|
||||
if (v.id != t.id) {
|
||||
$(t.id).get(0).muted = true;
|
||||
} else {
|
||||
$(t.id).get(0).muted = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'pauseThis': function(v) {
|
||||
if ($(v.id).get(0).isPlaying) {
|
||||
$(v.id).get(0).pause();
|
||||
} else {
|
||||
$(v.id).get(0).play();
|
||||
}
|
||||
},
|
||||
'pauseOthers': function(v) {
|
||||
for (var c in currentVideos) {
|
||||
if (currentVideos.hasOwnProperty(c)) {
|
||||
var t = currentVideos[c];
|
||||
if (v.id != t.id) {
|
||||
$(t.id).get(0).pause();
|
||||
} else {
|
||||
$(t.id).get(0).play();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$('.menuControls a').live("click", function(e) {
|
||||
var videoObj = currentVideos[$(this).parents('.menu').attr('data-network')];
|
||||
menuActions[$(this).attr('data-action')](videoObj);
|
||||
});
|
||||
/*
|
||||
John Resig's micro-templating: http://ejohn.org/blog/javascript-micro-templating/
|
||||
*/
|
||||
|
||||
(function(){
|
||||
var cache = {};
|
||||
|
||||
window.tmpl = function tmpl(str, data){
|
||||
// Figure out if we're getting a template, or if we need to
|
||||
// load the template - and be sure to cache the result.
|
||||
var fn = !/\W/.test(str) ?
|
||||
cache[str] = cache[str] ||
|
||||
tmpl(document.getElementById(str).innerHTML) :
|
||||
|
||||
// Generate a reusable function that will serve as a template
|
||||
// generator (and which will be cached).
|
||||
new Function("obj",
|
||||
"var p=[],print=function(){p.push.apply(p,arguments);};" +
|
||||
|
||||
// Introduce the data as local variables using with(){}
|
||||
"with(obj){p.push('" +
|
||||
|
||||
// Convert the template into pure JavaScript
|
||||
str
|
||||
.replace(/[\r\t\n]/g, " ")
|
||||
.split("<%").join("\t")
|
||||
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
|
||||
.replace(/\t=(.*?)%>/g, "',$1,'")
|
||||
.split("\t").join("');")
|
||||
.split("%>").join("p.push('")
|
||||
.split("\r").join("\\'")
|
||||
+ "');}return p.join('');");
|
||||
|
||||
// Provide some basic currying to the user
|
||||
return data ? fn( data ) : fn;
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.menu {
|
||||
position: absolute;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/html" id="videoMenu">
|
||||
<div class="menu" data-network="<%= network %>">
|
||||
<div class="menuMetadata">
|
||||
Network: <%= network %> Time: <span class="menuCurrentTime"><%= time %></span>
|
||||
</div>
|
||||
<div class="menuControls">
|
||||
<a class="muteThis" data-action="muteThis">Mute This</a>
|
||||
<a class="muteOthers" data-action="muteOthers">Mute Others</a>
|
||||
<a class="pauseThis" data-action="pauseThis">Pause This</a>
|
||||
<a class="pauseOthers" data-action="pauseOthers">Pause Others</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
<div id="wrapper">
|
||||
<div id="header">
|
||||
Date: <select id="date">
|
||||
<option value="11">11th September</option>
|
||||
<option value="12">12th September</option>
|
||||
<option value="13">13th September</option>
|
||||
</select>
|
||||
Time: <input id="time" />
|
||||
<button id="search">Get Videos</button>
|
||||
</div>
|
||||
<div id="videos">
|
||||
<div id="line1">
|
||||
<video id="abc" controls></video>
|
||||
<video id="bbc" controls></video>
|
||||
<video id="cbs" controls></video>
|
||||
</div>
|
||||
<div id="line2">
|
||||
<video id="cnn" controls></video>
|
||||
<video id="fox" controls></video>
|
||||
<video id="nbc" controls></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user