Overview

The theme provides the capability to embed custom source videos.

This feature is powered by vuepress-plugin-md-power.

Configuration

This feature is disabled by default. You need to enable it in the theme configuration.

.vuepress/config.ts

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

Installation

This feature relies on the artplayer player implementation. The theme does not include this dependency by default. When enabling the artPlayer feature, manual installation is required.

pnpm

pnpm add artplayer

yarn

yarn add artplayer

npm

npm i artplayer

The artPlayer player natively supports video formats including 'mp4', 'mp3', 'webm', and 'ogg'.

It also supports extending compatibility for additional formats.

If your video format is 'mpd' or 'dash', you need to manually install dashjs:

pnpm

pnpm add dashjs

yarn

yarn add dashjs

npm

npm i dashjs

If your video format is 'm3u8' or 'hls', you need to manually install hls.js:

pnpm

pnpm add hls.js

yarn

yarn add hls.js

npm

npm i hls.js

If your video format is 'ts' or 'flv', you need to manually install mpegts.js:

pnpm

pnpm add mpegts.js

yarn

yarn add mpegts.js

npm

npm i mpegts.js

Markdown Syntax

@[artPlayer](src)

With configuration options:

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

• src: Video source URL

Parameter Description:

• width: Video width
• height: Video height
• ratio: Video aspect ratio, defaults to 16:9
• type: Video format, automatically parsed from the video URL by default
• autoplay: Whether to enable autoplay
• muted: Whether to mute, defaults to true when autoplay is enabled
• volume: Volume level, range from 0 - 1
• poster: Video poster image URL
• auto-mini: Automatically enters mini-player mode when the player scrolls out of the browser viewport

Global Component

The theme provides a global component <ArtPlayer /> to support more flexible and comprehensive usage.

Props

Field	Type	Description
src	string	Required, video source URL
type	string	Optional, video format, parsed from src by default
width	string	Optional, width, defaults to 100%
height	string	Optional, height
ratio	string	Optional, aspect ratio, defaults to 16:9

For more Props, please refer to the artPlayer documentation. The theme supports all available options.

Examples

Note

The video resources in the examples are sourced from artplayer.org.

Input:

@[artPlayer](https://artplayer.org/assets/sample/video.mp4)

Output:

Input:

<ArtPlayer
  src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
  fullscreen
/>

Output:

Explanation

The markdown syntax @[artPlayer](src) is internally converted to the <ArtPlayer /> component, which is equivalent to:

<ArtPlayer
  src="src"
  fullscreen
  flip
  playback-rate
  aspect-ratio
  setting
  pip
/>

Contributors

pengzhanbo

Changelog

10/9/25, 7:46 AM

View All Changelog

• 38505-docs: update en docs (#708)on 10/9/25