Timeline example

by Johan Nyman

HTML

<script src="https://cdn.jsdelivr.net/gh/SuperFlyTV/timeline-visualizer@dist/dist/js/timeline-visualizer.min.js"></script>
<canvas width="500" height=300 id="timeline"></canvas>
<div id="message"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}

JavaScript

try {
  var v = new TimelineVisualizer.TimelineVisualizer('timeline', {})
  v.setViewPort({
    zoom: 500,
  })
  v.updateTimeline([{
      id: 'video0',
      layer: 'L1',
      enable: {
        start: 10,
        end: 100
      },
      content: {}
    },
    { // This object defines a graphic, to be overlaid on the video
      id: 'graphic0',
      layer: 'L2',
      enable: {
        start: '#video0.start + 10', // 10 after video0 starts
        duration: 10
      },
      content: {},
      classes: ['graphics']
    },
    {
      id: 'graphic1',
      layer: 'L2',
      enable: {
        start: '#graphic0.end + 10', // 10 after graphic0 ends
        duration: 15
      },
      content: {},
      classes: ['graphics']
    },
    {
      id: 'graphicBackground',
      layer: 'L3',
      enable: {
        while: '!.graphics' // When no graphics are playing
      },
      content: {}
    }
  ])
} catch (e) {
  document.querySelector("#message").innerHTML = e
}