303 lines
8.5 KiB
HTML
303 lines
8.5 KiB
HTML
<!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>
|
|
|