Layers

Overview

A layer (or clip) is a single piece of content with audio and/or video output. Etro comes with several layers builtin. You can also write your own layers with JavaScript (see Custom Layers).

Audio

To use an <audio/> element in a movie:

var audioLayer = new etro.layer.Audio({ startTime: 0, source: audioElement })
movie.addLayer(audioLayer)

Optional arguments:

Images

To use an <img/> element in a movie:

var imageLayer = new etro.layer.Image({ startTime: 0, duration: 3, source: img })
movie.addLayer(imageLayer)

Optional arguments:

Text

To add text to a movie:

var fn = () => `${Math.random()}`  // Choose a random number every frame
var textLayer = new etro.layer.Text({ startTime: 0, duration: 3, text: fn })
movie.addLayer(textLayer)

Optional arguments:

Videos

To add a <video/> element to a movie:

var videoLayer = new etro.layer.Video({ startTime: 0, source: videoElement })
movie.addLayer(videoLayer)

Optional arguments:

Custom Layers

You can subclass any layer to create your own:

class MyLayer extends etro.layer.Visual {
  constructor(options) {
    super(options)

    this.foo = options.foo || false
  }

  // doRender is a special method for visual layers. If you're not subclassing a visual layer, rename this to `render`.
  doRender() {
    super.doRender()

    // Evaluate the foo property at the current frame (to support dynamic properties)
    if (etro.val(this, 'foo', this.currentTime)) {
      // cctx (canvas context) is the 2d rendering context for this layer
      this.cctx.fillRect(0, 0, this.width, this.height)
    }
  }
}