| 1234567 |
- $(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();});
|
