SHOTSTACK VIDEO EDITOR
===========================
SHOTSTACK VIDEO EDITOR - ELEMENT DESCRIPTION
-----------------------------------------------------------------------
SHOTSTACK VIDEO EDITOR provides cloud-based video editing and rendering capabilities.
STEP-BY-STEP SETUP
--------------------------------
0) Register on Shotstack.io and get your OWNER ID & API KEYS.
1) In the Plugin Settings, enter your OWNER ID & API KEYS generated at the previous step.
2) Add the SHOTSTACK VIDEO EDITOR ELEMENT to the page on which the editor must be displayed.
3) Integrate the logic into your application using the following SHOTSTACK VIDEO EDITOR element's states and actions:
FIELDS:
EDITOR SETTINGS
- INTERACTIVE: Enable or disable interactivity to allow users to manipulate video elements.
- SHOW TIMELINE: Control the visibility of the timeline.
- SHOW SIDEPANEL: Show the sidepanel with clip controls.
- SHOW SETTINGS: Toggle the settings button in the sidepanel.
- SHOW CONTROLS: Show the player controls.
RENDERING SETTINGS
- WEBHOOK URL : Specify a webhook URL for rendering notification.
EDITOR STYLING
- PRIMARY COLOR : The primary color of the editor.
- SECONDARY COLOR : The secondary color of the editor.
EVENTS:
- EDIT SESSION CHANGED : Event triggered when a change to the edit session has been made. CURRENT EDIT DATA state is updated with the edit session data.
- EDITOR READY : Event triggered when the editor is loaded and ready. Triggered one.
EXPOSED STATES:
Use any element able to show/process the data of interest (such as a Group with a Text field) stored within the result of the following states of the SHOTSTACK VIDEO EDITOR ELEMENT:
- CURRENT EDIT SESSION DATA: Contains the current edit data in stringified JSON format. You may use this data to save an edit session. Updated when EDIT SESSION CHANGED is triggered.
ELEMENT ACTIONS - TRIGGERED IN WORKFLOW:
- ADD MEDIA ASSET: Add video, image or audio asset to the editor.
Inputs Fields:
- ASSET URL: URL of the asset such as
https://domain.com/asset.mp4.
- LOAD EDIT SESSION: Load an edit session using stringified JSON data.
Inputs Fields:
- EDIT SESSION DATA: Stringified Edit Session Data.
4) Set up the "SHOTSTACK AI - RENDER ASSET" action in the workflow to render the asset based on your edit session.
Inputs Fields :
- EDIT SESSION DATA : The edit session data from CURRENT EDIT DATA state.
- VERSION : Valid values: stage | v1
- VERSION : Include watermark logo on the rendered asset. The file must be publicly available.
Output Fields:
- SUCCESS : Boolean value indicating whether the creation was successful or not.
- MESSAGE : Status message of the render request.
- DETAIL: Detailed message of the render request.
- ID : ID of the asset.
5) Set-up the "SHOTSTACK - GET GENERATED ASSET" action in the workflow to retrieve the asset generated previously.
Inputs Fields :
- VERSION : Valid values: stage | v1
- ASSET ID : The id of the asset file.
Output Fields:
- MESSAGE: Status message of the render.
- ID: ID of the asset.
6) (Optional) Depending on your use-case, you may also generate assets using AI "GENERATE IMAGE ASSET FROM TEXT", "GENERATE AUDIO ASSET FROM TEXT", "GENERATE VIDEO ASSET FROM IMAGE" actions followed by "SHOTSTACK - GET GENERATED ASSET", which you may then use in your editor.
IMPLEMENTATION EXAMPLE
======================
Feel free to browse the app editor in the Service URL for an implementation example.
TROUBLESHOOTING
================
Any plugin-related error will be posted to the Logs tab, "Server logs" section of your App Editor.
Make sure that "Plugin server side output" and "Plugin client side output" are selected in "Show Advanced".
> Server Logs Details:
https://manual.bubble.io/core-resources/bubbles-interface/logs-tab#server-logsPERFORMANCE CONSIDERATIONS
===========================
N/A
QUESTIONS?
===========
Contact us at
[email protected] for any additional features you would require or support questions.