API & Integration -> Preview SDK
Reference
All members of the Preview class in @creatomate/preview 1.6, each with the page that explains it.
Constructor and properties
| Member | Description |
|---|---|
new Preview(element, mode, publicToken) |
Creates a preview inside an empty div, in 'player' or 'interactive' mode. Installation |
ready |
true once the preview can be used. |
mode |
The current mode. |
state |
The video that is shown, read-only. State |
element |
The container element. |
dispose() |
Removes the preview and releases its resources. |
Loading and content
| Method | Description |
|---|---|
loadTemplate(templateId, createUndoPoint?) |
Loads a template from the project of the public token. Loading |
setSource(source, createUndoPoint?) |
Shows a video or image described in RenderScript. |
getSource(state?) |
The RenderScript of the whole video, or of one element. |
getElements(state?) |
All elements as a flat array, nested ones included. |
findElement(predicate, state?) |
The first element the predicate matches. |
setModifications(modifications) |
Lays modifications over the video without changing it. Modifications |
applyModifications(modifications) |
Applies modifications to the video itself, as an undo step. Changing the video |
cacheAsset(url, blob) |
Makes a file available under a URL before it's uploaded there. Uploads |
setCacheBypassRules(rules) |
Regular expressions matched against video URLs, to control which videos outside Creatomate's CDN the preview caches in full. |
Playback
| Method | Description |
|---|---|
play(), pause() |
Starts and pauses playback. Controlling playback |
setTime(seconds) |
Jumps to a time in the video. |
setLoop(loop) |
Whether the video starts over at the end. On by default. |
setControls(enabled) |
Shows or hides the built-in controls of player mode. |
Modes
| Method | Description |
|---|---|
setMode(mode) |
Switches between 'player' and 'interactive'. Player and interactive mode |
setZoom(mode, scale?) |
'free', 'auto', 'fixed', or 'centered'. |
setTool(tool) |
'default', 'pen', 'text', 'ellipse', or 'rectangle'. |
setActiveElements(elementIds) |
Selects elements by ID. |
setActiveComposition(elementId) |
Opens a composition for editing, or the main composition with null. |
undo(), redo() |
Step through the undo history. |
clearHistory(stack?) |
Clears the history, or one side of it with 'undo' or 'redo'. |
Events
| Event | Called when |
|---|---|
onReady() |
The preview can be used. Events |
onLoad(), onLoadComplete() |
A file starts loading, and loading ends. |
onPlay(), onPause() |
Playback starts or stops. |
onTimeChange(time) |
The playback time changes. |
onStateChange(state) |
The video changes in any way. State |
onActiveElementsChange(elementIds) |
The selection changes. |
onActiveCompositionChange(elementId) |
Another composition is opened for editing. |
onToolChange(tool) |
The mouse tool changes. |
onScaleChange(scale) |
The canvas is zoomed. |