Video Editor

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>

Concepts

Async Collaboration

Realtime Collaboration

Video Editor

Overview

Title

ApplyButton

Loading

DownloadButton

CloseButton

Preview

Loading

Video

ToggleButton

Time

CurrentTime

TotalTime

SplitButton

CurrentTime

DeleteButton

Timeline

Container

Playhead

Trim

Scale

ZoomButton

Trigger

Options

List

Item

Input

Marker

Concepts

Async Collaboration

Realtime Collaboration

​Overview

​Title

​ApplyButton

​Loading

​DownloadButton

​CloseButton

​Preview

​Loading

​Video

​ToggleButton

​Time

​CurrentTime

​TotalTime

​SplitButton

​CurrentTime

​DeleteButton

​Timeline

​Container

Playhead

Trim

Scale

ZoomButton

Trigger

Options

List

Item

Input

​Marker

Overview

Title

ApplyButton

Loading

DownloadButton

CloseButton

Preview

Loading

Video

ToggleButton

Time

CurrentTime

TotalTime

SplitButton

CurrentTime

DeleteButton

Timeline

Container

Marker