video + timeline are synchronized
This commit is contained in:
Bachir Soussi Chiadmi
+5
-3
@@ -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();});
|
||||
@@ -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();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user