timeline for multimedia editors
var keycode = require('keycode');
var timeline = require('editor-timeline')(200);
timeline.appendTo('#timeline');
window.addEventListener('keydown', function (ev) {
var chr = keycode(ev);
if (chr === 'k') {
var m = timeline.mark();
timeline.select(m.id);
};
if (chr === 'delete') timeline.removeMark('_active');
if (chr === 'home') timeline.setTime(0);
if (chr === 'space') timeline.toggle();
if (chr === 'left') {
ev.stopPropagation();
ev.preventDefault();
timeline.select('prev');
}
if (chr === 'right') {
ev.stopPropagation();
ev.preventDefault();
timeline.select('next');
}
});
var play = document.querySelector('#play');
timeline.on('start', function () {
play.textContent = '||';
});
timeline.on('stop', function () {
play.textContent = '>';
});
with some html:
<html>
<style>
#timeline { height: 50px; }
</style>
<body>
<button id="play">></button>
<div id="timeline"></div>
<script src="bundle.js"></script>
</body>
</html>
bundle with browserify:
browserify timeline.js > bundle.js
var timeline = require('editor-timeline')
Create a new timeline t
given pxps
, the number of pixels per second.
Append the timeline element to the html element or query string target
.
Create a new mark m
.
Select the mark at id
.
Remove the mark at id
.
Start playing.
Stop playing.
Start playing if not playing, otherwise stop playing.
Set the current time n
in seconds.
Get the current time in seconds.
When there is a new mark, this event fires.
When the mark is activated, this event fires.
When a mark is removed, this event fires.
With npm do:
npm install editor-timeline
MIT