モバイルでのミュート状態での自動再生 - キャンバスのハッキングやアニメーション GIF は不要です。

Sam Dutton

Android 版 Chrome では、バージョン 53 以降で動画のミュートされた自動再生がサポートされています。autoplay と muted の両方が設定されている場合、動画要素がビューに入ると自動的に再生が開始されます。ミュートされた動画の再生は、play() を使用してプログラムで開始できます。以前は、ミュートの状態に関係なく、モバイルでの再生はユーザーの操作によって開始する必要がありました。

<video playsinline autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

このサンプルにアクセスすると、実際に動作している様子を確認できます。Chrome 53 以降では、muted 動画の再生が自動的に開始されます。

動画プレーヤーのスクリーンショット。

また、play() メソッドを使用してミュート再生を開始できるようになりました。以前は、play() はボタンクリックなどのユーザー ジェスチャーから発生した場合にのみ再生を開始していました。Android で次の 2 つのデモを比較します。Chrome 53 で試してから、古いバージョンで試してください。

可能な限り autoplay 属性を使用し、play() メソッドは必要な場合にのみ使用することをおすすめします。

click などのユーザー操作に応じて動画のミュートをプログラムで解除することはできますが、ユーザー操作なしで動画のミュートをプログラムで解除しようとすると、再生は一時停止します。

また、muted autoplay の変更により、DOM で作成されていない video 要素で play() を使用することも可能になります（WebGL 再生を駆動するなど）。

play() メソッドは、プログラムによるミュート再生が有効かどうかを確認するために使用できる Promise も返します。この例については、simpl.info/video/scripted をご覧ください。

変更の理由

Android 版 Chrome の以前のバージョンでは、自動再生は中断を招き、データ使用量が増加し、多くのユーザーが好まないため、無効になっていました。

自動再生を無効にしたことで、デベロッパーが GIF アニメーションなどの代替手段や、<canvas> や <img> のハックに移行するという意図しない結果が生じました。これらの手法は、消費電力、パフォーマンス、帯域幅の要件、データ費用、メモリ使用量の点で、最適化された動画よりもはるかに劣ります。動画はアニメーション GIF よりも画質が高く、圧縮率もはるかに優れています。平均で約 10 倍、最大で 100 倍です。JavaScript での動画のデコードは可能ですが、バッテリーの消耗が激しくなります。

次の 2 つを比較してみましょう。1 つ目は動画、2 つ目はアニメーション GIF です。

クリップ動画を再生しています。

見た目はよく似ていますが、動画のサイズは 200 KB 未満で、アニメーション GIF のサイズは 900 KB を超えています。

Chrome などのブラウザ ベンダーは、ユーザーの帯域幅について非常に慎重です。多くのユーザーにとって、多くの状況で、接続の悪さよりもデータ費用の高さがアクセスを妨げる大きな要因となっています。回避策が広く普及しているため、ミュートされた自動再生をブロックすることはできません。そのため、プラットフォームとしてできる最善の策は、優れた API とデフォルトを提供することです。

ウェブはメディア中心の傾向が強まっています。デザイナーやデベロッパーは、動画の新しい活用方法を次々と見つけています。たとえば、背景動画をデザイン要素として使用する場合、プラットフォーム間で一貫した動作を求めています。ミュートされた自動再生は、モバイルとパソコンの両方でこのような機能を有効にします。

詳細

  • ユーザー補助の観点から見ると、自動再生は特に問題となる可能性があります。Android 版 Chrome 53 以降では、自動再生を完全に無効にする設定が用意されています。メディア設定で [自動再生] を選択します。
  • この変更は audio 要素には影響しません。Android 版 Chrome では、音声の自動再生をミュートしてもあまり意味がないため、自動再生は引き続き無効になっています。
  • データ節約モードが有効になっている場合、自動再生は行われません。データセーバー モードが有効になっている場合、メディア設定で自動再生が無効になります。
  • ミュートされた自動再生は、表示されているドキュメント、iframe などで表示されている動画要素に対して機能します。
  • 新しい動作を利用するには、muted と autoplay の両方を追加する必要があります。simpl.info/video と simpl.info/video/muted を比較してください。

サポート

  • iOS 10 以降の Safari では、ミュートされた自動再生がサポートされています。
  • Android では、Firefox と UC Browser で自動再生（ミュートの有無を問わず）がすでにサポートされています。これらのブラウザでは、あらゆる種類の自動再生がブロックされません。

関連リソース