糖猫猫andrionzhao 40fcda6a37 feat: batch video upscaling with folder upload, directory save, and result comparison (#1051)
* feat: support batch video upscaling with folder upload and directory save

- Add multi-file selection and entire folder upload (webkitdirectory)
- Support drag & drop of both files and folders via FileSystemEntry API
- Add save directory picker using File System Access API (showDirectoryPicker)
- Process videos sequentially with per-file progress and status tracking
- Add right-side result list with click-to-compare functionality
- Add per-video duration and total batch duration display
- Add retry button for failed items with error detail display
- Remove auto-play on comparison viewer load
- Fix worker error handling: handle "error" command to reject stale promises
- Fix event listener accumulation in video comparison (AbortController)
- Fix XSS risk by escaping HTML in all innerHTML injections
- Fix URL revocation timing in download to prevent large file truncation
- Extract writeToSaveDirectory and truncateName helpers to reduce duplication
- Add Usage Guide panel explaining single/multiple/folder upload options

Files changed:
  docs/upscaler/index.html  (+1110/-181)
  docs/upscaler/upscaler.js (+110)

* fix: prevent auto-play and resource consumption during upscaling

- Set preload="metadata" on preview and comparison video elements
- Explicitly pause preview video after setting src in showVideoPreview
- Remove preview video seek sync from batch processing progress callbacks
  (was causing continuous decode during upscaling, wasting GPU resources)
- Remove preview video seek sync from retry progress callback
- All videos now require manual play; no background resource usage

* fix: improve upscaled video quality with higher bitrate and codec support

- Raise base bitrate from 2.5 Mbps (25e5) to 8 Mbps (8e6) for standard and
  firefox processors, preventing quality loss when source videos have high
  bitrates (e.g. 720p @ 16.7 Mbps was producing 1440p @ 10 Mbps, smaller
  than the original file)
- Double the bitrate for mediabunny processor (X.n1 * 2) to account for the
  4x pixel increase from 2x upscaling
- Add H.264 Level 5.1 (avc1.640033) and Level 5.2 (avc1.640034) codecs to
  the fallback lists, since Level 4.0 (avc1.640028, ~24.6 Mbps) cannot
  support the higher bitrates for 1440p+ outputs
- Add latencyMode: "quality" to VideoEncoder configs for both standard and
  firefox processors, prioritizing encoding quality over latency (suitable
  for offline processing)

* feat: add video data comparison panel for original vs upscaled metrics

- Add a comparison data table below the file info bar showing 6 metrics:
  Resolution, File Size, Duration, Est. Bitrate, Pixels, Process Time
- Display per-metric change percentage with color-coded indicators:
  green (↑) for improvements, red (↓) for regressions, gray for neutral
- Estimated bitrate calculated from file size × 8 / video duration
- Table renders after both original and upscaled video metadata loads
- Auto-hide panel on reset

* fix: make video data comparison panel full-width and responsive

- Move comparison data table from inside the left column to the full-width
  area below the left/right layout, so it is no longer constrained by the
  comparison viewer column width
- Remove table-fixed colgroup and overflow-x-auto that caused horizontal
  scrolling on smaller screens
- Table now uses w-full auto-layout, displaying all 4 columns (Metric,
  Original, Upscaled, Change) without requiring horizontal scrolling

---------

Co-authored-by: rionzhao <rionzhao@tencent.com>
2026-09-10 17:19:38 +08:00
2018-11-21 18:37:25 +08:00
2018-10-10 14:23:06 +08:00
2026-03-07 17:02:59 +08:00

logo

ArtPlayer.js

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

Size Downloads Version License jsdelivr

・ Online Editor ・ API Document ・ Danmuku ・ Changelog ・ 🤖LLMs ・

screenshot

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

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

CHANGELOG.md

Contributing

CONTRIBUTING.md

Donations

We accept donations through these channels:

pay

QQ Group

QQ Group

License

MIT © Harvey Zhao

Languages
JavaScript 89%
Less 9.8%
TypeScript 0.7%
Vue 0.3%
HTML 0.1%