はじめに

※この記事は、ファイルをアップロードしている管理人側向けの記事です。

audio/videoタグで表示されている動画/音声をシークできない時がある。
動作確認した環境は下記の通り。

  • サイト（CMS） – WordPress
  • Webサーバ – Synology NASのパッケージ「Web Station」で構築されたApache HTTP Server 2.4
  • ブラウザ – Google Chrome
  • DDNSサービス – Cloudflare

商品リンクを読み込んでいます…

  • シークできるヤツ

  • シークできないヤツ

違いは何なのか。

原因

下記いずれか。

  1. Apacheサーバの設定
  2. Cloudflare

Firefoxでは問題なくシークできる。

ブラウザによる挙動の違いは「仕様！」と言ったらおしまいなのだが…
ChromeでHTTPステータスコードが200のファイルを開く場合、ファイル全体をダウンロードすることを拒否し、currentTimeプロパティが利用不可となる仕様のためシークができなくなる（ただしファイルサイズが小さい場合はシークできる）。
公式のソースが見つからなくてうまく説明できないが、そういうこと（仕様）なのだ。

HTTPステータスコードの調べ方

ターミナル（コマンドプロンプト）を開き、下記curlコマンドを使うとHTTPステータスコードを確認できる。

del alias:curl
curl -H Range:bytes=16- -I /_/r/efa448a63d3c7ad0.mp3
curl -H Range:bytes=16- -I /_/r/7f12b2b6cb8b01cc.mp3
  • シークできるヤツ – HTTP/1.1 206 Partial Content

  • シークできないヤツ – HTTP/1.1 200 OK

対処法

Chromeでシークしたい場合、HTTPステータスコードは206で返される必要がある。

Apacheサーバの設定を確認する

  1. XSendFileモジュールをインストールする
    2. sudo apt-get update
sudo apt-get install libapache2-mod-xsendfile
  2. apacheのconfファイルに下記を追記し、指定フォルダパス配下のファイル送信を許可する
    3. XSendFile on
XSendFilePath /volume1/web/baikin/content/work/html/seek/ok
  3. WordPress設定ファイルwp-config.phpファイルへの追記（不要かも？）
    4. 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
    • 呼び出されていたmod_xsendfile.confファイルの中身 – XSendFileが設定されている
      格納場所: /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