API & Integration -> Preview SDK
State
preview.state, onStateChange
preview.state describes the video as the engine plays it: its size and length, the second at which each element appears, and whether there is anything to undo. It is updated before every onStateChange and is read-only; to change the video, use the methods under Loading and changing content.
The video
| Field | Description |
|---|---|
width, height |
The size of the video in pixels. Size the container to this aspect ratio. |
duration |
The length of the video in seconds, with every element in place. The length of a playhead. |
undo, redo |
Whether there is something to undo or redo. Enable the buttons from these. |
source |
The RenderScript of the video, without its elements. |
elements |
The elements of the video, described below. |
An element
| Field | Description |
|---|---|
source |
The RenderScript of the element, without nested elements. Its name, id, type, and dynamic flag are here, which is what a form built from the template reads. |
elements |
The nested elements of a composition. |
track |
The element's track number. |
localTime |
When the element appears, in seconds, within its composition. |
globalTime |
When the element appears, in seconds, within the whole video. Seek here to show the element. |
duration |
How long the element is shown, in seconds. |
exitDuration |
How long the next element overlaps it, in seconds. |
The timing fields are what the state has and the JSON hasn't. The JSON says where you put an element; the state says where the engine placed it, after automatic arrangement and transitions. Only the latter is right for seeking:
1const slide = preview.findElement((element) => element.source.name === 'Slide-3');
2await preview.setTime(slide.globalTime);getSource(state) turns any state, the whole video or one element, back into RenderScript.
Next step
The one page about the API rather than the SDK: Rendering the final video.