Chrome/Edge/Safariなどのブラウザで動画/音声のシークバーが動かせない/先送りできない問題について
はじめに
audio/videoタグで表示されている動画/音声をシークできない時がある。
動作確認した環境は下記の通り。
- サイト（CMS） – WordPress
- Webサーバ – Synology NASのパッケージ「Web Station」で構築されたApache HTTP Server 2.4
- ブラウザ – Google Chrome
- DDNSサービス – Cloudflare
- シークできるヤツ
- シークできないヤツ
違いは何なのか。
原因
下記いずれか。
- Apacheサーバの設定
- Cloudflare
Firefoxでは問題なくシークできる。
ブラウザによる挙動の違いは「仕様！」と言ったらおしまいなのだが…
ChromeでHTTPステータスコードが200のファイルを開く場合、ファイル全体をダウンロードすることを拒否し、currentTimeプロパティが利用不可となる仕様のためシークができなくなる（ただしファイルサイズが小さい場合はシークできる）。
公式のソースが見つからなくてうまく説明できないが、そういうこと（仕様）なのだ。
HTTPステータスコードの調べ方
ターミナル（コマンドプロンプト）を開き、下記curlコマンドを使うとHTTPステータスコードを確認できる。
del alias:curl
curl -H Range:bytes=16- -I https://baikin.net/wp-content/work/html/seek/ok/nyancat60min.mp3
curl -H Range:bytes=16- -I https://baikin.net/wp-content/work/html/seek/ng/nyancat60min.mp3
- シークできるヤツ – HTTP/1.1 206 Partial Content
- シークできないヤツ – HTTP/1.1 200 OK
対処法
Chromeでシークしたい場合、HTTPステータスコードは206で返される必要がある。
Apacheサーバの設定を確認する
- XSendFileモジュールをインストールする
- apacheのconfファイルに下記を追記し、指定フォルダパス配下のファイル送信を許可する
- WordPress設定ファイルwp-config.phpファイルへの追記（不要かも？）
sudo apt-get update
sudo apt-get install libapache2-mod-xsendfile
XSendFile on
XSendFilePath /volume1/web/baikin/wp-content/work/html/seek/ok
define( 'WPMU_SENDFILE', true );
Synology NAS内に用意されたパッケージ「Web Station」を利用している場合はXSendFileがインストール・設定済みなので気にしなくて良い。
- Synology NAS内のXSendFile定義箇所
※SSHサービスを有効化し、Synology NASにログインすること - Apacheサーバ設定ファイル – 111行目でXSendFile設定を行っているファイルを呼び出している
格納場所: /usr/local/etc/apache24/conf/httpd24.conf
※viコマンドでファイルを開く / 保存しないで終了: Esc押下後「:q!」と入力して↵キー
# TODO: Should apapche handle FileETag
# For CVE-2003-1418
FileETag MTime Size
Include conf/extra/httpd-mpm.conf
Include conf/extra/httpd-autoindex.conf
Include conf/extra/httpd-languages.conf
Include conf/extra/mod_xsendfile.conf
Include conf/extra/mod_rpaf.conf
IncludeOptional sites-enabled/*.conf
格納場所: /usr/local/etc/apache24/conf/extra/mod_xsendfile.conf
※viコマンドでファイルを開く / 保存しないで終了: Esc押下後「:q!」と入力して↵キー
LoadModule xsendfile_module modules/mod_xsendfile.so
XSendFile on
XSendFilePath /var/services/web /var/services/homes
SetEnv MOD_X_SENDFILE_ENABLED yes
DDNSサービスにCloudflareを利用している場合
Cloudflare側で負荷を軽減するためApacheサーバのXSendFile設定とは関係なくシークできなくしてくる。
下記コードが記載された.htaccessファイルを、動画/音声が格納されているフォルダ内に格納すれば良い。
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI .(mp3|ogg|wav|mp4|ogv|webm)$ no-gzip dont-vary
