Recorder player

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>

<velt-wireframe style="display:none;">
    <velt-recorder-player-wireframe>
        <velt-recorder-player-video-container-wireframe></velt-recorder-player-video-container-wireframe>
        <velt-recorder-player-audio-container-wireframe></velt-recorder-player-audio-container-wireframe>
    </velt-recorder-player-wireframe>
</velt-wireframe>

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>

<velt-wireframe style="display:none;">
    <velt-recorder-player-video-container-wireframe>
        <velt-recorder-player-video-wireframe></velt-recorder-player-video-wireframe>
        <velt-recorder-player-timeline-wireframe></velt-recorder-player-timeline-wireframe>
        <velt-recorder-player-full-screen-button-wireframe></velt-recorder-player-full-screen-button-wireframe>
        <velt-recorder-player-overlay-wireframe></velt-recorder-player-overlay-wireframe>
        <velt-recorder-player-subtitles-wireframe></velt-recorder-player-subtitles-wireframe>
        <velt-recorder-player-avatar-wireframe></velt-recorder-player-avatar-wireframe>
        <velt-recorder-player-name-wireframe></velt-recorder-player-name-wireframe>
        <velt-recorder-player-subtitles-button-wireframe></velt-recorder-player-subtitles-button-wireframe>
        <velt-recorder-player-transcription-wireframe></velt-recorder-player-transcription-wireframe>
        <velt-recorder-player-edit-button-wireframe></velt-recorder-player-edit-button-wireframe>
        <velt-recorder-player-copy-link-wireframe></velt-recorder-player-copy-link-wireframe>
        <velt-recorder-player-delete-wireframe></velt-recorder-player-delete-wireframe>
    </velt-recorder-player-video-container-wireframe>
</velt-wireframe>

Video

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-video-wireframe></velt-recorder-player-video-wireframe>
</velt-wireframe>

Timeline

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-timeline-wireframe>
        <velt-recorder-player-play-button-wireframe></velt-recorder-player-play-button-wireframe>
        <velt-recorder-player-timeline-seek-bar-wireframe></velt-recorder-player-timeline-seek-bar-wireframe>
    </velt-recorder-player-timeline-wireframe>
</velt-wireframe>

PlayButton

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-play-button-wireframe></velt-recorder-player-play-button-wireframe>
</velt-wireframe>

SeekBar

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-timeline-seek-bar-wireframe></velt-recorder-player-timeline-seek-bar-wireframe>
</velt-wireframe>

FullScreenButton

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-full-screen-button-wireframe></velt-recorder-player-full-screen-button-wireframe>
</velt-wireframe>

Overlay

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-overlay-wireframe>
        <velt-recorder-player-play-button-wireframe></velt-recorder-player-play-button-wireframe>
    </velt-recorder-player-overlay-wireframe>
</velt-wireframe>

PlayButton

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-play-button-wireframe>
        <velt-recorder-player-time-wireframe></velt-recorder-player-time-wireframe>
    </velt-recorder-player-play-button-wireframe>
</velt-wireframe>

Time

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-time-wireframe></velt-recorder-player-time-wireframe>
</velt-wireframe>

Subtitles

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-subtitles-wireframe></velt-recorder-player-subtitles-wireframe>
</velt-wireframe>

Avatar

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-avatar-wireframe></velt-recorder-player-avatar-wireframe>
</velt-wireframe>

Name

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-name-wireframe></velt-recorder-player-name-wireframe>
</velt-wireframe>

SubtitlesButton

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-subtitles-button-wireframe></velt-recorder-player-subtitles-button-wireframe>
</velt-wireframe>

Transcription

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-transcription-wireframe></velt-recorder-player-transcription-wireframe>
</velt-wireframe>

EditButton

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-edit-button-wireframe></velt-recorder-player-edit-button-wireframe>
</velt-wireframe>

CopyLink

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-copy-link-wireframe></velt-recorder-player-copy-link-wireframe>
</velt-wireframe>

Delete

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-delete-wireframe></velt-recorder-player-delete-wireframe>
</velt-wireframe>

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>

