本ページは広告が含まれています。気になる広告をクリック頂けますと、サーバ運営費になります(^^
100拠点ほどに展開しているデジタルサイネージです。本社コンテンツを流す部分に動画配信サイトVimeoを利用していたのですが、最近「帯域使い過ぎ」との事で、アカウントを停止させられてしまいました。
そこで、どうにかならんかと思っていたらSmart Slider3 Proにはmp4をそのまま流す方法があるので、購入して試してみたらうまくいったので、その報告です。
ロリポップの転送量上限
ロリポップエンタープライズプランを利用しています。
通信量は1日400GBまでです。かなり大きな値のように思いますが、100拠点からくるサイネージのダウンロード要求はかなりの通信量になります。
ここを気を付けてないと、またアカウント停止の憂き目にあってしまう。
同じデータを繰り返しダウンロードしてしまうので、ブラウザキャッシュに頼りたいと思います。
ブラウザによるキャッシュの参考
まず、3種類のファイル形式(MP4、FLV、F4V)をターゲットにして検証したところ、意外なことにキャッシュされないファイル形式があり、MP4形式はSafari以外はキャッシュされず、FLV、F4V形式はファイルサイズの違いによりキャッシュされました。
プログレッシブダウンロードの動画は、すべてキャッシュされるか検証
プログレッシブダウンロードの動画がキャッシュされるかという記事があり、面白いと思いました。Chromeではmp4ではキャッシュされないようです。
試しにやってみたら、mp4ファイルもちゃんとブラウザキャッシュから再生できることが分かりました。
ブラウザにキャッシュさせる.htaccessの書き方
mod_expiresを利用する
# BEGIN BrowserCache <ifmodule mod_expires.c=""> ExpiresActive on ExpiresByType video/mp4 "access plus 12 hours" ExpiresByType image/png "access plus 12 hours" ExpiresByType image/jpeg "access plus 12 hours" ExpiresByType image/gif "access plus 12 hours" ExpiresByType text/css "access plus 12 hours" ExpiresByType text/javascript "access plus 12 hours" </ifmodule> # END BrowserCache
レンタルサーバで対応していない場合は こんな書き方もできます
<pre># CACHE media files for 12hours <files ~="" ".(gif|jpe?g|png|mp4)$"=""> Header set Cache-Control "max-age=43201" </files> </pre>
この書き方本格的って感じたやつ
<ifmodule mod_expires.c=""> ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # Your document html ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # Feed ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour" # Favicon (cannot be renamed) ExpiresByType image/x-icon "access plus 1 week" # Media: images, video, audio ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" # CSS and JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" <ifmodule mod_headers.c=""> Header append Cache-Control "public" </ifmodule> </ifmodule>
ブラウザキャッシュが有効になったか確認
Chromeの場合
ホームページを表示させ F12キーを押す
Networkタブをクリックした後で、再読み込みF5する
Cache-Control: 行が入っていれば成功です。
mp4のキャッシュが効かない時の解決
mp4のキャッシュが効かない事があります。
スライドショーで、自動的にmp4が再生するような仕様で利用していると、ブラウザキャッシュが効かないのは致命的です。よく確認しておいた方がいいです。
transferredが上がっていかなければキャッシュから読み込みされています。ここが上がっていく場合があります。ExpiresByType video/mp4で有効期限を切ってるのにキャッシュされない事があります。
ETagを使ってキャッシュ効率化
そんな時にサポートしてもらったのが etagの設定です。
ETag(エンティティタグ)は、HTTPにおけるレスポンスヘッダの1つである。これは、HTTPにおけるキャッシュの有効性確認の手段の1つであり、ETagを利用してクライアントから条件付きのリクエストを行うことができる。そうすることで、コンテンツが変わらなければレスポンスをすべて返す必要がなくなるので、キャッシュを効率化し、回線帯域を節約できるようになる。
HTTP ETag
ETagを含めた .htaccessの設定
<FilesMatch "\.mp4$"> FileETag MTime Size </FilesMatch> <IfModule mod_mime.c> AddType video/mp4 .mp4 .m4v </IfModule> <IfModule mod_expires.c> ExpiresActive on ExpiresByType video/mp4 "access plus 1 month" </IfModule>
FileETagディレクティブ HTTPレスポンスヘッダにETagフィールドを作成する
MTime
:ファイルの最終更新時刻を使う
Size
:ファイルの Byte 数を使う
私の環境ではこちらを使う事で無事にキャッシュからmp4が再生されるようになりました。
Smart Slider 3 ProでMP4を流す設定
Smart Slider 3 Proを購入すると、mp4を直接指定してビデオを流す事ができるようになります。
1.ブランクスライドを作成
2.Videoツールを配置
3.mp4ファイルを指定
4.AutoPlayにチェック
5.When Ended に Go to next slideを設定
6.Restart On Slide Change をONにする
これでMP4が流れるようになります。
最終的な.htaccess
#ForCache Etag <FilesMatch "\.mp4$"> FileETag MTime Size </FilesMatch> # BEGIN BrowserCache <IfModule mod_expires.c> ExpiresActive on # Perhaps better to whitelist expires rules? Perhaps. ExpiresDefault "access plus 1 month" # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5) ExpiresByType text/cache-manifest "access plus 0 seconds" # Your document html ExpiresByType text/html "access plus 0 seconds" # Data ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" # Feed ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour" # Favicon (cannot be renamed) ExpiresByType image/x-icon "access plus 1 week" # Media: images, video, audio ExpiresByType video/mp4 "access plus 12 hours" ExpiresByType image/png "access plus 12 hours" ExpiresByType image/jpg "access plus 12 hours" ExpiresByType image/jpeg "access plus 12 hours" ExpiresByType image/gif "access plus 12 hours" ExpiresByType text/css "access plus 12 hours" ExpiresByType text/javascript "access plus 12 hours" # HTC files (css3pie) ExpiresByType text/x-component "access plus 1 month" # Webfonts ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" # CSS and JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" <IfModule mod_headers.c> Header append Cache-Control "public" </IfModule> </IfModule> # END BrowserCache
検証
Windows10では、ネットワークの使用状況を、アプリケーションごとに表示する機能があります。設定がうまくいっているかどうか、しっかりと検証するため、サイネージを流しているPCで、通信がどれくらい発生しているかを確認します。
12時間ほど流していますが、Chromeの通信量は8MBから動かない状況で、これは確実にキャッシュから再生できているようです。
mp4にアクセス制限をかけたい
リファラーでアクセス制限する
SetEnvIf Referer "^http://hanako\.jp" ok_url order deny,allow deny from all allow from env=ok_url
Smart Slider Proが設定してあるサイトからしかmp4ファイルにアクセスさせたくない場合は、リファラーによるアクセス制限が考えられます。
上記は hanako.jpにSmart Slider 3 Proが hanako.jpサイトに登録されている場合に、mp4を入れたディレクトリの .htaccess 設定です。
SetEnvIf Referer "^http://hanako\.jp" ok_url SetEnvIf Referer "^http://techlive\.tokyo" ok_url order deny,allow deny from all allow from env=ok_url
2つのドメインから許可したい場合は、上記のように記載する事ができます。
mp4ディレクトリ作成して、そのURLをSmart Slider Pro3に入れてあります。
# BEGIN BrowserCache <FilesMatch "\.mp4$"> FileETag MTime Size </FilesMatch> <IfModule mod_mime.c> AddType video/mp4 .mp4 .m4v </IfModule> <IfModule mod_expires.c> ExpiresActive on ExpiresByType video/mp4 "access plus 12 hours" </IfModule> # END BrowserCache # For Access Control SetEnvIf Referer "^http://hanako\.jp" ok_url order deny,allow deny from all allow from env=ok_url