播放 HLS、DASH、FLV 等格式需自行额外引入 hls.js、dash.js、flv.js 等库;弹幕、画质控制等能力需单独安装对应插件;用 UMD 或 CDN 方式引入时全局变量为 window.Artplayer

ArtPlayer
zhw2590582MIT活跃维护功能齐全的现代 HTML5 视频播放器,支持弹幕、字幕、多清晰度切换、缩略图预览、截图和自定义图层,适合在网页中快速搭建播放体验。
:art: ArtPlayer.js is a modern and full featured HTML5 video player
npm install artplayerREADME 未说明,这是浏览器端 HTML5 播放器,无显存或 GPU 要求
一个现代且功能齐全的 HTML5 视频播放器,控件可定制,方便接入业务逻辑
功能齐全的现代 HTML5 视频播放器,支持弹幕、字幕、多清晰度切换、缩略图预览、截图和自定义图层,适合在网页中快速搭建播放体验。
核心能力
- 控件功能支持自定义,便于对接业务逻辑
- 直接支持 .vtt、.ass、.srt 字幕格式
- 可简单集成 flv.js、hls.js、dash.js 等依赖
- 代码高度解耦,结构清晰,便于排错和扩展
- 提供弹幕、画质控制、缩略图等官方插件
容易踩的坑
- 5.4.0最新正式版2026-03-13 · 2026-03-13 03:24 UTC
[5.4.0] - 2026-03-12
- Refactor
ParceltoVite - Change
Artplayer.FULLSCREEN_WEB_IN_BODYdefaults totrue - The
resetmethod is used to reset video request - Fix #1014
- Fix #1023
- Fix #1028
- Add
artplayer-plugin-jassubplugin - Add
artplayer-proxy-mediabunnyplugin - Add
artplayer-plugin-audio-trackplugin - Add
artplayer-plugin-asrplugin - Add
artplayer-plugin-danmuku-maskplugin - Deprecate
artplayer-plugin-libassplugin - Prevent
Hint.cssfrom polluting global styles
- Refactor
- 5.3.02025-09-06 · 2025-09-06 11:02 UTC
查看更新说明
- Rename
.esm.jsto.mjs - Remove the default
fillcolor value ofsvg - Optimize the
autoOrientationlogic - Add
Artplayer.REMOVE_SRC_WHEN_DESTROY - Add
artplayer-plugin-document-pipplugin - Add
art.events.bindGlobalEventsmethod for rebinding global methods - Optimize
artplayer.d.ts, now you can directly importOption
import type { Option } from 'artplayer' const option: Option = { container: '.artplayer-app', url: './assets/sample/video.mp4', }- Simplify
i18nimport
import fr from 'artplayer/i18n/fr' import id from 'artplayer/i18n/id' const option = { container: '.artplayer-app', url: './assets/sample/video.mp4', i18n: { id, fr }, lang: 'fr', } - Rename
- 5.2.52025-08-10 · 2025-08-10 14:37 UTC
查看更新说明
- 为所有包添加 ESM 版本如 artplayer/dist/artplayer.esm.js
- 识别 globalThis.CUSTOM_USER_AGENT 全局变量,用于自定义 navigator.userAgent
- 修复 artplayer-plugin-danmuku 初始化时 mount 参数缺失的错误
- 5.2.22025-01-19 · 2025-01-19 09:35 UTC
查看更新说明
[5.2.2] - 2025-01-19
- 修复缩略图跨越问题
- 修复当网页没有head时引起的样式加载失败问题
- 新增字幕插件的设置面板的滑块支持移动端拖动
- 修复设置面板在旋屏时的定位错误
- 修复全屏状态变化时类名切换错误问题
- 5.2.12024-10-26 · 2024-10-26 08:01 UTC
查看更新说明
- 重构
Setting组件,修复状态丢失的问题 - 类型是
range的Setting,现在回调函数返回的range是数字的数组,不再是单一数字 - 删除
isStringOrNumber工具函数 - 修复
artplayer-plugin-hls-control状态不统一的问题 - 废弃
artplayer-plugin-dash-quality插件 - 新增
artplayer-plugin-dash-control插件 - 使用
code替代已废弃的keyCode监听键盘事件 - 新增
keydown事件,监听来自document的keydown事件 - 新增
option.proxy选项,用于代理第三方的video和canvas - 新增
artplayer-proxy-canvas代理,可以使用canvas播放视频 - 新增
artplayer-proxy-webav代理,来自 bilibili/WebAV - 新增
option.thumbnails.scale, 用于预览图缩放 - 修复
art.url更改不能触发autoPlayBack的bug: #797 - 新增
art.subtitle.cues属性, 获取整体的字幕列表 - 新增
art.subtitle.activeCues属性, 获取活跃的字幕列表 - 新增
subtitleBeforeUpdate事件, 在字幕元素渲染前触发 - 修改
subtitleUpdate事件为subtitleAfterUpdate, 在字幕元素渲染后触发 - 优化
subtitleLoad事件的触发时机和回调参数 - 删除
subtitleSwitch事件,请使用subtitleLoad代替 - 升级
artplayer-plugin-hls-quality为artplayer-plugin-hls-control - 新增
artplayer-plugin-ambilight插件 - 修复
thumbnails显示 bug
- 重构
用户点评
登录用户的真实使用记录,可按版本和硬件筛选还没有人点评。第一个说出真实体验的人最有价值。
Home Page
Mobile Demo
Features
ArtPlayer.js is an easy-to-use and feature-rich HTML5 video player, and most of the player's functional controls support customization, which makes it easy to connect with your business logic. In addition, it directly supports .vtt, .ass and .srt subtitle formats. Integration with other dependencies such as flv.js, hls.js, dash.js, etc. is also very simple. The code is highly decoupled, the structure and logic are clear, and it is easy to track errors and add new features.
Install
Install with npm:
$ npm install artplayer
Or install with yarn:
$ yarn add artplayer
Or install with pnpm:
$ pnpm add artplayer
Or install with bun:
$ bun add artplayer
import Artplayer from 'artplayer'
Or umd build also available:
<script src="path/to/artplayer.js"></script>
Or from CDN:
<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
<!-- unpkg -->
<script src="https://unpkg.com/artplayer/dist/artplayer.js"></script>
Will expose the global variable to window.Artplayer.
Usage
<div class="artplayer-app"></div>
let art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
})
Plugins
| Name | Describe | State |
|---|---|---|
| artplayer-plugin-danmuku | Danmuku (bullet comment) system | |
| artplayer-plugin-hls-control | HLS quality control | |
| artplayer-plugin-dash-control | DASH quality control | |
| artplayer-plugin-vtt-thumbnail | VTT thumbnail preview | |
| artplayer-plugin-multiple-subtitles | Multiple subtitles support | |
| artplayer-plugin-chromecast | Google Chromecast support | |
| artplayer-plugin-vast | VAST/VPAID advertising | |
| artplayer-plugin-chapter | Video chapters support | |
| artplayer-plugin-auto-thumbnail | Auto-generated thumbnails | |
| artplayer-plugin-ambilight | Ambilight effect | |
| artplayer-plugin-document-pip | Document Picture-in-Picture | |
| artplayer-plugin-audio-track | Independent audio track playback | |
| artplayer-plugin-jassub | ASS/SSA subtitle support | |
| artplayer-plugin-danmuku-mask | Danmuku masking (smart blocking) | |
| artplayer-plugin-asr | Automatic Speech Recognition | |
| artplayer-plugin-ads | Video advertising plugin | WIP |
Libraries
| Name | Describe | State |
|---|---|---|
| hls.js | HLS client | |
| dash.js | MPEG DASH player | |
| flv.js | HTML5 FLV Player | |
| mpegts.js | MPEG-TS/FLV Player | |
| webtorrent.js | Streaming torrent client |
Proxys
| Name | Describe | State |
|---|---|---|
| Canvas | Proxy video to canvas | |
| Mediabunny | Mediabunny proxy |
Changelog
Contributing
Donations
We accept donations through these channels:

QQ Group

License
MIT © Harvey Zhao