组件
大约 1 分钟
提示
系统自带支持多个视频组件,但是默认不开启,需要手动开启
开启视频组件
修改配置文件//.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的文件路径
效果