Getting Started

Including Vidar

 <script src="path/to/vidar"></script>

This exposes the framework as vd.

Canvas

Every movie requires a canvas to render on. Let's create one and use it to make a new movie:

window.addEventListener('load', () => {
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const movie = new vd.Movie(canvas);
});

Video Layer

window.addEventListener('load', () => {
  ...

  const video = document.createElement('video');
  video.src = "path/to/video.mp4";
  video.onloadeddata = () => {
    // Fit canvas (movie) to video
    canvas.width = video.videoWidth;  // movie.width is synonymous with canvas.width
    canvas.height = video.videoHeight;
    ...
  };
})

Movie

video.onloadeddata = () => {
  ...
  movie
    // add a video layer at 0s in the timeline
    .addLayer(new vd.layer.Video(0, video))
    .play();
};

The full source code can be found here.