BlogPlaygroundOne

VVideo API

ads via vuetify

Props
name
type
default
aspect-ratio
string | number

undefined

Sets the aspect ratio for the playback, calculated as width/height.

autoplay
boolean

false

Starts loading the media file without waiting for user to click. Playback begins once enough data is loaded.

background-color
string

undefined

Container background color.

color
string

undefined

General color applied to icons and sliders.

controls-props
unknown

undefined

Pass props through to the v-video-controls component. Accepts an object with anything from v-video-controls props, camelCase keys are recommended.

controls-transition
string | boolean | (TransitionProps & { component: any })

false

The reveal transition applied to the VVideoControls component once the media file is loaded.

controls-variant
'default' | 'hidden' | 'tube' | 'mini'

'default'

Variant passed to the VVideoControls component.

density
'default' | 'comfortable' | 'compact'

'default'

Adjusts the vertical height used by the component.

detached
boolean

false

Moves the container below so it won’t obstruct the video.

duration
number

0

Total duration of the video used to calculate displayed time.

eager
boolean

false

Silently loades the media file without waiting for user to click.

elevation
string | number

undefined

Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.

error
boolean | MediaError

false

Puts the component in the manual error state.

floating
boolean

false

Introduces visual spacing from the video boundaries.

height
string | number

undefined

Sets the height for the component.

hide-fullscreen
boolean

false

Hides default fullscreen button.

hide-overlay
boolean

false

Hide center play icon.

hide-play
boolean

false

Hides default play button.

hide-progress-bar
boolean

false

Hides default progress bar.

hide-volume
boolean

false

Hides default volume control.

image
string

undefined

Apply a specific image as cover before the video is loaded.

max-height
string | number

undefined

Sets the maximum height for the component.

max-width
string | number

undefined

Sets the maximum width for the component.

min-height
string | number

undefined

Sets the minimum height for the component.

min-width
string | number

undefined

Sets the minimum width for the component.

muted
boolean

false

Hides volume control and disables the playback sound.

no-fullscreen
boolean

false

Disable fullscreen and hide the default fullscreen button.

pills
boolean

false

Makes the container transparent and shows inner actions in separated boxes.

playing
boolean

false

Applies correct icon of the default play button.

progress
number

0

Controls main slider value (0 ~ 100)

rounded
string | number | boolean | (string | number | false | true)[]

false

Applies a border radius to the video container and the controls. Accepts array of two values to customize elements separately.

split-time
boolean

false

Splits time into elapsed and remaining on each side of the main slider.

src
string

undefined

Media file URL

src-object
Blob | MediaStream | MediaSource

undefined

Sets the source of the video to a MediaStream, MediaSource, or Blob object. Useful for WebRTC streaming.

start-at
string | number

undefined

Moves progress to the specified time (in seconds) once the media file is loaded.

theme
string

undefined

Specify a theme for this component and all of its children.

track-color
string

undefined

Passed to the main slider color prop.

type
string

undefined

Media file type (optional)

variant
'background' | 'player'

'player'

Applies a distinct style to the component.

volume
string | number

undefined

Volume value passed to the underlying control and slots.

