ArtPlayer 视频
概述
主题提供嵌入自定义来源视频的功能。
该功能由 vuepress-plugin-md-power 提供支持。
安装
该功能依赖于 artplayer 播放器实现，主题默认不安装该依赖，在启用 artPlayer 功能时，需要 进行手动安装
npm
npm i artplayerpnpm
pnpm add artplayeryarn
yarn add artplayerartPlayer 播放器默认支持 'mp4', 'mp3', 'webm', 'ogg' 格式的视频格式。
同时还支持扩展其他格式的支持。
如果您的视频格式为 'mpd', 'dash', 还需要再手动安装 dashjs ：
npm
npm i dashjspnpm
pnpm add dashjsyarn
yarn add dashjs如果您的视频格式为 'm3u8', 'hls', 还需要再手动安装 hls.js ：
npm
npm i hls.jspnpm
pnpm add hls.jsyarn
yarn add hls.js如果您的视频格式为 'ts', 'flv', 还需要再手动安装 mpegts.js ：
npm
npm i mpegts.jspnpm
pnpm add mpegts.jsyarn
yarn add mpegts.js配置
该功能默认不启用。你需要在主题配置中开启。
import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
export default defineUserConfig({
theme: plumeTheme({
markdown: {
artPlayer: true,
},
}),
})markdown 语法
@[artPlayer](src)添加配置项：
@[artPlayer muted autoplay loop width="100%" height="400px" ratio="16:9"](src)配置项说明：
src：string，视频链接地址width：string，视频宽度，默认100%height：string，视频高度，默认自动ratio：string，视频比例，默认16:9type：string，视频格式，默认从视频链接的文件地址中解析获取autoplay：boolean，是否自动播放，默认falsemuted：boolean，是否静音，默认跟随autoplay（autoplay开启时为true）volume：number，音量大小，范围为0 - 1，默认0.75poster：string，视频封面图链接地址auto-mini：boolean，当播放器滚动到浏览器视口以外时，自动进入迷你播放模式，默认false
全局组件
主题提供了全局组件 <ArtPlayer /> 以支持更灵活丰富的使用方式。
Props
视频播放地址
视频格式。未设置时从 src 的扩展名推断
宽度
高度。未指定时按自动高度处理
宽高比
更多 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
/>