Video
The v-video component is useful for background video or as a customizable player for self-hosted content.
Installation
Labs components require manual import and registration with the Vuetify instance.
import { VVideo } from 'vuetify/labs/VVideo'
export default createVuetify({
components: {
VVideo,
},
})
Usage
A basic example of the video component.
<v-video
aspect-ratio="16/9"
image="https://cdn.jsek.work/cdn/vt-sunflowers.jpg"
src="https://cdn.jsek.work/cdn/vt-sunflowers.mp4"
/>API
| Component | Description |
|---|---|
| v-video | Primary Component |
| v-video-controls | Sub-component used to display a video player controls |
| v-video-volume | Sub-component used to display a volume control |
This component is only useful if you self-host videos or when you can reliably obtain direct media file URL and it is permitted by the host terms of service to use custom players.
Guide
The v-video component lets you display videos with controls that nicely fit into your app design. It comes equiped with common keyboard shortcuts, and three predefined control variants.
All attributes that are not explicitly defined in the component API (autoplay, muted, loop, etc.) are passed to the underlying native HTML video element.
Props
The v-video component has several props that allow you to customize its appearance and behavior.
Image
You can display a cover image before the video is loaded.
Start at
Video can automatically skip to certain timestamp upon load. It can be useful to let the users continue where they stopped last time.
Color
You can control the icon color and background color of the controls.
Density
Three density modes provide basic control over control bar height and the icon sizes.
Rounded
Border radius for the video and controls can be controled separately if you pass an array to the rounded prop.
Slots
The v-video component has several slots that allow you to customize the appearance and behavior of its items.
Error
The error prop can be used to manually force the error state. This might be useful if an operation fails and you did not obtain the source URL or Blob yet. By default error state shows only an icon, but you can add more details simply using the error slot and trigger retry using the exposed retry method.
Header
Optional header slot make it possible to put additional content on top of the video.
Append and prepend
v-video has append and prepend slots. You can place custom controls in them.
Controls
Whenever provided customizability is not enough, the controls slot lets you drop all the built-in controls and easily define your own set of actions.
Examples
The following are a collection of examples that demonstrate more advanced and real world use of the v-video component.
Video card
Props like floating, detached and split-time can help you seamlesly integrate the video within card layout.
YouTube clone
Easily recreate the most familiar interface to let your users focus on the content.
Minimalistic players
You can override bottom panel to have achieve minimalistic design.