Video

视频嵌入插件，支持 Bilibili、YouTube、AcFun 和 ArtPlayer。

安装

pnpm

pnpm add vitepress-plugin-video

npm

npm install vitepress-plugin-video

bun

bun add vitepress-plugin-video

deno

deno add vitepress-plugin-video

yarn

yarn add vitepress-plugin-video

使用

vitepress-tuck 模式 推荐

.vitepress/config.ts

import { defineConfig } from 'vitepress-tuck'
import video from 'vitepress-plugin-video'

export default defineConfig({
  plugins: [
    video({
      // 可选项，全部默认为 true
      artplayer: true,
      youtube: true,
      bilibili: true,
      acfun: true,
    }),
  ],
})

查看 vitepress-tuck 了解更多

传统模式

.vitepress/config.ts

import { defineConfig } from 'vitepress'
import { videoMarkdownPlugin } from 'vitepress-plugin-video'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(videoMarkdownPlugin, {
        artplayer: true,
        youtube: true,
        bilibili: true,
        acfun: true,
      })
    },
  },
})

.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

语法

Bilibili

嵌入 Bilibili 视频

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

配置项	类型	描述
p{number}	-	视频分 P 号
autoplay	boolean	自动播放
time	number | string	开始时间，秒数或 HH:MM:SS 格式

YouTube

嵌入 YouTube 视频

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

配置项	类型	描述
autoplay	boolean	自动播放
loop	boolean	循环播放
start	number	开始时间，秒数
end	number	结束时间，秒数

AcFun

嵌入 AcFun 视频

@[acfun](ac_id)

ArtPlayer

使用 ArtPlayer 播放器嵌入本地或远程视频：

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

配置项	类型	默认值	描述
autoplay	boolean	false	自动播放
muted	boolean	false	静音
loop	boolean	false	循环播放
volume	number	0.75	音量等级
poster	string	-	封面图片 URL
autoMini	boolean	false	自 mini模式
width	string	"100%"	播放器宽度
height	string	-	播放器高度
ratio	string	-	比例，例如 "16:9"

支持 mp4, mp3, webm, ogg, mkv, mov 格式。

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

pnpm

pnpm add dashjs

npm

npm i dashjs

bun

bun add dashjs

deno

deno add dashjs

yarn

yarn add dashjs

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

pnpm

pnpm add hls.js

npm

npm i hls.js

bun

bun add hls.js

deno

deno add hls.js

yarn

yarn add hls.js

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

pnpm

pnpm add mpegts.js

npm

npm i mpegts.js

bun

bun add mpegts.js

deno

deno add mpegts.js

yarn

yarn add mpegts.js

配置

interface VideoPluginOptions {
  /**
   * 启用 ArtPlayer 播放器
   * @default true
   */
  artplayer?: boolean

  /**
   * 启用 YouTube 视频嵌入
   * @default true
   */
  youtube?: boolean

  /**
   * 启用 Bilibili 视频嵌入
   * @default true
   */
  bilibili?: boolean

  /**
   * 启用 AcFun 视频嵌入
   * @default true
   */
  acfun?: boolean
}

示例

Bilibili

@[bilibili](BV1EZ42187Hg)

YouTube

@[youtube](0JJPfz5dg20)

AcFun

@[acfun](ac47431669)

ArtPlayer

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