VideoPlayer
About 1 min
Embed videos in Markdown files.
Install plyr
package in your project first to use this component:
pnpm
pnpm add -D plyr
yarn
yarn add -D plyr
npm
npm i -D plyr
Tips
We recommend you to use VidStack for better experience.
Demo
A video player
<VideoPlayer src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" />
A video player with poster, multiple sources, tracks, thumbnails and markers
<VideoPlayer
:src="[
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
type: 'video/mp4',
size: 576,
},
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
type: 'video/mp4',
size: 720,
},
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
type: 'video/mp4',
size: 1080,
},
]"
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
:tracks="[
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
label: 'English',
language: 'en',
kind: 'subtitles',
default: true,
},
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
label: 'French',
language: 'fr',
kind: 'subtitles',
},
]"
crossorigin
:options="{
title: 'View From A Blue Moon',
iconUrl: 'https://cdn.plyr.io/3.7.8/demo.svg',
keyboard: {
global: true,
},
tooltips: {
controls: true,
},
captions: {
active: true,
},
previewThumbnails: {
enabled: true,
src: [
'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'
],
},
vimeo: {
referrerPolicy: 'no-referrer',
},
mediaMetadata: {
title: 'View From A Blue Moon',
album: 'Sports',
artist: 'Brainfarm',
artwork: [
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
type: 'image/jpeg',
},
],
},
markers: {
enabled: true,
points: [
{
time: 10,
label: 'first marker',
},
{
time: 40,
label: 'second marker',
},
{
time: 120,
label: '<strong>third</strong> marker',
}
],
},
}
"
/>
Props
src
- Type:
string
- Required: Yes
Video source link
width
- Type:
string | number
- Default:
100%
Video component width.
type
- Type:
string
- Required: No
Video type.
Note
If your server cannot return a correct mime type for your video files, you should specify it. (e.g.: video/mp4
)
poster
- Type:
string
- Required: No
Video poster
title
- Type:
string
- Required: No
Video title
tracks
Type:
UseMediaTextTrackSource[]
interface UseMediaTextTrackSource { /** * Indicates that the track should be enabled unless the user's preferences indicate * that another track is more appropriate */ default?: boolean; /** * How the text track is meant to be used. If omitted the default kind is subtitles. */ kind: TextTrackKind; /** * A user-readable title of the text track which is used by the browser * when listing available text tracks. */ label: string; /** * Address of the track (.vtt file). Must be a valid URL. This attribute * must be specified and its URL value must have the same origin as the document */ src: string; /** * Language of the track text data. It must be a valid BCP 47 language tag. * If the kind attribute is set to subtitles, then srcLang must be defined. */ srcLang: string; }
Required: No
Tracks for video.