ArtPlayer

zhw2590582MIT活跃维护

功能齐全的现代 HTML5 视频播放器,支持弹幕、字幕、多清晰度切换、缩略图预览、截图和自定义图层,适合在网页中快速搭建播放体验。

:art: ArtPlayer.js is a modern and full featured HTML5 video player

5.4.0发布于 2026-03-13 03:24 UTC4,160star +1 / 7 天390fork同步于 2026-11-10 23:39 UTC

怎么上手

由 README 提炼,执行前请确认
npm install artplayer
硬件要求按 README 说明

README 未说明,这是浏览器端 HTML5 播放器,无显存或 GPU 要求

下载:源码 zip·GitHub Releases(安装包)本站不镜像安装包

项目说明

由 README 自动翻译提炼

一个现代且功能齐全的 HTML5 视频播放器,控件可定制,方便接入业务逻辑

功能齐全的现代 HTML5 视频播放器,支持弹幕、字幕、多清晰度切换、缩略图预览、截图和自定义图层,适合在网页中快速搭建播放体验。

核心能力

  • 控件功能支持自定义,便于对接业务逻辑
  • 直接支持 .vtt、.ass、.srt 字幕格式
  • 可简单集成 flv.js、hls.js、dash.js 等依赖
  • 代码高度解耦,结构清晰,便于排错和扩展
  • 提供弹幕、画质控制、缩略图等官方插件

容易踩的坑

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

内容由模型根据 README 生成,可能不完整或不准确,以官方文档为准。看原文 README

最近发版

5 个版本5.4.0
  1. 5.4.0最新正式版2026-03-13 · 2026-03-13 03:24 UTC

    [5.4.0] - 2026-03-12

    • Refactor Parcel to Vite
    • Change Artplayer.FULLSCREEN_WEB_IN_BODY defaults to true
    • The reset method is used to reset video request
    • Fix #1014
    • Fix #1023
    • Fix #1028
    • Add artplayer-plugin-jassub plugin
    • Add artplayer-proxy-mediabunny plugin
    • Add artplayer-plugin-audio-track plugin
    • Add artplayer-plugin-asr plugin
    • Add artplayer-plugin-danmuku-mask plugin
    • Deprecate artplayer-plugin-libass plugin
    • Prevent Hint.css from polluting global styles
  2. 5.3.02025-09-06 · 2025-09-06 11:02 UTC
    查看更新说明
    • Rename .esm.js to .mjs
    • Remove the default fill color value of svg
    • Optimize the autoOrientation logic
    • Add Artplayer.REMOVE_SRC_WHEN_DESTROY
    • Add artplayer-plugin-document-pip plugin
    • Add art.events.bindGlobalEvents method for rebinding global methods
    • Optimize artplayer.d.ts, now you can directly import Option
    import type { Option } from 'artplayer'
    
    const option: Option = {
      container: '.artplayer-app',
      url: './assets/sample/video.mp4',
    }
    
    • Simplify i18n import
    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',
    }
    
  3. 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 参数缺失的错误
  4. 5.2.22025-01-19 · 2025-01-19 09:35 UTC
    查看更新说明

    [5.2.2] - 2025-01-19

    • 修复缩略图跨越问题
    • 修复当网页没有head时引起的样式加载失败问题
    • 新增字幕插件的设置面板的滑块支持移动端拖动
    • 修复设置面板在旋屏时的定位错误
    • 修复全屏状态变化时类名切换错误问题
  5. 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

用户点评

登录用户的真实使用记录,可按版本和硬件筛选
共 0 条

    还没有人点评。第一个说出真实体验的人最有价值。

    README 原文

    未翻译

    Home Page

    https://artplayer.org

    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

    NameDescribeState
    artplayer-plugin-danmukuDanmuku (bullet comment) system
    artplayer-plugin-hls-controlHLS quality control
    artplayer-plugin-dash-controlDASH quality control
    artplayer-plugin-vtt-thumbnailVTT thumbnail preview
    artplayer-plugin-multiple-subtitlesMultiple subtitles support
    artplayer-plugin-chromecastGoogle Chromecast support
    artplayer-plugin-vastVAST/VPAID advertising
    artplayer-plugin-chapterVideo chapters support
    artplayer-plugin-auto-thumbnailAuto-generated thumbnails
    artplayer-plugin-ambilightAmbilight effect
    artplayer-plugin-document-pipDocument Picture-in-Picture
    artplayer-plugin-audio-trackIndependent audio track playback
    artplayer-plugin-jassubASS/SSA subtitle support
    artplayer-plugin-danmuku-maskDanmuku masking (smart blocking)
    artplayer-plugin-asrAutomatic Speech Recognition
    artplayer-plugin-adsVideo advertising pluginWIP

    Libraries

    NameDescribeState
    hls.jsHLS client
    dash.jsMPEG DASH player
    flv.jsHTML5 FLV Player
    mpegts.jsMPEG-TS/FLV Player
    webtorrent.jsStreaming torrent client

    Proxys

    NameDescribeState
    CanvasProxy video to canvas
    MediabunnyMediabunny proxy

    Changelog

    CHANGELOG.md

    Contributing

    CONTRIBUTING.md

    Donations

    We accept donations through these channels:

    pay

    QQ Group

    QQ Group

    License

    MIT © Harvey Zhao