Harvey Zhao
7dffd99cfd
Remove debugging border from the websr plugin's styling Enhance canvas sizing logic in artplayer-plugin-websr - Updated canvas positioning to center it within the player. - Introduced a new function to calculate canvas size based on the video aspect ratio. - Adjusted canvas dimensions during initialization and on resize events to maintain aspect ratio. - Ensured canvas styles are updated to reflect the calculated dimensions. feat: add comparison mode to artplayer-plugin-websr - Updated README.md to reflect new comparison feature and simplified content. - Modified package.json to remove unnecessary keywords. - Enhanced index.js to implement comparison functionality, allowing users to compare original and upscaled video. - Added new methods for enabling, disabling, and toggling comparison mode, as well as setting and getting the comparison position. - Updated TypeScript definitions to include new comparison options and methods.
🎨 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-iframe | Control player via iframe |   |
| 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 |
| artplayer-plugin-websr | AI video upscaling with WebGPU |   |
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 Zack