volume-props
{
  inline: boolean
  direction: 'vertical' | 'horizontal'
  menuProps: {
    modelValue: boolean
    style: StyleValue
    location: Anchor
    disabled: boolean
    transition:
      | string
      | boolean
      | (TransitionProps & { component: Component })
      | {
          component: ComponentPublicInstanceConstructor<
            CreateComponentPublicInstanceWithMixins<
              {} & {
                target?: HTMLElement | [x: number, y: number] | undefined
              } & {
                $children?:
                  | VNodeChild
                  | { $stable?: boolean | undefined }
                  | (() => VNodeChild)
                  | { default?: (() => VNodeChild) | undefined }
                'v-slots'?:
                  | { default?: false | (() => VNodeChild) | undefined }
                  | undefined
              } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
              () => JSX.Element,
              unknown,
              {},
              {},
              ComponentOptionsMixin,
              ComponentOptionsMixin,
              Record<string, any>,
              PublicProps,
              {},
              true,
              {},
              SlotsType<Partial<MakeSlots<{ default: never }>>>,
              GlobalComponents,
              GlobalDirectives,
              string,
              {},
              any,
              ComponentProvideOptions,
              OptionTypesType<{}, {}, {}, {}, {}, {}>,
              {} & {
                target?: HTMLElement | [x: number, y: number] | undefined
              } & {
                $children?:
                  | VNodeChild
                  | { $stable?: boolean | undefined }
                  | (() => VNodeChild)
                  | { default?: (() => VNodeChild) | undefined }
                'v-slots'?:
                  | { default?: false | (() => VNodeChild) | undefined }
                  | undefined
              } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
              () => JSX.Element,
              {},
              {},
              {},
              {}
            >,
            any,
            any,
            any,
            ComputedOptions,
            MethodOptions
          > &
            ComponentOptionsBase<
              {} & {
                target?: HTMLElement | [x: number, y: number] | undefined
              } & {
                $children?:
                  | VNodeChild
                  | { $stable?: boolean | undefined }
                  | (() => VNodeChild)
                  | { default?: (() => VNodeChild) | undefined }
                'v-slots'?:
                  | { default?: false | (() => VNodeChild) | undefined }
                  | undefined
              } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
              () => JSX.Element,
              unknown,
              {},
              {},
              ComponentOptionsMixin,
              ComponentOptionsMixin,
              Record<string, any>,
              string,
              {},
              {},
              string,
              SlotsType<Partial<MakeSlots<{ default: never }>>>,
              GlobalComponents,
              GlobalDirectives,
              string,
              ComponentProvideOptions
            > &
            VNodeProps &
            AllowedComponentProps &
            ComponentCustomProps & {
              filterProps: (props: T) => Partial<Pick<T, U>>
            }
        }
    closeOnBack: boolean
    contained: boolean
    noClickAnimation: boolean
    persistent: boolean
    scrim: string | boolean
    zIndex: string | number
    activatorProps: Record<string, any>
    openOnClick: boolean
    openOnHover: boolean
    openOnFocus: boolean
    closeOnContentClick: boolean
    closeDelay: string | number
    openDelay: string | number
    eager: boolean
    locationStrategy: 'static' | 'connected' | LocationStrategyFunction
    origin: Anchor | 'auto' | 'overlap'
    stickToTarget: boolean
    viewportMargin: string | number
    scrollStrategy:
      | 'close'
      | 'block'
      | 'none'
      | 'reposition'
      | ScrollStrategyFunction
    retainFocus: boolean
    captureFocus: boolean
    disableInitialFocus: boolean
    submenu: boolean
  } & {
    class: any
    height: string | number
    maxHeight: string | number
    maxWidth: string | number
    minHeight: string | number
    minWidth: string | number
    width: string | number
    theme: string
    'onUpdate:modelValue': (args: [boolean]) => any
    $children:
      | VNodeChild
      | { $stable: boolean }
      | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)
      | {
          default: (arg: { isActive: Ref<boolean, boolean> }) => VNodeChild
          activator: (arg: {
            isActive: boolean
            props: Record<string, any>
            targetRef: TemplateRef
          }) => VNodeChild
        }
    'v-slots': {
      default:
        | false
        | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)
      activator:
        | false
        | ((arg: {
            isActive: boolean
            props: Record<string, any>
            targetRef: TemplateRef
          }) => VNodeChild)
    }
    'v-slot:default':
      | false
      | ((arg: { isActive: Ref<boolean, boolean> }) => VNodeChild)
    key: PropertyKey
    ref: VNodeRef
    ref_for: boolean
    ref_key: string
    onVnodeBeforeMount: VNodeMountHook | VNodeMountHook[]
    onVnodeMounted: VNodeMountHook | VNodeMountHook[]
    onVnodeBeforeUpdate: VNodeUpdateHook | VNodeUpdateHook[]
    onVnodeUpdated: VNodeUpdateHook | VNodeUpdateHook[]
    onVnodeBeforeUnmount: VNodeMountHook | VNodeMountHook[]
    onVnodeUnmounted: VNodeMountHook | VNodeMountHook[]
    id: string
    activator: Element | (string & {}) | 'parent' | ComponentPublicInstance
    contentClass: any
    contentProps: any
    opacity: string | number
    target:
      | Element
      | (string & {})
      | 'parent'
      | 'cursor'
      | ComponentPublicInstance
      | [number, number]
    offset: string | number | number[]
    attach: string | boolean | Element
    'v-slot:activator':
      | false
      | ((arg: {
          isActive: boolean
          props: Record<string, any>
          targetRef: TemplateRef
        }) => VNodeChild)
  }
  sliderProps: {
    maxWidth: string | number
    width: string | number
    color: string
    disabled: boolean
    thumbSize: string | number
    trackColor: string
  }
}

undefined

Props passed down to the VVideoVolume component.

width
string | number

undefined

Sets the width for the component.

Events
name
type
error
[boolean | MediaError]

Emits true when the video fails to load or false when user triggered retry.

loaded
[HTMLVideoElement]

Emitted when the video has loaded and is ready to be played.

update:error
[boolean]

MISSING DESCRIPTION (edit in github)

update:playing
[boolean]

Emitted when playing state changes.

update:progress
[number]

Emitted when the internal playback progress changes.

update:volume
[number]

Emitted when the volume changes.

Slots
{ play: () => void pause: () => void skipTo: (v: number) => void volume: Ref<number, number> playing: boolean progress: number toggleMuted: () => void fullscreen: boolean toggleFullscreen: () => void labels: Record<string, string> }
{ play: () => void pause: () => void skipTo: (v: number) => void volume: Ref<number, number> playing: boolean progress: number toggleMuted: () => void fullscreen: boolean toggleFullscreen: () => void labels: Record<string, string> }
{ error: boolean | MediaError }
never
{ color: string; isActive: boolean }
{ play: () => void pause: () => void skipTo: (v: number) => void volume: Ref<number, number> playing: boolean progress: number toggleMuted: () => void fullscreen: boolean toggleFullscreen: () => void labels: Record<string, string> }
never
append

Additional content on the right within the control bar.

controls

Replaces controls bar with custom content.

error

MISSING DESCRIPTION (edit in github)

header

Slot for additional content placed on top of the video.

loader

Slot used to replace loader displayed when the video is being loaded.

prepend

Additional content on the left within the control bar.

sources

Slot for content placed within native <video> element.

Exposed
() => void
(v: number) => void
() => Promise<void>
() => void
retry

MISSING DESCRIPTION (edit in github)

skipTo

Skip to specific moment in the video playback. Accepts percent value (0-100).

toggleFullscreen

Toggle fullscreen mode.

toggleMuted

Mute/unmute audio.