Meta42
4c7d0aa9fa
Root causes fixed: 1. Remove starvation check that suspends AudioContext — it freezes the video clock and causes playback to stall permanently 2. Add backpressure (1s BUFFER_AHEAD) to prevent audio pump from decoding unbounded buffers, starving the video decoder 3. Add setTimeout(0) yield between batches so video rAF callbacks can run 4. Batch audio buffer reads (16 per iteration) to reduce IPC overhead 5. Fix latestScheduledEndTime time-domain: use media-time (same domain as currentTime) instead of AudioContext-time, so backpressure check works correctly after seeking Without these fixes, playing a large file (9+ GB) with audio causes: - Audio pump decodes hundreds of buffers in 1 second (195s of audio decoded in 1s wall clock) - Main thread blocked by 177 IPC calls/sec from audio iterator - Video frames never render (rAF starved) - After seek: backpressure never triggers due to time-domain mismatch, causing persistent stutter and eventual silence
🎨 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