组件

提示

系统自带支持多个视频组件，但是默认不开启，需要手动开启

开启视频组件

修改配置文件
//.vuepress/theme.ts 在theme.ts中增加配置

    // vuepress-plugin-components 插件配置
    components: {
      components: [
        "ArtPlayer",
        "AudioPlayer",
        "Badge",
        "BiliBili",
        "CodePen",
        "PDF",
        "Replit",
        "Share",
        "SiteInfo",
        "StackBlitz",
        "VideoPlayer",
        "XiGua",
        "YouTube",
      ],
    },

提示

详细的配置修改位置，在主题篇有完整的案例

---

使用案例

视频播放器 ArtPlayer

一个视频播放器:

代码

<ArtPlayer src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />

效果：

---

一个包含了封面的播放器

代码

<ArtPlayer
  src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
  poster="/assets/poster.svg"
/>

效果

---

一个包含自定义设置的播放器

代码

<ArtPlayer
  src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
  airplay
  aspect-ratio
  auto-size
  auto-orientation
  auto-playback
  fast-forward
  flip
  fullscreen-web
  lock
  loop
  is-live
  muted
  mini-progress-bar
  pip
  screenshot
  subtitle-offset
/>

效果

音频播放器 AudioPlayer

一个音频播放器

代码

<AudioPlayer src="/assets/assets/sample.mp3" />

效果

一个拥有标题和封面的音频播放器

代码

<AudioPlayer
  src="/assets/assets/sample.mp3"
  title="A Sample Audio"
  poster="/logo.svg"
/>

效果

文本自定义颜色

支持自定义颜色

代码

- <Badge text="tip" type="tip" vertical="middle" />
- <Badge text="warning" type="warning" vertical="middle" />
- <Badge text="danger" type="danger" vertical="middle" />
- <Badge text="info" type="info" vertical="middle" />
- <Badge text="note" type="note" vertical="middle" />

效果

• tip
• warning
• danger
• info
• note

---

PDF阅读器

默认 PDF 阅读器

代码

<PDF url="/assets/test.pdf" />

• /assets/sample.pdf 为pdf的文件路径

效果