<velt-wireframe style="display:none;">
    <velt-recorder-player-audio-container-wireframe>
        <velt-recorder-player-audio-toggle-wireframe></velt-recorder-player-audio-toggle-wireframe>
        <velt-recorder-player-time-wireframe></velt-recorder-player-time-wireframe>
        <velt-recorder-player-audio-waveform-wireframe></velt-recorder-player-audio-waveform-wireframe>
        <velt-recorder-player-subtitles-wireframe></velt-recorder-player-subtitles-wireframe>
        <velt-recorder-player-avatar-wireframe></velt-recorder-player-avatar-wireframe>
        <velt-recorder-player-name-wireframe></velt-recorder-player-name-wireframe>
        <velt-recorder-player-subtitles-button-wireframe></velt-recorder-player-subtitles-button-wireframe>
        <velt-recorder-player-transcription-wireframe></velt-recorder-player-transcription-wireframe>
        <velt-recorder-player-copy-link-wireframe></velt-recorder-player-copy-link-wireframe>
        <velt-recorder-player-delete-wireframe></velt-recorder-player-delete-wireframe>
        <velt-recorder-player-audio-wireframe></velt-recorder-player-audio-wireframe>
    </velt-recorder-player-audio-container-wireframe>
</velt-wireframe>

AudioToggle

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-audio-toggle-wireframe>
        <velt-recorder-player-audio-toggle-pause-wireframe></velt-recorder-player-audio-toggle-pause-wireframe>
        <velt-recorder-player-audio-toggle-play-wireframe></velt-recorder-player-audio-toggle-play-wireframe>
    </velt-recorder-player-audio-toggle-wireframe>
</velt-wireframe>

Pause

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-audio-toggle-pause-wireframe></velt-recorder-player-audio-toggle-pause-wireframe>
</velt-wireframe>

Play

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-audio-toggle-play-wireframe></velt-recorder-player-audio-toggle-play-wireframe>
</velt-wireframe>

Time

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-time-wireframe></velt-recorder-player-time-wireframe>
</velt-wireframe>

AudioWaveform

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-audio-waveform-wireframe></velt-recorder-player-audio-waveform-wireframe>
</velt-wireframe>

Subtitles

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-subtitles-wireframe></velt-recorder-player-subtitles-wireframe>
</velt-wireframe>

Avatar

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-avatar-wireframe></velt-recorder-player-avatar-wireframe>
</velt-wireframe>

Name

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-name-wireframe></velt-recorder-player-name-wireframe>
</velt-wireframe>

SubtitlesButton

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-subtitles-button-wireframe></velt-recorder-player-subtitles-button-wireframe>
</velt-wireframe>

Transcription

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-transcription-wireframe></velt-recorder-player-transcription-wireframe>
</velt-wireframe>

CopyLink

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-copy-link-wireframe></velt-recorder-player-copy-link-wireframe>
</velt-wireframe>

Delete

React / Next.js
Other Frameworks

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

<velt-wireframe style="display:none;">
    <velt-recorder-player-delete-wireframe></velt-recorder-player-delete-wireframe>
</velt-wireframe>

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>

<velt-wireframe style="display:none;">
    <velt-recorder-player-audio-wireframe></velt-recorder-player-audio-wireframe>
</velt-wireframe>

Concepts

Async Collaboration

Realtime Collaboration

Recorder player

Overview

VideoContainer

Video

Timeline

PlayButton

SeekBar

FullScreenButton

Overlay

PlayButton

Time

Subtitles

Avatar

Name

SubtitlesButton

Transcription

EditButton

CopyLink

Delete

AudioContainer

AudioToggle

Pause

Play

Time

AudioWaveform

Subtitles

Avatar

Name

SubtitlesButton

Transcription

CopyLink

Delete

Audio

Concepts

Async Collaboration

Realtime Collaboration

​Overview

​VideoContainer

​Video

​Timeline

​PlayButton

​SeekBar

​FullScreenButton

​Overlay

​PlayButton

​Time

​Subtitles

​Avatar

​Name

​SubtitlesButton

​Transcription

​EditButton

​CopyLink

​Delete

​AudioContainer

​AudioToggle

​Pause

​Play

​Time

​AudioWaveform

​Subtitles

​Avatar

​Name

​SubtitlesButton

​Transcription

​CopyLink

​Delete

​Audio

Overview

VideoContainer

Video

Timeline

PlayButton

SeekBar

FullScreenButton

Overlay

PlayButton

Time

Subtitles

Avatar

Name

SubtitlesButton

Transcription

EditButton

CopyLink

Delete

AudioContainer

AudioToggle

Pause

Play

Time

AudioWaveform

Subtitles

Avatar

Name

SubtitlesButton

Transcription

CopyLink

Delete

Audio