Android版Chromeでvideoタグの自動再生がされない時の解決方法

WEB制作

投稿日:2018-11-29 更新日:

かなりハマった上に自動再生に対応したのも最近のせいか、調べてもなかなかヒットしなかったので忘れないうちに備忘録としてメモ。

そもそもの経緯としては製品LPを作成後、PageSpeed Insightsで改善項目を確認していたらアニメーションgifを使用しているため「アニメーションコンテンンツでの動画フォーマットの使用」の項目に引っかかってしまいました。

たしかにファイルサイズも大きいためモバイルでの読み込みが遅くなるなということでいざ作業へ。

アニメーションgifをwebmとMP4ファイルへ変換

変換はAdobeのMedia Encoderを使うかGoogleで「webm 変換」とか検索するとすぐに見つかると思います。

今回は後者でGoogle検索でヒットしたツールを使って変換しました。
※Media Encoderは前までwebm変換はプラグイン入れないとできなかったのですが2019では対応していました!(知らなかった。。)

iOSとAndroidに対応させるためにwebm/MP4の二つの動画ファイルを用意しましょう。

用意が終わればあとはGoogle先生の言う通りにhtml上でアニメーションgifを読み込んでいる部分をこのように置き換えます。

OSのバージョンによってはインラインだったり自動再生に対応してない場合があったりするみたいですが、古いものは切り捨てて新しいものを取り入れて行きたいので特に気にせず言われた通りに記述しました。

シミュレータで確認

iOSは以前にも取り上げたiOSシミュレータを使いました。うん、動作に問題ない上読み込みも軽くなって快適ですね。

続いてはAndroidなんですが、ChromeはPCでもベースは一緒なのでユーザーエージェントを切り替えて確認。こちらも自動再生、インライン問題なし。

簡単簡単と思いながらいよいよ実機での確認時にトラブル発生。

iPhoneでは問題なく、シミュレータ通りの動作をしてくれたのですがAndroid版のChromeでは自動再生もされず空白での表示になってしまいました。

動画コンテンツを読み込んでいるであろう部分を長押しして動画をダウンロード保存してみると、動画自体は正しく再生されるので問題なさそう。
となると、ブラウザの問題を疑いcontrolsの記述をまずは追記してみました。

これで動画コンテンツにコントローラーが表示されたので、再生ボタンを押してみたところ正常な再生を確認。

そしてここからは試行錯誤の履歴です。

posterにGIFを設定


Androidで無事に表示を確認できました。と、当たり前ですよね。そしてこれだとimgと同様で読み込みしてるのでまったく意味がないため次の方法。

js側で自動再生

これも早い段階で予測はできてはいたのですが、ググっても2018年以降の記事なんかだとAndroid、iOSともに自動再生に対応みたいな記事しか見つからず、解決方法のようなタイトルを見つけても大抵が動画を埋め込む時は「muted」消音設定しておかないと自動再生はされないよというものが大半。

消音設定はしているのとiPhoneでは再生されたため、js側で自動再生の設定を入れてみることに。

const video = document.querySelector('video');
const play = video.play();
if (play instanceof Promise) {
  play.catch(error => {
    console.error('自動再生できません');
  });
}

再度確認するもののやはり再生はされず。

そもそもがPCのChromeではエラーも出ないため、これ以上のデバッグは困難と考えAndroid実機でのデバッグの環境を整えることにしました。

Android端末でリモートデバッグを行う環境を整える

導入自体はそんなに手間ではなかったのですが、手順を説明すると長くなってしまうので割愛します。

手順についてはGoogleで細かく説明してくれているのでこちらをご覧ください。

Android端末のリモートデバッグ

デバッグ環境が整ったことでさっそく対象のWebページにアクセスして、コンソールを見てみると自動再生できませんと共に以下エラー表示。

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

どうやらChromeのデフォルト設定では自動再生は許可されていないみたいです。

こちらの解決方法ですが、Chrome側で以下URLを入力。

chrome://flags/#autoplay-policy

autoplayの項目を【No user gesture is required】に変更して再起動すると自動再生されるようになりました。

めでたしめでたしとなれば、良いんですがこれってユーザーの環境設定ですよね。しかも有効化の方法がとってもマニアック。。

自動再生されなかった場合、jsで処理を追加

この方法もあまりスマートとは言えないのかもしれないですが、ユーザー側の設定となるとお手上げなので苦肉の策でしたが以下の処理を設定して解決としました。

const video = document.querySelector('video');
const play = video.play();
if (play instanceof Promise) {
  play.catch(error => {
    console.error('自動再生できません');
    videos.forEach(function (ele) {
      const poster = ele.poster.replace(/png|jpg/, 'gif');
      ele.setAttribute('poster',poster);
    });
  });
}

ざっくり解説するとvideoタグにjpgまたはpngでposterの設定をしておきます。

そして動画の自動再生ができなかった場合には、posterの拡張子をgifに書き換えるという処理になります。

自動再生をオンにしていない場合には、アニメーションGIFを読み込むことになるためその分重たくはなってしまいますがChromeのアップデートでデフォルトで対応してくれることを願って現状の最善は尽くしたということにしておきます。

ここまでに1日以上を費やしましたが、デバッグ環境を用意していればもっと早く気付けたエラーですね。ChromeはPCでのデバッグで十分だとたかをくくってた結果ですね。

侮るな デバッグ環境 マジ大事

ダブルレクタングルからレスポンシブへ




ダブルレクタングルからレスポンシブへ




-WEB制作
-, ,

執筆者:

関連記事

【2019年最新版】iPhone/Androidでターミナルアプリを使用する方法。『Terminal for iOS』はApp Storeでは現在見つからず

かなり限定的なシチュエーションですが、休日に自分が管理しているウェブサイトをスマホから閲覧している時など、応答が遅い時なんかに異常がないかコマンドで調べたくなることがありますよね。 そんな時に、脱獄、 …

WordPressで問い合わせフォームをプラグインなしの自作実装

今回、問い合わせフォームを実装するにあたって久々に「WordPress + ◯◯」系のキーワードで調べていて色々とEvernoteのwebクリッパーに追加していたら、そういえばWordPressにも似 …

遅延ロード導入時のページ内リンクのズレをなんとかしたい

気付けば12月、今年も終わりが近づいてますね。平成最後だったりと色々と感慨深いものがあるのと1月生まれということもあって毎年この時期はセンチメンタルな気分になってしまいます。 前回に続けて制作系の記事 …

MacのSafariでCross-origin redirectionというエラーが出てしまった時の対処・解決方法

ローカル環境にてコーディングを行なっていた際、サファリで検証を行っていたところコンソールに以下のようなエラーが出てしまっていました。 Cross-origin redirection to https …

ニックネーム
DeLux
プロフィール

30代の東京生活に疲れたWEBエンジニア。
好きなことで生きて行きたいがためにあれこれと手を出してます。
主にAdobe、Google、Apple、SONY辺りの記事とコーディングやプログラム、たまに動画編集やデザインなどのTips的な記事を更新してます。

ガジェットも大好きなのでその辺りもぼちぼち増やす予定。