Chromeブラウザで動画のシークバーを操作する

自宅のオンプレサーバに家族が見るファイルを入れていて、それを 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