editor-timeline

timeline for multimedia editors

editor-timeline

timeline for multimedia editors

example

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">&gt;</button>
    <div id="timeline"></div>
    <script src="bundle.js"></script> 
  </body>
</html>

bundle with browserify:

browserify timeline.js > bundle.js

methods

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.

events

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.

install

With npm do:

npm install editor-timeline

license

MIT