ArchPlayer — Minimal. Local. Yours.

Features

Everything you need, nothing you don't

Native Quality Playback

Your file is decoded directly by the browser — no server, no transcoding, no quality loss. What you drop is what you see.

External Subtitle Support

Load any .srt or .vtt file. Adjust sync delay in real time, toggle on/off instantly. Clean text-shadow rendering — no ugly boxes.

Playback Speed Control

0.25x to 2x. Switch on the fly without losing your position. Ideal for lectures, commentary, or rewatching favourite scenes.

Picture in Picture

Pop the video out into a floating window with one click. Browse, code, or work while keeping your video visible.

True Fullscreen

Full native fullscreen with auto-hiding controls. Mouse moves in, controls appear. Mouse leaves, they vanish. Zero distraction.

Single HTML File

No npm. No install. No dependencies. Open the file in any browser and it works. That's the whole story.

How it works

Dead simple by design

ArchPlayer is a single self-contained HTML file. It uses the browser's native video decoder — which means it supports whatever your browser supports: MP4, WebM, MKV (Chromium), AVI, and more. No backend. No accounts. Everything stays on your machine.

Download the file

One click. You get a single ArchPlayer.html file. Nothing else.

Open in your browser

Double-click it, or drag it into Chrome, Firefox, or any modern browser. No server needed.

Drop your video

Drag a video file onto the player, or use the Open button. Playback starts immediately at full quality.

Load subtitles (optional)

Drag in a .srt or .vtt file, or use the subtitle panel. Adjust delay offset if needed.

Customization guide

Make it yours

Open ArchPlayer.html in any text editor. All visual settings live inside the :root CSS block and a few clearly commented sections below it.

/* ─── SUBTITLE TEXT ───────────────────────────────────
   Find the .subtitle-text rule in the <style> block.
   Tweak the values below to your preference.
─────────────────────────────────────────────────────── */

.subtitle-text {
  font-size: 22px;       /* increase for bigger subtitles, e.g. 26px, 30px */
  font-weight: 500;     /* 300 = light, 400 = normal, 600 = bold */
  color: #ffffff;       /* subtitle text colour */
  line-height: 1.65;   /* spacing between subtitle lines */
  letter-spacing: 0.01em;
  /* Shadow depth — increase blur values for more contrast */
  text-shadow:
    0 1px 4px rgba(0,0,0,0.95),
    0 2px 14px rgba(0,0,0,0.85);
}

/* Subtitle vertical position — distance from bottom of video */
.subtitle-overlay {
  bottom: 80px;  /* increase to move subtitles higher */
  max-width: 80%; /* max line width before wrapping */
}

/* ─── COLOUR PALETTE ──────────────────────────────────
   Find the :root block at the very top of the <style>.
   Change any value to retheme the entire player.
─────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg:        #0e0f11;   /* main dark background */
  --surface:   #13141a;   /* titlebar + sidebar background */
  --surface2:  #1a1b22;   /* card / block backgrounds */

  /* Accent — used for progress bar, play button, active states */
  --accent:    #7eb8f7;   /* try #c084fc (purple), #34d399 (green) */
  --accent-dim: rgba(126,184,247,0.12);

  /* Text */
  --text:       #e8e9f0;  /* primary text */
  --text-muted: rgba(200,202,220,0.5); /* secondary/dim text */
}

/* ─── CONTROL BUTTON SIZES ────────────────────────────
   Find these rules in the <style> block.
─────────────────────────────────────────────────────── */

/* All icon buttons in the control bar */
.ctrl-btn {
  width:  36px;   /* button hitbox size */
  height: 36px;
}

/* The main play/pause button */
.play-btn {
  width:  40px;   /* make larger: 48px, 52px */
  height: 40px;
}

/* Progress bar thickness */
.progress-track {
  height: 4px;    /* resting thickness */
}
.progress-track:hover {
  height: 6px;    /* hover thickness */
}

/* ─── DEFAULT PLAYBACK SPEED ──────────────────────────
   Find the speed-item elements in the HTML.
   Change which item has class="active" to set the default.
   Then set the matching video.playbackRate in the JS.
─────────────────────────────────────────────────────── */

<!-- In HTML: mark your preferred default as active -->
<div class="speed-item"     data-val="0.75">0.75x</div>
<div class="speed-item active" data-val="1">1x</div>  <!-- default -->
<div class="speed-item"     data-val="1.25">1.25x</div>

/* In JS: find speedBtn and set initial text + rate */
// Change "1x" to "1.25x" and add this line:
video.playbackRate = 1.25;
speedBtn.textContent = '1.25x';

A video player built for clarity