diff --git a/apps/web/package.json b/apps/web/package.json
index 1843dac..5e6136a 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -10,19 +10,20 @@
     "start": "node .next/standalone/apps/web/server.js"
   },
   "dependencies": {
+    "@profullstack/player": "^0.3.1",
     "@profullstack/rssamplifier": "workspace:*",
+    "@rssamplifier/auth": "workspace:*",
     "@rssamplifier/db": "workspace:*",
     "@rssamplifier/feed": "workspace:*",
     "@rssamplifier/ingest": "workspace:*",
-    "@rssamplifier/search": "workspace:*",
-    "next": "^16.2.4",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "@swc/helpers": "^0.5.23",
-    "@rssamplifier/auth": "workspace:*",
     "@rssamplifier/mail": "workspace:*",
     "@rssamplifier/notify": "workspace:*",
+    "@rssamplifier/search": "workspace:*",
     "@rssamplifier/translate": "workspace:*",
-    "@simplewebauthn/browser": "^13.0.0"
+    "@simplewebauthn/browser": "^13.0.0",
+    "@swc/helpers": "^0.5.23",
+    "next": "^16.2.4",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   }
 }
diff --git a/apps/web/src/app/DockPlayer.jsx b/apps/web/src/app/DockPlayer.jsx
index 4f8cecc..083a035 100644
--- a/apps/web/src/app/DockPlayer.jsx
+++ b/apps/web/src/app/DockPlayer.jsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { attachSource } from '@profullstack/player';
 import { useRouter } from 'next/navigation';
 
 import { dockable, embedded } from '../lib/queue.js';
@@ -658,6 +659,56 @@ export default function DockPlayer() {
     };
   }, [remember]);
 
+  /**
+   * Get the track's bytes into the element.
+   *
+   * Was `src={track.src}` on both the <video> and the <audio>, which is right
+   * until a feed's enclosure is something the browser cannot open by itself.
+   * The directory is a crawl of the open web, so what turns up in an enclosure
+   * is whatever the publisher chose -- and an HLS playlist handed straight to a
+   * <video> plays nothing and reports a bare media error, which reads as a
+   * broken episode rather than a missing library.
+   *
+   * `attachSource` picks the delivery per source: native for the ordinary MP3
+   * or MP4, hls.js for a playlist. Everything the dock does around it -- the
+   * queue, the position it remembers, the popout, surviving a soft navigation
+   * -- is untouched.
+   *
+   * Skipped entirely for an embed: a YouTube or PeerTube track is an <iframe>,
+   * and there is no media element here to attach anything to.
+   *
+   * Attaching is asynchronous, because a delivery engine is only downloaded
+   * when a source needs one. `cancelled` is what stops a fast walk through a
+   * playlist leaving an earlier attachment running under a later one.
+   */
+  useEffect(() => {
+    const el = mediaRef.current;
+    const src = track?.src;
+    if (!el || !src || embedded(track.kind)) return;
+
+    let cancelled = false;
+    /** @type {{ destroy: () => void } | null} */
+    let attached = null;
+
+    void attachSource(el, { src })
+      .then((result) => {
+        if (cancelled) {
+          result.destroy();
+          return;
+        }
+        attached = result;
+      })
+      .catch(() => {
+        // The element keeps whatever the browser made of it; the dock's own
+        // error handling still applies.
+      });
+
+    return () => {
+      cancelled = true;
+      attached?.destroy();
+    };
+  }, [track?.src, track?.kind]);
+
   if (!track) return null;
 
   const embed = embedded(track.kind);
