ArtPlayer 视频
概述
主题提供嵌入 自定义来源视频 的功能。
该功能由 vuepress-plugin-md-power 提供支持。
配置
该功能默认不启用。你需要在主题配置中开启。
export default defineUserConfig({
theme: plumeTheme({
markdown: {
artPlayer: true,
},
})
})安装
该功能依赖于 artplayer 播放器实现，主题默认不安装该依赖，在启用 artPlayer 功能时，需要 进行手动安装
pnpm
pnpm add artplayeryarn
yarn add artplayernpm
npm i artplayerartPlayer 播放器默认支持 'mp4', 'mp3', 'webm', 'ogg' 格式的视频格式。
同时还支持扩展其他格式的支持。
如果您的视频格式为 'mpd', 'dash', 还需要再手动安装 dashjs ：
pnpm
pnpm add dashjsyarn
yarn add dashjsnpm
npm i dashjs如果您的视频格式为 'm3u8', 'hls', 还需要再手动安装 hls.js ：
pnpm
pnpm add hls.jsyarn
yarn add hls.jsnpm
npm i hls.js如果您的视频格式为 'ts', 'flv', 还需要再手动安装 mpegts.js ：
pnpm
pnpm add mpegts.jsyarn
yarn add mpegts.jsnpm
npm i mpegts.jsmarkdown 语法
@[artPlayer](src)添加配置项：
@[artPlayer muted autoplay loop width="100%" height="400px" ratio="16:9"](src)src: 视频链接地址
配置项说明：
width： 视频宽度height： 视频高度ratio： 视频比例，默认16:9type: 视频格式，默认从视频链接的文件地址中解析获取autoplay： 是否自动播放muted: 是否静音，autoplay 时，默认为truevolume： 音量大小，范围为0 - 1poster：视频封面图链接地址auto-mini: 当播放器滚动到浏览器视口以外时，自动进入迷你播放模式
全局组件
主题提供了全局组件 <ArtPlayer /> 以支持更灵活丰富的使用方式。
Props
| 字段 | 类型 | 描述 |
|---|---|---|
| src | string | 必填，视频播放地址 |
| type | string | 选填，视频格式，默认从 src 中截取 |
| width | string | 选填， 宽度， 默认 100% |
| height | string | 选填，高度 |
| ratio | string | 选填，宽高比，默认 16:9 |
更多 Props 请参考 artPlayer 文档 主题支持所有选项。
示例
说明
示例中的视频资源来自 artplayer.org 。
输入：
@[artPlayer](https://artplayer.org/assets/sample/video.mp4)输出：
输入：
<ArtPlayer
src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
fullscreen
/>输出：
说明
markdown 语法 @[artPlayer](src) 在主题内部转换为了 <ArtPlayer /> 组件，它等价于
<ArtPlayer
src="src"
fullscreen
flip
playback-rate
aspect-ratio
setting
pip
/>