Harvey Zhao
740ac4cb24
- Consolidated loading styles in loading.less for better structure. - Updated mask styles in mask.less to enhance clarity. - Refined mini popup styles in mini.less, adding transition effects. - Improved mixins in mixins.less for consistent styling across components. - Adjusted mobile styles in mobile.less for better responsiveness. - Enhanced notice styles in notice.less for improved visibility. - Streamlined plugin styles in plugins.less for better organization. - Simplified poster styles in poster.less for clarity. - Refined progress styles in progress.less, enhancing hover effects. - Updated selector styles in selector.less for better interaction. - Improved settings styles in setting.less for better usability. - Enhanced subtitle styles in subtitle.less for better visibility. - Updated variable definitions in variables.less for consistency. - Refined video styles in video.less for improved layout. - Enhanced volume control styles in volume.less for better user experience. - Optimized rate limiting logic in build-llm.js and trans-docs.js for better performance.
🎨 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
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