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

​
Overview

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe>
        <VeltRecorderPlayerWireframe.VideoContainer />
        <VeltRecorderPlayerWireframe.AudioContainer />
    </VeltRecorderPlayerWireframe>
</VeltWireframe>

​
VideoContainer

  • React / Next.js
  • Other Frameworks
<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

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Video />
</VeltWireframe>

​
Timeline

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Timeline>
        <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
        <VeltRecorderPlayerWireframe.VideoContainer.Timeline.SeekBar />
    </VeltRecorderPlayerWireframe.VideoContainer.Timeline>
</VeltWireframe>

​
PlayButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
</VeltWireframe>

​
SeekBar

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Timeline.SeekBar />
</VeltWireframe>

​
FullScreenButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.FullScreenButton />
</VeltWireframe>

​
Overlay

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Overlay>
        <VeltRecorderPlayerWireframe.VideoContainer.PlayButton />
    </VeltRecorderPlayerWireframe.VideoContainer.Overlay>
</VeltWireframe>

​
PlayButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.PlayButton>
        <VeltRecorderPlayerWireframe.VideoContainer.Time />
    </VeltRecorderPlayerWireframe.VideoContainer.PlayButton>
</VeltWireframe>

​
Time

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Time />
</VeltWireframe>

​
Subtitles

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Subtitles />
</VeltWireframe>

​
Avatar

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Avatar />
</VeltWireframe>

​
Name

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Name />
</VeltWireframe>

​
SubtitlesButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.SubtitlesButton />
</VeltWireframe>

​
Transcription

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Transcription />
</VeltWireframe>

​
EditButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.EditButton />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.CopyLink />
</VeltWireframe>

​
Delete

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.VideoContainer.Delete />
</VeltWireframe>

​
AudioContainer

  • React / Next.js
  • Other Frameworks
<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

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle>
        <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Pause />
        <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Play />
    </VeltRecorderPlayerWireframe.AudioContainer.AudioToggle>
</VeltWireframe>

​
Pause

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Pause />
</VeltWireframe>

​
Play

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.AudioToggle.Play />
</VeltWireframe>

​
Time

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Time />
</VeltWireframe>

​
AudioWaveform

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.AudioWaveform />
</VeltWireframe>

​
Subtitles

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Subtitles />
</VeltWireframe>

​
Avatar

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Avatar />
</VeltWireframe>

​
Name

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Name />
</VeltWireframe>

​
SubtitlesButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.SubtitlesButton />
</VeltWireframe>

​
Transcription

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Transcription />
</VeltWireframe>
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.CopyLink />
</VeltWireframe>

​
Delete

  • React / Next.js
  • Other Frameworks
<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.
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltRecorderPlayerWireframe.AudioContainer.Audio />
</VeltWireframe>
⌘I