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

Sam Dutton

動画のミュート自動再生は、バージョン 53 以降の Android 版 Chrome でサポートされています。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 を返します。この Promise を使用して、ミュートされたプログラム再生が有効になっているかどうかを確認できます。例については、simpl.info/video/scripted をご覧ください。

変更の理由

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

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

次の動画とアニメーション GIF を比較してください。

動画の再生をクリップする。

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

Chrome などのブラウザ ベンダーは、ユーザーの帯域幅に細心の注意を払っています。多くのユーザーにとって、多くの状況で、貧弱な接続よりも高いデータ通信料が、アクセス数増加の足かせになることがよくあります。回避策が広く普及しているため、ミュートされた自動再生をブロックすることはできません。そのため、優れた API とデフォルトを提供するというのが、プラットフォームでできる最善の方法です。

ウェブはますますメディア中心の存在になってきています。デザイナーとデベロッパーは、動画の新しい活用方法を常に模索しています。また、デザイン要素として背景動画を使用する場合など、プラットフォーム間で動作が統一されることを望んでいます。ミュートされた自動再生を使用すると、このような機能をモバイルとパソコンの両方で有効にできます。

詳細

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

サポート

  • ミュートした自動再生は、iOS 10 以降の Safari でサポートされています。
  • ミュートされているかどうかにかかわらず、自動再生は Android の Firefox と UC ブラウザですでにサポートされています。これらのブラウザでは、いかなる種類の自動再生もブロックされません。

補足説明