概述

主题提供嵌入 自定义来源视频 的功能。

该功能由 vuepress-plugin-md-power 提供支持。

配置

该功能默认不启用。你需要在主题配置中开启。

.vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      markdownPower: {
        artPlayer: true,
      },
    }
  })
})

安装

该功能依赖于 artplayer 播放器实现，主题默认不安装该依赖，在启用 artPlayer 功能时，需要 进行手动安装

pnpm

pnpm add artplayer

yarn

yarn add artplayer

npm

npm i artplayer

artPlayer 播放器默认支持 'mp4', 'mp3', 'webm', 'ogg' 格式的视频格式。

同时还支持扩展其他格式的支持。

如果您的视频格式为 'mpd', 'dash', 还需要再手动安装 dashjs ：

pnpm

pnpm add dashjs

yarn

yarn add dashjs

npm

npm i dashjs

如果您的视频格式为 'm3u8', 'hls', 还需要再手动安装 hls.js ：

pnpm

pnpm add hls.js

yarn

yarn add hls.js

npm

npm i hls.js

如果您的视频格式为 'ts', 'flv', 还需要再手动安装 mpegts.js ：

pnpm

pnpm add mpegts.js

yarn

yarn add mpegts.js

npm

npm i mpegts.js

markdown 语法

@[artPlayer](src)

添加配置项：

@[artPlayer muted autoplay loop width="100%" height="400px" ratio="16:9"](src)

• src: 视频链接地址

配置项说明：

• width： 视频宽度
• height： 视频高度
• ratio： 视频比例，默认 16:9
• type: 视频格式，默认从视频链接的文件地址中解析获取
• autoplay： 是否自动播放
• muted: 是否静音，autoplay 时，默认为 true
• volume： 音量大小，范围为 0 - 1
• poster：视频封面图链接地址
• 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
/>

贡献者

• pengzhanbo

变更历史

最后更新于: 查看全部变更历史

• 0e22a-

  perf(theme): improve <ArtPlayer/ >

  于 2024/12/22
• bd4c3-

  feat(plugin-md-power): add artplayer support (#393)

  于 2024/12/21