123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- $(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');
- // $.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(d){
- console.log("setUpData");
- _frames = d.frames;
- // console.log(_frames);
- // for (var i in _frames) {
- // // console.log(data.frames[i]);
- // _tl_data_ar.push({
- // start:new Date(_frames[i].datetime),
- // id:_frames[i].id
- // });
- // }
- // 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);
- // Configuration for the Timeline
- // var options = {};
- // Create a Timeline
- _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);
- // seekVideoTo(props.items[0]);
- };
- 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;
- //
- // if(delta > interval){
- // then = now -(delta % interval);
- // }
- }
- /* helpers */
- function vt2f(ct){
- // console.log("Video Time 2 frame");
- return Math.round(ct/(1/_fps));
- // console.log("frame", frame);
- }
- init();
- });
|