VideoPlayer

大约 1 分钟

已废弃

为了更好的体验，我们建议你使用 VidStack。

在 Markdown 文件中嵌入视频。

使用本组件前，请先在你的项目中安装 vidstack@next 包:

pnpm

pnpm add -D vidstack@next

yarn

yarn add -D vidstack@next

npm

npm i -D vidstack@next

示例

<VideoPlayer src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" />

<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',
        }
      ],
    },
  }
  "
/>

属性

src

类型: PlayerSrc

type PlayerSrc = MediaSrc | MediaSrc[];
type MediaSrc =
  | string
  | AudioSrc
  | VideoSrc
  | HLSSrc
  | DASHSrc
  | YouTubeSrc
  | VimeoSrc;

必填: 是

视频源链接。

不支持相对路径。当填写路径名时，base 将自动添加到路径名的开头。

tracks

类型: TextTrackInit[]
必填: 否

视频/音频字幕和章节。

title

类型: string
必填: 否

音频/视频标题

poster

类型: string
必填: 否

视频封面 (不适用于音频)

thumbnails

类型: string
必填: 否

视频缩略图 (不适用于音频)

player

类型: Omit<VidstackPlayerConfig, "target" | "src" | "sources" | "tracks">
必填: 否

VidStack 播放器选项

layout

类型: Partial<DefaultLayoutProps>
必填: 否

VidStack 布局选项