We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

<VeltWireframe>
    <VeltRecorderPlayerWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer />
        <VeltRecorderPlayerWireframe.AudioContainer />
    </VeltRecorderPlayerWireframe>
</VeltWireframe>

VideoContainer

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer>
        <VeltRecorderPlayerWireframe.VideoContainer.Video />
        <VeltRecorderPlayerWireframe.VideoContainer.Timeline />
        <VeltRecorderPlayerWireframe.VideoContainer.FullScreenButton />
        <VeltRecorderPlayerWireframe.VideoContainer.Overlay />
        <VeltRecorderPlayerWireframe.VideoContainer.Subtitles />
        <VeltRecorderPlayerWireframe.VideoContainer.Avatar />
        <VeltRecorderPlayerWireframe.VideoContainer.Name />
        <VeltRecorderPlayerWireframe.VideoContainer.SubtitlesButton />
        <VeltRecorderPlayerWireframe.VideoContainer.Transcription />
        <VeltRecorderPlayerWireframe.VideoContainer.EditButton />
        <VeltRecorderPlayerWireframe.VideoContainer.CopyLink />
        <VeltRecorderPlayerWireframe.VideoContainer.Delete />
    </VeltRecorderPlayerWireframe.VideoContainer>
</VeltWireframe>

Video

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Video />
</VeltWireframe>

Timeline

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Timeline>
        <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
        <VeltRecorderPlayerWireframe.VideoContainer.Timeline.SeekBar />
    </VeltRecorderPlayerWireframe.VideoContainer.Timeline>
</VeltWireframe>

PlayButton

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
</VeltWireframe>

SeekBar

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Timeline.SeekBar />
</VeltWireframe>

FullScreenButton

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.FullScreenButton />
</VeltWireframe>

Overlay

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Overlay>
        <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
    </VeltRecorderPlayerWireframe.VideoContainer.Overlay>
</VeltWireframe>

PlayButton

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.PlayButton>
        <VeltRecorderPlayerWireframe.VideoContainer.Time />
    </VeltRecorderPlayerWireframe.VideoContainer.PlayButton>
</VeltWireframe>

Time

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Time />
</VeltWireframe>

Subtitles

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Subtitles />
</VeltWireframe>

Avatar

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Avatar />
</VeltWireframe>

Name

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Name />
</VeltWireframe>

SubtitlesButton

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.SubtitlesButton />
</VeltWireframe>

Transcription

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Transcription />
</VeltWireframe>

EditButton

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.EditButton />
</VeltWireframe>

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.CopyLink />
</VeltWireframe>

Delete

<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Delete />
</VeltWireframe>

AudioContainer

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer>
        <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle />
        <VeltRecorderPlayerWireframe.AudioContainer.Time />
        <VeltRecorderPlayerWireframe.AudioContainer.AudioWaveform />
        <VeltRecorderPlayerWireframe.AudioContainer.Avatar />
        <VeltRecorderPlayerWireframe.AudioContainer.Name />
        <VeltRecorderPlayerWireframe.AudioContainer.SubtitlesButton />
        <VeltRecorderPlayerWireframe.AudioContainer.Transcription />
        <VeltRecorderPlayerWireframe.AudioContainer.CopyLink />
        <VeltRecorderPlayerWireframe.AudioContainer.Delete />
        <VeltRecorderPlayerWireframe.AudioContainer.Subtitles />
        <VeltRecorderPlayerWireframe.AudioContainer.Audio />
    </VeltRecorderPlayerWireframe.AudioContainer>
</VeltWireframe>

AudioToggle

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle>
        <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Pause />
        <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Play />
    </VeltRecorderPlayerWireframe.AudioContainer.AudioToggle>
</VeltWireframe>

Pause

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Pause />
</VeltWireframe>

Play

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Play />
</VeltWireframe>

Time

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Time />
</VeltWireframe>

AudioWaveform

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.AudioWaveform />
</VeltWireframe>

Subtitles

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Subtitles />
</VeltWireframe>

Avatar

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Avatar />
</VeltWireframe>

Name

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Name />
</VeltWireframe>

SubtitlesButton

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.SubtitlesButton />
</VeltWireframe>

Transcription

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Transcription />
</VeltWireframe>

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.CopyLink />
</VeltWireframe>

Delete

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Delete />
</VeltWireframe>

Audio

This tag loads the audio recording and is hidden by default to prevent it from displaying in the UI.

<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Audio />
</VeltWireframe>