vuepress-theme-plume/docs/notes/theme/guide/embed/artplayer.md

title, icon, createTime, permalink

title	icon	createTime	permalink
ArtPlayer 视频	icon-park-outline:video	2024/12/21 16:13:54	/guide/embed/video/artplayer/

概述

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

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

配置

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

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      artPlayer: true, // [!code ++]
    },
  })
})

安装

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

::: npm-to

npm i artplayer

:::

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

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

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

::: npm-to

npm i dashjs

:::

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

::: npm-to

npm i hls.js

:::

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

::: npm-to

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 文档 主题支持所有选项。

示例

::: tip 说明 示例中的视频资源来自 artplayer.org 。 :::

输入：

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

输出：

@artPlayer

输入：

<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
/>