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;
left: 0; }
#pictures {
#timelaps {
position: relative;
z-index: 5;
width: 100%;
height: 100%;
overflow: hidden; }
#pictures video {
#timelaps video#timelapsvid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
#pictures video source:not(.1080p) {
display: none; }
@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 {
position: absolute;
@@ -37,9 +46,19 @@ html, body {
left: 0;
width: 67%;
margin: 1% 0 1% 32%;
height: 3em;
background-color: rgba(255, 255, 255, 0.6);
padding: 7px;
background-color: rgba(0, 0, 0, 0.8);
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 {
position: absolute;
@@ -50,4 +69,5 @@ html, body {
margin: 1%;
height: 40%;
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>
<html>
<head>
@@ -13,13 +18,13 @@
<header id="header">
<h1>Lot Explorer</h1>
</header>
<section id="pictures">
<video id="video" autoplay poster="">
<!-- <source class="240p" src="videos/timelaps-240p.mp4" type="video/mp4">
<source class="360p" src="videos/timelaps-360p.mp4" type="video/mp4">
<source class="480p" src="videos/timelaps-480p.mp4" type="video/mp4">
<source class="720p" src="videos/timelaps-720p.mp4" type="video/mp4"> -->
<source class="1080p" src="videos/timelaps-1080p.mp4" type="video/mp4">
<section id="timelaps">
<video id="timelapsvid" loop preload autoplay>
<!-- <source class="240p" src="videos/timelaps-240p.mp4?nocache=<?php echo time(); ?>" 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?nocache=<?php echo time(); ?>" 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?nocache=<?php echo time(); ?>" type="video/mp4">
</video>
</section>
<!-- // 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});}
setupTimeline();};function setupTimeline(){_tl_items=new vis.DataSet(_tl_data_ar);_timeline=new vis.Timeline(_timeline_container,_tl_items,{});_timeline.on('select',onSelectTimelineItem)}
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);}
$(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();}
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 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();});
www/public_html/js/script.js
+82 -31
View File
@@ -1,76 +1,119 @@
$(document).ready(function() {
var _video = document.getElementById('video'), _fps = 24;
var _timeline, _timeline_container = document.getElementById('timeline'), _tl_data_ar=[], _tl_items;
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");
// preload all pictures before launching
// setTimeout(function(){
// play();
// }, 5000);
getMetaData();
// setupTimeline();
loadData();
};
function getMetaData(){
console.log('getMetaData');
function loadData(){
console.log('loadData');
// $.getJSON('metadata/frame.json',function(data){
// setUpData(data.frames)
// });
$.ajax({
dataType:"json",
url:'metadata/frames.json',
cache: false,
success:setUpData
});
console.log('getMetaData END');
};
function setUpData(data){
function setUpData(d){
console.log("setUpData");
// console.log("data", data);
_frames = d.frames;
// console.log(_frames);
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
});
}
// for (var i in _frames) {
// // console.log(data.frames[i]);
// _tl_data_ar.push({
// start:new Date(_frames[i].datetime),
// id:_frames[i].id
// });
// }
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(){
// 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
// var options = {};
// 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){
console.log("onSelectTimelineItem", props);
seekVideoTo(props.items[0]);
function onClickTimeline(props){
console.log("onClickTimeline", props.time);
// seekVideoTo(props.items[0]);
};
function seekVideoTo(f){
console.log("seekVideoTo frame", f);
_video.pause();
_video.currentTime = f/_fps;
function moveTimelineCursor(date){
_timeline.setCustomTime(date, "videotime", {animation:false});
_timeline.moveTo(date, {animation:false});
}
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){
requestAnimationFrame(play);
// console.log("_video.playing",_video.paused);
if (!_video.paused) {
moveTimelineCursor(_frames[vt2f(_video.currentTime)].datetime);
}
// now = Date.now();
// 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();
www/public_html/scss/styles.scss
+37 -6
View File
@@ -16,26 +16,56 @@ html, body{
top:0; left:0;
}
#pictures{
#timelaps{
position: relative; z-index: 5;
width:100%; height:100%;
overflow: hidden;
// border: 1px solid blue;
video {
video#timelapsvid {
position: absolute;
top: 0; left: 0;
width:100%; height:100%;
source:not(.1080p){
display:none;
// source:not(.1080p){
// display:none;
// }
@media (min-aspect-ratio: 16/9) {
height: 300%;
top: -100%;
}
@media (max-aspect-ratio: 16/9) {
width: 300%;
left: -100%;
}
}
}
#timeline{
position: absolute; z-index: 9;
bottom:0; left:0; width:67%; margin:1% 0 1% 32%; height:3em;
background-color: rgba(255, 255, 255, 0.6);
bottom:0; left:0; width:67%; margin:1% 0 1% 32%; padding:7px;
background-color: rgba(0, 0, 0, 0.8);
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%;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 2px;
display: none;
}