BlogPlaygroundOne

VVideoControls API

ads via vuetify

Props
name
type
default
background-color
string

undefined

Container background color.

color
string

undefined

General color applied to icons and sliders.

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.

elevation
string | number

undefined

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

floating
boolean

false

Introduces visual spacing from the video boundaries.

fullscreen
boolean

false

Applies correct icon on the default fullscreen button.

hide-fullscreen
boolean

false

Hides default fullscreen button.

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.

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)

split-time
boolean

false

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

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.

variant
'default' | 'hidden' | 'tube' | 'mini'

'default'

Applies a distinct style to the component.

volume
string | number

undefined

Volume value passed to the underlying control and slots.

volume-props
{
  menuProps: {
    style: StyleValue
    disabled: boolean
    eager: boolean
    submenu: boolean
    closeOnBack: boolean
    contained: boolean
    noClickAnimation: boolean
    modelValue: 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
    locationStrategy: 'static' | 'connected' | LocationStrategyFunction
    location: Anchor
    origin: Anchor | 'auto' | 'overlap'
    stickToTarget: boolean
    viewportMargin: string | number
    scrollStrategy:
      | 'close'
      | 'none'
      | 'block'
      | 'reposition'
      | ScrollStrategyFunction
    retainFocus: boolean
    captureFocus: boolean
    disableInitialFocus: 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>>
            }
        }
  } & {
    class: 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[]
    height: string | number
    width: string | number
    id: string
    theme: string
    maxHeight: string | number
    maxWidth: string | number
    minHeight: string | number
    minWidth: string | number
    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
    'onUpdate:modelValue': (args: [boolean]) => any
    'v-slot:activator':
      | false
      | ((arg: {
          isActive: boolean
          props: Record<string, any>
          targetRef: TemplateRef
        }) => VNodeChild)
  }
  direction: 'horizontal' | 'vertical'
  inline: boolean
  sliderProps: {
    disabled: boolean
    width: string | number
    maxWidth: string | number
    color: string
    thumbSize: string | number
    trackColor: string
  }
}

undefined

Props passed down to the VVideoVolume component.

Events
name
type
click:fullscreen
[]

Emitted when the fullscreen button is clicked.

skip
[number]

Emitted when a skip action is triggered.

update:playing
[boolean]

Emitted when the playing state changes.

update:progress
[number]

Emitted when the playback progress changes.

update:volume
[number]

Emitted when the volume value 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> }
{ 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> }
append

Adds an item inside the input and after input content.

default

The default Vue slot.

prepend

Adds an item outside the input and before input content.

Exposed
() => void
toggleMuted

Toggles the muted state of the video.