Module API - end-user/flyovers

Description

A flyover is a function executed for every frame during render process with the main purpose of providing useful information or sync data.

A flyover operates outside a scene animation pipeline, and can it modify the content of one or more elements.

BeamToIX has following built-in flyovers:

More flyovers can be added via pluginManager.addFlyovers.

A info flyover provides information regarding current time position and frame.

css

#flyover {
  left: 10px;
}

html

<div id="flyover" class="beamtoix-flyover"></div>

story.addFlyover('info', {
   selector: '#flyover',
   format: 'story-frame: ${storyFrameNr}\nstory-time: ${storyElapsedS}',
});

A video-sync flyover synchronizes the current render frame with a background video.

WARNING Due Chrome 'autoplay-policy', it's not possible to 'safely' use Chrome to sync with videos, In order to overcome this limitation:

Use Firefox to test the animation with a background video.
Set serverRender: false to prevent beamtoix render from attempting to sync the video while server render.
When using beamtoix movie, set --bkg-movie parameter with the video filename to use a background video.

css

#flyover {
  left: 10px;
}

html

<video id=video width="385" height="288" src="assets/video.mp4" type="video/mp4">

story.addFlyover('video-sync', {
    selector: '#video',
    serverRender: false,
  });