packages/docs/src/pages/en/components/videos.md
The v-video component is useful for background video or as a customizable player for self-hosted content.
Labs components require manual import and registration with the Vuetify instance.
import { VVideo } from 'vuetify/labs/VVideo'
export default createVuetify({
components: {
VVideo,
},
})
A basic example of the video component.
<ExamplesUsage name="v-video" /> <PromotedEntry />| 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 |
::: warning
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.
:::
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.
The v-video component has several props that allow you to customize its appearance and behavior.
You can display a cover image before the video is loaded.
<ExamplesExample file="v-video/prop-image" />Video can automatically skip to certain timestamp upon load. It can be useful to let the users continue where they stopped last time.
<ExamplesExample file="v-video/prop-start-at" />You can control the icon color and background color of the controls.
<ExamplesExample file="v-video/prop-color" />Three density modes provide basic control over control bar height and the icon sizes.
<ExamplesExample file="v-video/prop-density" />Border radius for the video and controls can be controled separately if you pass an array to the rounded prop.
The v-video component has several slots that allow you to customize the appearance and behavior of its items.
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.
Optional header slot make it possible to put additional content on top of the video.
<ExamplesExample file="v-video/slot-header" />v-video has append and prepend slots. You can place custom controls in them.
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.
The following are a collection of examples that demonstrate more advanced and real world use of the v-video component.
Props like floating, detached and split-time can help you seamlesly integrate the video within card layout.
Easily recreate the most familiar interface to let your users focus on the content.
<ExamplesExample file="v-video/misc-tube" />You can override bottom panel to have achieve minimalistic design.
<ExamplesExample file="v-video/misc-mini" /> <!-- ### Progress tracker Tap into exposed `video` element to achieve more control and precisely track the progress. <ExamplesExample file="v-video/misc-progress-tracker" /> -->