ArtPlayer 播放器 - 二甲基

461 字

2 分钟

页面浏览--访问次数--

ArtPlayer 播放器

2026-10-15GuidesMarkdown资源嵌入播放器

ArtPlayer 播放器组件用于播放自托管的本地视频文件或第三方直链媒体资源（支持 MP4、WebM 与 HLS 流媒体）。

语法格式#

使用 ::artplayer 指令并配置参数：

1
::artplayer{src="/videos/demo.mp4" title="本地示例视频" poster="/assets/poster.webp" preload="auto"}

渲染效果（下例使用公开的 CC0 测试视频）：

ArtPlayer 演示视频https://mdn.github.io/shared-assets/videos/flower.mp4

属性参数列表#

属性名	类型	是否必填	默认值	说明
`src`	`string`	必填	无	视频直链地址或相对 `/public` 的本地路径
`title`	`string`	必填	无	视频标题
`poster`	`string`	可选	无	未播放时的封面海报图片路径
`preload`	`string`	可选	`"none"`	预加载策略：`"none"`（默认）或 `"auto"`（视口临近预加载）

播放自托管视频#

把视频文件放进内容仓库的 public/videos/ 目录，再用绝对路径引用：

1
::artplayer{src="/videos/demo.mp4" title="本地示例视频" poster="/assets/poster.webp"}

::: file-tree{title=“推荐的目录结构”}

public/
- videos/
  - demo.mp4
- assets/
  - poster.webp :::

路径写法	指向
`/videos/demo.mp4`	内容仓库 `public/videos/demo.mp4`
`https://example.com/stream.m3u8`	外部 HLS 流

核心能力#

现代播放器体验：提供精美的播放控制栏、音量调节、倍速播放、全屏与画中画模式。
动态按需加载：只有在文章中使用了 ArtPlayer 时才会异步引入播放器依赖包。
HLS 支持：直接传入 .m3u8 地址即可播放流媒体，无需额外配置。

与视频平台嵌入的分工#

需求	推荐指令
自托管 MP4 / WebM	`::artplayer`
HLS 直播或点播流	`::artplayer`
B 站 / YouTube / A 站稿件	对应的平台指令

平台指令负责 Facade 占位与第三方脚本的延迟加载；当你手上有视频文件本身时，ArtPlayer 是更直接的选择。

Markdown 语法

已完结

第 29 篇，共 30 篇本文属于系列

ArtPlayer 播放器

https://www.ariels.xyz/posts/media-artplayer/

作者

Ariel

发布于

2026-10-15

许可协议

CC BY-NC-ND 4.0

继续阅读

换条路线

从其他文章中稳定抽取

评论

正在加载评论...