Concepts
Async Collaboration
- Comments
- In-app Notifications
- Recorder
- Inline Reactions
- Arrows
Realtime Collaboration
- Presence
- Cursors
- Live Selection
- Huddle
- Single Editor Mode
Recorder
Video Editor
Video editor component.
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
Overview
<VeltWireframe>
<VeltVideoEditorPlayerWireframe>
<VeltVideoEditorPlayerWireframe.Title />
<VeltVideoEditorPlayerWireframe.ApplyButton />
<VeltVideoEditorPlayerWireframe.DownloadButton />
<VeltVideoEditorPlayerWireframe.CloseButton />
<VeltVideoEditorPlayerWireframe.Preview />
<VeltVideoEditorPlayerWireframe.ToggleButton />
<VeltVideoEditorPlayerWireframe.Time />
<VeltVideoEditorPlayerWireframe.SplitButton />
<VeltVideoEditorPlayerWireframe.DeleteButton />
<VeltVideoEditorPlayerWireframe.Timeline />
</VeltVideoEditorPlayerWireframe>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe>
<VeltVideoEditorPlayerWireframe.Title />
<VeltVideoEditorPlayerWireframe.ApplyButton />
<VeltVideoEditorPlayerWireframe.DownloadButton />
<VeltVideoEditorPlayerWireframe.CloseButton />
<VeltVideoEditorPlayerWireframe.Preview />
<VeltVideoEditorPlayerWireframe.ToggleButton />
<VeltVideoEditorPlayerWireframe.Time />
<VeltVideoEditorPlayerWireframe.SplitButton />
<VeltVideoEditorPlayerWireframe.DeleteButton />
<VeltVideoEditorPlayerWireframe.Timeline />
</VeltVideoEditorPlayerWireframe>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-wireframe>
<velt-video-editor-player-title-wireframe></velt-video-editor-player-title-wireframe>
<velt-video-editor-player-apply-button-wireframe></velt-video-editor-player-apply-button-wireframe>
<velt-video-editor-player-download-button-wireframe></velt-video-editor-player-download-button-wireframe>
<velt-video-editor-player-close-button-wireframe></velt-video-editor-player-close-button-wireframe>
<velt-video-editor-player-preview-wireframe></velt-video-editor-player-preview-wireframe>
<velt-video-editor-player-toggle-button-wireframe></velt-video-editor-player-toggle-button-wireframe>
<velt-video-editor-player-time-wireframe></velt-video-editor-player-time-wireframe>
<velt-video-editor-player-split-button-wireframe></velt-video-editor-player-split-button-wireframe>
<velt-video-editor-player-delete-button-wireframe></velt-video-editor-player-delete-button-wireframe>
<velt-video-editor-player-timeline-wireframe></velt-video-editor-player-timeline-wireframe>
</velt-video-editor-player-wireframe>
</velt-wireframe>Title
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Title />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Title />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-title-wireframe></velt-video-editor-player-title-wireframe>
</velt-wireframe>ApplyButton
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.ApplyButton>
<VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
</VeltVideoEditorPlayerWireframe.ApplyButton>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.ApplyButton>
<VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
</VeltVideoEditorPlayerWireframe.ApplyButton>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-apply-button-wireframe>
<velt-video-editor-player-apply-button-loading-wireframe></velt-video-editor-player-apply-button-loading-wireframe>
</velt-video-editor-player-apply-button-wireframe>
</velt-wireframe>Loading
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-apply-button-loading-wireframe></velt-video-editor-player-apply-button-loading-wireframe>
</velt-wireframe>DownloadButton
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.DownloadButton />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.DownloadButton />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-download-button-wireframe></velt-video-editor-player-download-button-wireframe>
</velt-wireframe>CloseButton
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.CloseButton />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.CloseButton />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-close-button-wireframe></velt-video-editor-player-close-button-wireframe>
</velt-wireframe>Preview
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Preview>
<VeltVideoEditorPlayerWireframe.Preview.Loading />
<VeltVideoEditorPlayerWireframe.Preview.Video />
</VeltVideoEditorPlayerWireframe.Preview>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Preview>
<VeltVideoEditorPlayerWireframe.Preview.Loading />
<VeltVideoEditorPlayerWireframe.Preview.Video />
</VeltVideoEditorPlayerWireframe.Preview>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-preview-wireframe>
<velt-video-editor-player-preview-loading-wireframe></velt-video-editor-player-preview-loading-wireframe>
<velt-video-editor-player-preview-video-wireframe></velt-video-editor-player-preview-video-wireframe>
</velt-video-editor-player-preview-wireframe>
</velt-wireframe>Loading
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Preview.Loading />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Preview.Loading />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-preview-loading-wireframe></velt-video-editor-player-preview-loading-wireframe>
</velt-wireframe>Video
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Preview.Video />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Preview.Video />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-preview-video-wireframe></velt-video-editor-player-preview-video-wireframe>
</velt-wireframe>ToggleButton
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.ToggleButton />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.ToggleButton />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-toggle-button-wireframe></velt-video-editor-player-toggle-button-wireframe>
</velt-wireframe>Time
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Time>
<VeltVideoEditorPlayerWireframe.CurrentTime />
<VeltVideoEditorPlayerWireframe.TotalTime />
</VeltVideoEditorPlayerWireframe.Time>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Time>
<VeltVideoEditorPlayerWireframe.CurrentTime />
<VeltVideoEditorPlayerWireframe.TotalTime />
</VeltVideoEditorPlayerWireframe.Time>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-time-wireframe>
<velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
<velt-video-editor-player-total-time-wireframe></velt-video-editor-player-total-time-wireframe>
</velt-video-editor-player-time-wireframe>
</velt-wireframe>CurrentTime
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
</velt-wireframe>TotalTime
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.TotalTime />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.TotalTime />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-total-time-wireframe></velt-video-editor-player-total-time-wireframe>
</velt-wireframe>SplitButton
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.SplitButton>
<VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltVideoEditorPlayerWireframe.SplitButton>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.SplitButton>
<VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltVideoEditorPlayerWireframe.SplitButton>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-split-button-wireframe>
<velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
</velt-video-editor-player-split-button-wireframe>
</velt-wireframe>CurrentTime
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
</velt-wireframe>DeleteButton
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.DeleteButton />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.DeleteButton />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-delete-button-wireframe></velt-video-editor-player-delete-button-wireframe>
</velt-wireframe>Timeline
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline>
<VeltVideoEditorPlayerWireframe.Timeline.Container />
<VeltVideoEditorPlayerWireframe.Timeline.Marker />
</VeltVideoEditorPlayerWireframe.Timeline>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline>
<VeltVideoEditorPlayerWireframe.Timeline.Container />
<VeltVideoEditorPlayerWireframe.Timeline.Marker />
</VeltVideoEditorPlayerWireframe.Timeline>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-timeline-wireframe>
<velt-video-editor-player-timeline-container-wireframe />
<velt-video-editor-player-timeline-marker-wireframe></velt-video-editor-player-timeline-marker-wireframe>
</velt-video-editor-player-timeline-wireframe>
</velt-wireframe>Container
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Container>
<VeltVideoEditorPlayerWireframe.Timeline.Playhead />
<VeltVideoEditorPlayerWireframe.Timeline.Trim />
<VeltVideoEditorPlayerWireframe.Timeline.Scale />
</VeltVideoEditorPlayerWireframe.Timeline.Container>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Container>
<VeltVideoEditorPlayerWireframe.Timeline.Playhead />
<VeltVideoEditorPlayerWireframe.Timeline.Trim />
<VeltVideoEditorPlayerWireframe.Timeline.Scale />
</VeltVideoEditorPlayerWireframe.Timeline.Container>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-timeline-container-wireframe>
<velt-video-editor-player-timeline-playhead-wireframe></velt-video-editor-player-timeline-playhead-wireframe>
<velt-video-editor-player-timeline-trim-wireframe></velt-video-editor-player-timeline-trim-wireframe>
<velt-video-editor-player-timeline-scale-wireframe></velt-video-editor-player-timeline-scale-wireframe>
</velt-video-editor-player-timeline-container-wireframe>
</velt-wireframe>Playhead
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Playhead />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Playhead />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-timeline-playhead-wireframe></velt-video-editor-player-timeline-playhead-wireframe>
</velt-wireframe>Trim
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Trim />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Trim />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-timeline-trim-wireframe></velt-video-editor-player-timeline-trim-wireframe>
</velt-wireframe>Scale
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton />
</VeltVideoEditorPlayerWireframe.Timeline.Scale>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton />
</VeltVideoEditorPlayerWireframe.Timeline.Scale>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-timeline-scale-wireframe>
<velt-video-editor-player-zoom-button-wireframe />
</velt-video-editor-player-timeline-scale-wireframe>
</velt-wireframe>ZoomButton
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options />
</VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options />
</VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-zoom-button-wireframe>
<velt-video-editor-player-zoom-button-trigger-wireframe />
<velt-video-editor-player-zoom-button-options-wireframe />
</velt-video-editor-player-zoom-button-wireframe>
</velt-wireframe>Trigger
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-zoom-button-trigger-wireframe />
</velt-wireframe>Options
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List />
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
</VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List />
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
</VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-zoom-button-options-wireframe>
<velt-video-editor-player-zoom-button-options-input-wireframe />
<velt-video-editor-player-zoom-button-options-list-wireframe />
</velt-video-editor-player-zoom-button-options-wireframe>
</velt-wireframe>List
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
</VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
</VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-zoom-button-options-list-wireframe>
<velt-video-editor-player-zoom-button-options-list-item-wireframe />
</velt-video-editor-player-zoom-button-options-list-wireframe>
</velt-wireframe>Item
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-zoom-button-options-list-item-wireframe />
</velt-wireframe>Input
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-zoom-button-options-input-wireframe />
</velt-wireframe>Marker
<VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Marker />
</VeltWireframe><VeltWireframe>
<VeltVideoEditorPlayerWireframe.Timeline.Marker />
</VeltWireframe><velt-wireframe style="display:none;">
<velt-video-editor-player-timeline-marker-wireframe></velt-video-editor-player-timeline-marker-wireframe>
</velt-wireframe>Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.