Anıl Çalışkol
0f47e11d63
`art.play()` is an async wrapper around the native `video.play()` promise, which rejects when a pending play request is interrupted (`pause()`, `load()`, a new `src`, or the element being removed) and when autoplay is blocked. Every internal caller fires it from an event handler and cannot await it, so the rejection escapes as a global `unhandledrejection`. Error trackers report it as an uncaught crash even though the player recovers on its own — for example destroying the player right after mount, which is routine when the video sits in a modal the user can close quickly. Add a `silencePromise` util (the same approach video.js uses) and apply it to the non-awaited internal call sites: mask, play control, mini player, loop restart, autoPlayback jump, hotkey and click toggles. `switchMix` is fixed too, for a second symptom: `await art.play()` inside the async `video:canplay` handler both leaked the rejection and left the `switchUrl` promise pending forever, since the throw never reached the enclosing executor's `reject`. It now settles. The public API is unchanged: `art.play()` and `art.toggle()` still return the original promise, so applications that call them keep their own rejection to handle. Only the internal, non-awaited copy is silenced.
🎨 ArtPlayer.js is a modern and full featured HTML5 video player
・ Online Editor ・ API Document ・ Danmuku ・ Changelog ・ 🤖LLMs ・
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