Recorder player

Recorder player component. This is the small player that appears when a recording is done.

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

Overview

React / Next.js

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

Other Frameworks

<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

<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>

Other Frameworks

<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

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

Other Frameworks

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

Timeline

React / Next.js

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

Other Frameworks

<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

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

Other Frameworks

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

SeekBar

React / Next.js

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

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

Subtitles

React / Next.js

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

Other Frameworks

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

Avatar

React / Next.js

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

Other Frameworks

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

Name

React / Next.js

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

Other Frameworks

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

SubtitlesButton

React / Next.js

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

Other Frameworks

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

Transcription

React / Next.js

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

Other Frameworks

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

EditButton

React / Next.js

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

Other Frameworks

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

CopyLink

React / Next.js

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

Other Frameworks

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

Delete

React / Next.js

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

Other Frameworks

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

AudioContainer

React / Next.js

<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>

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

<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

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

Other Frameworks

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

AudioWaveform

React / Next.js

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

Other Frameworks

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

Subtitles

React / Next.js

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

Other Frameworks

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

Avatar

React / Next.js

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

Other Frameworks

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

Name

React / Next.js

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

Other Frameworks

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

SubtitlesButton

React / Next.js

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

Other Frameworks

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

Transcription

React / Next.js

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

Other Frameworks

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

CopyLink

React / Next.js

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

Other Frameworks

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

Delete

React / Next.js

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

Other Frameworks

<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

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

Other Frameworks

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