自宅のオンプレサーバに家族が見るファイルを入れていて、それを Apache で LAN 内に公開しています。
ある時気づいたのが、シークバーは表示されるものの操作を受け付けない... というもの。
※あくまで操作を受け付けないだけで、時間の経過とともにバーは右側に進んでいく。
(戻ったり、早送りしたりができなくて「常に最初から最後まで再生」しかできない)
普段フロントエンドあんまり見ないので途方に暮れていたら、こんなページを発見!
Chrome/Edge/Safariなどのブラウザで動画/音声のシークバーが動かせない/先送りできない問題について | baikin.net | aiueo
読んでみたら、ビンゴ。
そう、Firefox だとシークバーの操作ができる...
でも、Chrome でシークバー操作したい。
実は知らなかっただけで、ステータスコード 206 で返さないと、途中からの再生はできないらしい。
※ステータスコード 200 だと、リクエストの Range ヘッダーで指定されたデータ範囲を返せない。
HTTP range requests - HTTP | MDN
範囲リクエストは、ランダムアクセスに対応しているメディアプレーヤー、大きなファイルの一部のみを必要とするデータツール、ダウンロードを一時停止および再開できるダウンロードマネージャーなど、さまざまなクライアントに役立ちます。
206 Partial Content - HTTP | MDN
HTTP の 206 Partial Content は成功レスポンスステータスコードで、範囲リクエストへのレスポンスとして送信されます。
ということで、早速確認。
確かにステータスコード 200 だ。
$ curl -I http://192.168.2.xxx/81.mp4
HTTP/1.0 200 OK
Server: SimpleHTTP/0.6 Python/3.11.2
Date: Sun, 05 Oct 2025 03:13:36 GMT
Content-type: video/mp4
Content-Length: 23097437
Last-Modified: Wed, 01 Oct 2025 11:20:55 GMT
Apache のモジュール libapache2-mod-xsendfile
を導入して、ファイル出力を Apache でコントロールできるようにする。
$ dpkg -l | grep xsendfile
# none ...
# package install
$ sudo apt update -y && sudo apt upgrade -y && sudo apt install libapache2-mod-xsendfile -y
なんか途中で iperf3
の自動起動有無を聞かれたので No
で回答。
- Package configuration
┌───────────────────────────────────┤ Configuring iperf3 ├────────────────────────────────────┐
│ │
│ Choose this option if Iperf3 should start automatically as a daemon, now and at boot time. │
│ │
│ Start Iperf3 as a daemon automatically? │
│ │
│ <Yes> <No> │
│ │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
導入後はサービス再起動。
# service restart
$ systemctl restart apache2
めでたくステータスコードが 206 になり、Chrome ブラウザからもシークできるようになった。
$ curl http://192.168.2.xxx/81.mp4 -i -H "Range: bytes=0-1023"
HTTP/1.1 206 Partial Content
Date: Sun, 05 Oct 2025 10:26:39 GMT
Server: Apache/2.4.65 (Debian)
Last-Modified: Wed, 01 Oct 2025 11:20:55 GMT
ETag: "160705d-640170fdf93c0"
Accept-Ranges: bytes
Content-Length: 1024
Content-Range: bytes 0-1023/23097437
Content-Type: video/mp4