最近ではスマートフォンでもユーザーがサイトに訪れた際に自動で動画を流すことが可能になり、動画を使った演出を実装しているサイトが多くなってきています。

その様な動画を使った演出をクライアントから求められる機会も増えていますが、ユーザーの端末設定によってはスマートフォンでの動画自動再生は正常に動作しなくなる場合があります。

その中の一つで、AndroidのGoogle Chromeブラウザの設定にあるデータセーバー機能の設定がONになっていると通信制限が掛かり動画を自動再生させることができません。

その様な端末に対しては動画ではなく、静止画に切り替えたり別の制御が必要になってしまうのですが、ユーザーの環境でデータセーバー機能の設定がONになっているかどうかJavaScriptで判別できる処理があったので自分用メモとして紹介してみます。

AndroidのChromeブラウザでデータセーバー機能がONかどうか判別する方法

「AndroidのChromeブラウザでデータセーバー機能がONかどうか判別する方法」サンプルを別枠で表示

サンプル画面はAndroidのChromeで、データセーバー機能がONになっている場合のみ『「データセーバー」機能がONです』というアラートが表示されるようになっています。
※AndroidのChromeブラウザ以外では何も起こりません。

このデータセーバー機能の状態を判別をするには、以下のような条件分岐で制御することになります。
※HTML・CSSは関係しないのでスクリプト制御のみになります。

◆SCRIPT
if (navigator.connection.saveData > 0){
    ~ ここにデータセーバー機能がONになっている場合の処理を記述 ~
}

ネットワークの接続情報を取得する「navigator.connection」を使って「navigator.connection.saveData」とすることでONの時には「1」が返ってくることになり、データセーバー機能の状態を判別することが可能になります。
※Chrome65から取得可能

データセーバー機能の設定がONになっていると端末の通信制限が掛かり、動画を自動再生させることができなくなるので、この「navigator.connection.saveData」を使ってデータセーバー機能の設定がONの場合には、静止画に切り替える、などといった処理が必要になったりします。

サイト上で動画を自動再生で流すこと自体がユーザーに動画ファイルをダウンロードさせることになり、通信状況などによってはあまり適さない場合もあるので注意が必要です。

ネットワークの接続情報を取得する「navigator.connection」では、取得できるネットワーク接続情報は「saveData」だけでなく以下の6つの種類の情報を取得できるようです。

type Wi-Fi接続かモバイル通信といった接続のタイプを判別
effectiveType 3Gや4Gなどの接続のタイプを判別
downlink 有効帯域幅の推定値(Mb/s)を判別
downlinkMax 有効帯域幅の上限値(Mb/s)を判別
rtt 有効帯域幅のRTT値(ミリ秒)を判別
saveData データセーバー機能のON/OFFを判別

「navigator.connection」に対応しているブラウザのみでの使用となり、現状はAndroidのChromeのみのようです。

以上がAndroidのChromeブラウザでデータセーバー機能がONかどうか判別する方法でした。

AndroidのChromeブラウザでのデータセーバー機能を判別する際にぜひ。。。