bachir/HeHe-Centiped
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

video + timeline are synchronized

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2016-07-01 18:02:28 +02:00
parent 24e070d7f3
commit 835cc3ecee
6 changed files with 164 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/public_html/css/dist/styles.min.css
Vendored
+1 -1
View File
@@ -1 +1 @@
#pictures,body,html{position:relative;overflow:hidden}#pictures,#pictures video,#root,body,html{width:100%;height:100%}#map,#timeline{position:absolute;z-index:9;bottom:0;left:0;background-color:rgba(255,255,255,.6);border-radius:2px}body,html{margin:0;padding:0;background-color:#000}#root{position:relative}#header{position:absolute;z-index:10;top:0;left:0}#pictures{z-index:5}#pictures video source:not(.1080p){display:none}#timeline{width:67%;margin:1% 0 1% 32%;height:3em}#map{width:30%;margin:1%;height:40%} #timelaps,body,html{position:relative;overflow:hidden}#root,#timelaps,body,html{width:100%;height:100%}#map,#timeline{z-index:9;bottom:0}#header,#map,#timeline{position:absolute;left:0}body,html{margin:0;padding:0;background-color:#000}#root{position:relative}#header{z-index:10;top:0}#timelaps{z-index:5}#timelaps video#timelapsvid{position:absolute;top:0;left:0;width:100%;height:100%}@media (min-aspect-ratio:16 / 9){#timelaps video#timelapsvid{height:300%;top:-100%}}@media (max-aspect-ratio:16 / 9){#timelaps video#timelapsvid{width:300%;left:-100%}}#timeline{width:67%;margin:1% 0 1% 32%;padding:7px;background-color:rgba(0,0,0,.8);border-radius:2px}#timeline .vis-background,#timeline .vis-background.vis-horizontal,#timeline .vis-background.vis-vertical,#timeline .vis-panel.vis-bottom,#timeline .vis-panel.vis-center,#timeline .vis-panel.vis-top,#timeline .vis-time-axis,#timeline .vis-timeline{border:none}#timeline .vis-text{color:#fff}#timeline .vis-custom-time.videotime{background-color:red}#map{width:30%;margin:1%;height:40%;background-color:rgba(255,255,255,.6);border-radius:2px;display:none}
www/public_html/css/styles.css
+27 -7
View File
@@ -18,17 +18,26 @@ html, body {
top: 0; top: 0;
left: 0; } left: 0; }
#pictures { #timelaps {
position: relative; position: relative;
z-index: 5; z-index: 5;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; } overflow: hidden; }
#pictures video { #timelaps video#timelapsvid {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; } height: 100%; }
#pictures video source:not(.1080p) { @media (min-aspect-ratio: 16 / 9) {
display: none; } #timelaps video#timelapsvid {
height: 300%;
top: -100%; } }
@media (max-aspect-ratio: 16 / 9) {
#timelaps video#timelapsvid {
width: 300%;
left: -100%; } }
#timeline { #timeline {
position: absolute; position: absolute;
@@ -37,9 +46,19 @@ html, body {
left: 0; left: 0;
width: 67%; width: 67%;
margin: 1% 0 1% 32%; margin: 1% 0 1% 32%;
height: 3em; padding: 7px;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(0, 0, 0, 0.8);
border-radius: 2px; } border-radius: 2px; }
#timeline .vis-timeline {
border: none; }
#timeline .vis-time-axis,
#timeline .vis-background, #timeline .vis-background.vis-horizontal, #timeline .vis-background.vis-vertical,
#timeline .vis-panel.vis-center, #timeline .vis-panel.vis-top, #timeline .vis-panel.vis-bottom {
border: none; }
#timeline .vis-text {
color: white; }
#timeline .vis-custom-time.videotime {
background-color: red; }
#map { #map {
position: absolute; position: absolute;
@@ -50,4 +69,5 @@ html, body {
margin: 1%; margin: 1%;
height: 40%; height: 40%;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
border-radius: 2px; } border-radius: 2px;
display: none; }
www/public_html/index.php
+12 -7
View File
@@ -1,3 +1,8 @@
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
@@ -13,13 +18,13 @@
<header id="header"> <header id="header">
<h1>Lot Explorer</h1> <h1>Lot Explorer</h1>
</header> </header>
<section id="pictures"> <section id="timelaps">
<video id="video" autoplay poster=""> <video id="timelapsvid" loop preload autoplay>
<!-- <source class="240p" src="videos/timelaps-240p.mp4" type="video/mp4"> <!-- <source class="240p" src="videos/timelaps-240p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
<source class="360p" src="videos/timelaps-360p.mp4" type="video/mp4"> <source class="360p" src="videos/timelaps-360p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
<source class="480p" src="videos/timelaps-480p.mp4" type="video/mp4"> <source class="480p" src="videos/timelaps-480p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
<source class="720p" src="videos/timelaps-720p.mp4" type="video/mp4"> --> <source class="720p" src="videos/timelaps-720p.mp4?nocache=<?php echo time(); ?>" type="video/mp4"> -->
<source class="1080p" src="videos/timelaps-1080p.mp4" type="video/mp4"> <source class="1080p" src="videos/timelaps-1080p.mp4?nocache=<?php echo time(); ?>" type="video/mp4">
</video> </video>
</section> </section>
<!-- // pictures --> <!-- // pictures -->
www/public_html/js/dist/script.min.js
Vendored
+5 -3
View File
@@ -1,5 +1,7 @@
$(document).ready(function(){var _video=document.getElementById('video'),_fps=24;var _timeline,_timeline_container=document.getElementById('timeline'),_tl_data_ar=[],_tl_items;function init(){console.log("Init");getMetaData();};function getMetaData(){console.log('getMetaData');$.ajax({dataType:"json",url:'metadata/frames.json',success:setUpData});console.log('getMetaData END');};function setUpData(data){console.log("setUpData");var frame;for(var i in data.frames){console.log(data.frames[i]);_tl_data_ar.push({start:new Date(data.frames[i].time),id:data.frames[i].frame});} $(document).ready(function(){var _frames,_frames_length;var _$timelaps=$('#timelaps'),_$video=$("#timelapsvid"),_video=document.getElementById('timelapsvid'),_fps=12,_vid_current_time;var _timeline,_timeline_container=document.getElementById('timeline'),_tl_data_ar=[],_tl_items,_tl_start,_tl_end;function init(){console.log("Init");loadData();};function loadData(){console.log('loadData');$.ajax({dataType:"json",url:'metadata/frames.json',cache:false,success:setUpData});console.log('getMetaData END');};function setUpData(d){console.log("setUpData");_frames=d.frames;_tl_start=new Date(_frames[0].datetime);_tl_end=new Date(_frames[_frames.length-1].datetime);initDataReady();};function initDataReady(){console.log("initDataReady");setupTimeline();setupVideoEvents();play();}
setupTimeline();};function setupTimeline(){_tl_items=new vis.DataSet(_tl_data_ar);_timeline=new vis.Timeline(_timeline_container,_tl_items,{});_timeline.on('select',onSelectTimelineItem)} function setupTimeline(){_timeline=new vis.Timeline(_timeline_container,[],{height:'50px',showCurrentTime:false,start:_tl_start,end:_tl_end,stack:false});_timeline.addCustomTime(_tl_start,"videotime");_timeline.on('click',onClickTimeline)}
function onSelectTimelineItem(props){console.log("onSelectTimelineItem",props);seekVideoTo(props.items[0]);};function seekVideoTo(f){console.log("seekVideoTo frame",f);_video.pause();_video.currentTime=f/_fps;};function play(millis){requestAnimationFrame(play);} function onClickTimeline(props){console.log("onClickTimeline",props.time);};function moveTimelineCursor(date){_timeline.setCustomTime(date,"videotime",{animation:false});_timeline.moveTo(date,{animation:false});}
function setupVideoEvents(){_$video.on("click",onClickVid);};function onClickVid(e){console.log("onClickVid",e);if(_video.paused){_video.play();}else{_video.pause();}};function play(millis){requestAnimationFrame(play);if(!_video.paused){moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);}}
function vt2f(ct){return Math.round(ct/(1/_fps));}
init();}); init();});
www/public_html/js/script.js
+82 -31
View File
@@ -1,76 +1,119 @@
$(document).ready(function() { $(document).ready(function() {
var _video = document.getElementById('video'), _fps = 24; var _frames, _frames_length;
var _timeline, _timeline_container = document.getElementById('timeline'), _tl_data_ar=[], _tl_items; var _$timelaps = $('#timelaps'), _$video = $("#timelapsvid"), _video = document.getElementById('timelapsvid'), _fps = 12, _vid_current_time;
var _timeline, _timeline_container = document.getElementById('timeline'),
_tl_data_ar = [], _tl_items, _tl_start, _tl_end;
function init(){ function init(){
console.log("Init"); console.log("Init");
// preload all pictures before launching
// setTimeout(function(){ loadData();
// play();
// }, 5000);
getMetaData();
// setupTimeline();
}; };
function getMetaData(){ function loadData(){
console.log('getMetaData'); console.log('loadData');
// $.getJSON('metadata/frame.json',function(data){ // $.getJSON('metadata/frame.json',function(data){
// setUpData(data.frames) // setUpData(data.frames)
// }); // });
$.ajax({ $.ajax({
dataType:"json", dataType:"json",
url:'metadata/frames.json', url:'metadata/frames.json',
cache: false,
success:setUpData success:setUpData
}); });
console.log('getMetaData END'); console.log('getMetaData END');
}; };
function setUpData(data){ function setUpData(d){
console.log("setUpData"); console.log("setUpData");
// console.log("data", data); _frames = d.frames;
// console.log(_frames);
var frame; // for (var i in _frames) {
for (var i in data.frames) { // // console.log(data.frames[i]);
console.log(data.frames[i]); // _tl_data_ar.push({
_tl_data_ar.push({ // start:new Date(_frames[i].datetime),
start:new Date(data.frames[i].time), // id:_frames[i].id
id:data.frames[i].frame // });
}); // }
}
setupTimeline(); // console.log("_frames[_frames.length]",_frames[_frames.length-1]);
_tl_start= new Date(_frames[0].datetime);
_tl_end= new Date(_frames[_frames.length-1].datetime);
// console.log('_tl_start : '+_tl_start+" | _tl_end"+_tl_end);
initDataReady();
}; };
function initDataReady(){
console.log("initDataReady");
setupTimeline();
setupVideoEvents();
play();
}
function setupTimeline(){ function setupTimeline(){
// Create a DataSet (allows two way data-binding) // Create a DataSet (allows two way data-binding)
_tl_items = new vis.DataSet(_tl_data_ar); // _tl_items = new vis.DataSet(_tl_data_ar);
// Configuration for the Timeline // Configuration for the Timeline
// var options = {}; // var options = {};
// Create a Timeline // Create a Timeline
_timeline = new vis.Timeline(_timeline_container, _tl_items, {}); _timeline = new vis.Timeline(_timeline_container, [], {
height:'50px',
showCurrentTime:false,
start:_tl_start,
end:_tl_end,
stack:false
});
_timeline.on('select', onSelectTimelineItem) _timeline.addCustomTime(_tl_start, "videotime");
_timeline.on('click', onClickTimeline)
} }
function onSelectTimelineItem(props){ function onClickTimeline(props){
console.log("onSelectTimelineItem", props); console.log("onClickTimeline", props.time);
seekVideoTo(props.items[0]); // seekVideoTo(props.items[0]);
}; };
function seekVideoTo(f){ function moveTimelineCursor(date){
console.log("seekVideoTo frame", f); _timeline.setCustomTime(date, "videotime", {animation:false});
_video.pause(); _timeline.moveTo(date, {animation:false});
_video.currentTime = f/_fps; }
function setupVideoEvents(){
// console.log("setupVideoEvents");
_$video.on("click", onClickVid);
}; };
function onClickVid(e){
console.log("onClickVid",e);
if(_video.paused){
_video.play();
}else{
_video.pause();
}
};
// function seekVideoTo(f){
// console.log("seekVideoTo frame", f);
// _video.pause();
// _video.currentTime = f/_fps;
// };
function play(millis){ function play(millis){
requestAnimationFrame(play); requestAnimationFrame(play);
// console.log("_video.playing",_video.paused);
if (!_video.paused) {
moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);
}
// now = Date.now(); // now = Date.now();
// delta = now - then; // delta = now - then;
// //
@@ -81,6 +124,14 @@ $(document).ready(function() {
/* helpers */
function vt2f(ct){
// console.log("Video Time 2 frame");
return Math.round(ct/(1/_fps));
// console.log("frame", frame);
}
init(); init();
www/public_html/scss/styles.scss
+37 -6
View File
@@ -16,26 +16,56 @@ html, body{
top:0; left:0; top:0; left:0;
} }
#pictures{ #timelaps{
position: relative; z-index: 5; position: relative; z-index: 5;
width:100%; height:100%; width:100%; height:100%;
overflow: hidden; overflow: hidden;
// border: 1px solid blue; // border: 1px solid blue;
video { video#timelapsvid {
position: absolute;
top: 0; left: 0;
width:100%; height:100%; width:100%; height:100%;
source:not(.1080p){ // source:not(.1080p){
display:none; // display:none;
// }
@media (min-aspect-ratio: 16/9) {
height: 300%;
top: -100%;
} }
@media (max-aspect-ratio: 16/9) {
width: 300%;
left: -100%;
}
} }
} }
#timeline{ #timeline{
position: absolute; z-index: 9; position: absolute; z-index: 9;
bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em; bottom:0; left:0; width:67%; margin:1% 0 1% 32%; padding:7px;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(0, 0, 0, 0.8);
border-radius: 2px; border-radius: 2px;
.vis-timeline{
border:none;
}
.vis-time-axis,
.vis-background, .vis-background.vis-horizontal, .vis-background.vis-vertical,
.vis-panel.vis-center, .vis-panel.vis-top, .vis-panel.vis-bottom{
border:none;
}
.vis-text{
color:white;
}
.vis-custom-time.videotime{
background-color: red;
}
} }
@@ -44,4 +74,5 @@ html, body{
bottom:0; left:0; width:30%; margin:1%; height:40%; bottom:0; left:0; width:30%; margin:1%; height:40%;
background-color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.6);
border-radius: 2px; border-radius: 2px;
display: none;
} }