vitepress-plugin-video

vitepress-plugin-video

Embed videos from multiple platforms (Bilibili, YouTube, AcFun, and self-hosted) in your VitePress site.

在 VitePress 中嵌入来自多个平台（Bilibili、YouTube、AcFun 和自托管）的视频。

Usage

With Vitepress-tuck

Installation:

# npm
npm install -D vitepress-tuck vitepress-plugin-video
# pnpm
pnpm add -D vitepress-tuck vitepress-plugin-video
# yarn
yarn add -D vitepress-tuck vitepress-plugin-video

Configuration:

// .vitepress/config.ts
import video from 'vitepress-plugin-video'
import { defineConfig } from 'vitepress-tuck'

export default defineConfig({
  plugins: [video()],
})

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import enhanceApp from 'virtual:enhance-app'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceApp(ctx)
  },
} satisfies Theme

With Vitepress

Installation:

# npm
npm install -D vitepress-plugin-video
# pnpm
pnpm add -D vitepress-plugin-video
# yarn
yarn add -D vitepress-plugin-video

Configuration:

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { videoMarkdownPlugin } from 'vitepress-plugin-video'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(videoMarkdownPlugin)
    },
  },
})

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import { enhanceAppWithVideo } from 'vitepress-plugin-video/client'
import DefaultTheme from 'vitepress/theme'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    enhanceAppWithVideo(ctx)
  },
} satisfies Theme

Syntax

Bilibili

@[bilibili](bvid)
@[bilibili](aid cid)
@[bilibili p2 autoplay time=30](bvid)

Option	Type	Description
p{number}	-	Page number
autoplay	boolean	Auto play
time	number | string	Start time in seconds or HH:MM:SS

YouTube

@[youtube](video_id)
@[youtube autoplay loop start=10 end=120](video_id)

Option	Type	Description
autoplay	boolean	Auto play
loop	boolean	Loop playback
start	number	Start time in seconds
end	number	End time in seconds

AcFun

@[acfun](acid)

ArtPlayer (Self-hosted)

@[artPlayer](/videos/demo.mp4)
@[artPlayer muted autoplay poster="/cover.jpg" width="800px"](/videos/demo.mp4)

Option	Type	Default	Description
autoplay	boolean	false	Auto play
muted	boolean	false	Muted
loop	boolean	false	Loop playback
volume	number	0.75	Volume level
poster	string	-	Poster image URL
autoMini	boolean	false	Auto mini mode
width	string	"100%"	Player width
height	string	-	Player height
ratio	string	-	Aspect ratio (e.g. "16:9")

Supports mp4, mp3, webm, ogg, mkv, mov formats out of the box.

For streaming formats, install optional dependencies:

pnpm add dashjs     # for .mpd / .dash
pnpm add hls.js     # for .m3u8 / .hls
pnpm add mpegts.js  # for .flv / .ts

Disable Platforms

video({
  bilibili: true,
  youtube: true,
  acfun: false,
  artplayer: true,
})