Skip to main content

Interacting with the Studio SDK

API Objects​

Changes on the Studio automatically update the Edit and Metadata objects.

Edit object​

Accessible via window.shotstack.edit, this object allows you to render videos using the Edit API.

Metadata object​

Accessible via window.shotstack.metadata, this object updates with changes to the playhead position and timelineDuration.

Event Listeners​

Register an event listener for the update event to execute a callback function whenever the Edit object is updated:

Update event​

When the video template gets updated in the Studio this event fires and provides an updated Edit JSON object.

window.shotstack.on('update', (data) => {
    console.log('Clip updated', data);
});

Metadata event​

When the user interacts with the timeline the metadata event fires, providing you with the most recent position of the playhead and the timelineDuration.

window.shotstack.on('update', (data) => {
    console.log('Clip updated', data);
});

Loading Templates​

You can load an Edit JSON object into the Studio using the load() method.

This is helpful is you want to load a new template into the editor.

window.shotstack.load('studio', template);

Loading images and videos into the Studio​

You can upload images and videos by uploading them using your favourite data store or via the Ingest API.

Add a clip with the new asset to your Edit object and load this into the Studio using the load() method. You can use the metadata property to place the media where the user is currently iteracting with the Studio.

Info

Native upload functionality is on the roadmap and will be supported in the future.