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

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

その中の一つで、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ブラウザでのデータセーバー機能を判別する際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
Partner