@@ -714,7 +765,6 @@ export default function DockPlayer() {
           // not started has nothing to paint, and a black rectangle in the
           // corner of the window says nothing about what is in it.
           poster={track.image ?? undefined}
-          src={track.src}
           onEnded={() => advance(1, true)}
           onPause={remember}
           onPlay={remember}
@@ -726,7 +776,6 @@ export default function DockPlayer() {
           className="episode-audio"
           controls
           preload="metadata"
-          src={track.src}
           onEnded={() => advance(1, true)}
           onPause={remember}
           onPlay={remember}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 352f5e5..b9ddeb0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,9 @@ importers:
 
   apps/web:
     dependencies:
+      '@profullstack/player':
+        specifier: ^0.3.1
+        version: 0.3.1(react@19.2.8)
       '@profullstack/rssamplifier':
         specifier: workspace:*
         version: link:../cli
@@ -559,6 +562,15 @@ packages:
     resolution: {integrity: sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==}
     engines: {node: '>=20.0.0'}
 
+  '@profullstack/player@0.3.1':
+    resolution: {integrity: sha512-/BvjRREIQ+WBw+MJXuSUDONreRnivB36wZDiflnzqrTtDhBUZEbkAgsfKF/m67U7GdSYl1uRJMbQoPEw5I9nMA==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      react: '>=18'
+    peerDependenciesMeta:
+      react:
+        optional: true
+
   '@simplewebauthn/browser@13.3.0':
     resolution: {integrity: sha512-BE/UWv6FOToAdVk0EokzkqQQDOWtNydYlY6+OrmiZ5SCNmb41VehttboTetUM3T/fr6EAFYVXjz4My2wg230rQ==}
 
@@ -703,6 +715,13 @@ packages:
     resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
     engines: {node: '>=20.19.0'}
 
+  es6-promise@4.2.8:
+    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
+
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
   fast-sha256@1.3.0:
     resolution: {integrity: sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==}
 
@@ -721,6 +740,9 @@ packages:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
     engines: {node: '>=12.20.0'}
 
+  hls.js@1.7.1:
+    resolution: {integrity: sha512-DlzIkeBAS9IIQ432k3BUf3HlwbsR0+trB1i2lDdN2gUkNkrehFurh0/48M5c1/EjlDkdGng1gwZIpwyPxvdZ/g==}
+
   html-escaper@3.0.3:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
 
@@ -759,6 +781,10 @@ packages:
     resolution: {integrity: sha512-vtEhXh/gNjI9Yg1u4jX/0YVPMvxzHuGgCm6tC5kZyb08yjGWGnqAjGJvcXbqQR2P3MyMEFnRbpcdFS6PBcLqew==}
     engines: {node: '>=12'}
 
+  mpegts.js@1.8.2:
+    resolution: {integrity: sha512-cZYMa5muASH55wrS6JK5IGkUqnCA96c0f+WdnW91jIK9s/N6NzjmTQDJNYg9A5u/G2Q5nj2b3w1Zwzze/9guxA==}
+    engines: {node: '>=20.9.0'}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1273,6 +1299,13 @@ snapshots:
       tslib: 2.8.1
       tsyringe: 4.10.0
 
+  '@profullstack/player@0.3.1(react@19.2.8)':
+    dependencies:
+      hls.js: 1.7.1
+      mpegts.js: 1.8.2
+    optionalDependencies:
+      react: 19.2.8
+
   '@simplewebauthn/browser@13.3.0': {}
 
   '@simplewebauthn/server@13.3.2':
@@ -1399,6 +1432,10 @@ snapshots:
 
   entities@8.0.0: {}
 
+  es6-promise@4.2.8: {}
+
+  events@3.3.0: {}
+
   fast-sha256@1.3.0: {}
 
   fast-xml-builder@1.3.1:
@@ -1424,6 +1461,8 @@ snapshots:
     dependencies:
       fetch-blob: 3.2.0
 
+  hls.js@1.7.1: {}
+
   html-escaper@3.0.3: {}
 
   htmlparser2@10.1.0:
@@ -1478,6 +1517,11 @@ snapshots:
 
   luxon@3.7.2: {}
 
+  mpegts.js@1.8.2:
+    dependencies:
+      es6-promise: 4.2.8
+      events: 3.3.0
+
   ms@2.1.3: {}
 
   msgpackr-extract@3.0.4:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index eff89a8..60a12c7 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -11,3 +11,5 @@ allowBuilds:
   # inside the image would add a toolchain to it for a speedup nothing is
   # waiting on.
   msgpackr-extract: false
+minimumReleaseAgeExclude:
+  - '@profullstack/player@0.2.0 || 0.3.1'