Overview

The theme provides the capability to embed custom source videos.

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

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.

npm

npm i artplayer

pnpm

pnpm add artplayer

yarn

yarn add 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:

npm

npm i dashjs

pnpm

pnpm add dashjs

yarn

yarn add dashjs

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

npm

npm i hls.js

pnpm

pnpm add hls.js

yarn

yarn add hls.js

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

npm

npm i mpegts.js

pnpm

pnpm add mpegts.js

yarn

yarn add mpegts.js

Configuration

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

.vuepress/config.ts

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'

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

Markdown Syntax

@[artPlayer](src)

With configuration options:

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

Parameter Description:

• src: string, video source URL
• width: string, video width, defaults to 100%
• height: string, video height, auto by default
• ratio: string, video aspect ratio, defaults to 16:9
• type: string, video format, parsed from the video URL by default
• autoplay: boolean, whether to enable autoplay, defaults to false
• muted: boolean, whether to mute, defaults to follow autoplay (true when autoplay is enabled)
• volume: number, volume level, range from 0 - 1, defaults to 0.75
• poster: string, video poster image URL
• auto-mini: boolean, automatically enters mini-player mode when the player scrolls out of the browser viewport, defaults to false

Global Component

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

Props

Name:src

Required

Type:string

Video source URL

Name:type

Optional

Type:string

Video format. Inferred from the extension of src when not set

Name:width

Optional

Type:string

Default:100%

Width

Name:height

Optional

Type:string

Height. Treated as auto when not specified

Name:ratio

Optional

Type:string

Default:16:9

Aspect ratio

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/13/26, 3:56 PM

View All Changelog

• e4dae-docs: improve docs (#1071)on 10/13/26
• 1d04d-feat: add builtin auto-import-components (#932)on 9/9/26
• 38505-docs: update en docs (#708)on 10/9/25

Edit this page

Previous pageYouTube Video

Next pageAudio Reader