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

Chrome for Android のバージョン 53 以降は、動画のミュート状態での自動再生がサポートされています。autoplaymuted の両方が設定されている場合、動画要素が表示された時点で自動的に再生が開始されます。また、ミュートされた動画の再生は play() を使用して実用的な方法で開始できます。これまで、モバイルでの再生は、ミュート状態にかかわらず、ユーザーの操作によって開始される必要がありました。

<video 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 の変更により、WebGL の再生を制御するなど、DOM で作成されていない video 要素で play() を使用可能にすることもできます。

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

変更の理由

Android 版 Chrome の以前のバージョンでは、自動再生が無効化されていました。これは、混乱を招き、大量のデータを消費し、多くのユーザーが好まないためです。

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

次のものを比較してください。1 つ目は動画、2 つ目はアニメーション GIF です。

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

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

Chrome や他のブラウザ ベンダーは、ユーザーの帯域幅に細心の注意を払っています。多くの状況において、データコストが高いことが、不安定な接続よりもアクセスの大きな障壁となることがよくあります。回避策が多用されるため、ミュートされた自動再生はブロックできません。そのため、適切な API とデフォルトを提供することがプラットフォームで実現できます。

ウェブのメディア中心の動きがますます拡大デザイナーやデベロッパーは、予期せぬ動画の新しい使い方を模索し続けており、デザイン要素として背景動画を使用する場合など、プラットフォーム間で一貫した動作を求めています。ミュートされた自動再生を使用すると、モバイルとパソコンの両方で同様の機能を利用できます。

細かい点

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

サポート

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

補足説明