ウェブ上での音声と動画の自動再生は強力な機能であり、プラットフォームによってさまざまな制限を受けます。現在、ほとんどのパソコンのブラウザでは、ユーザーの操作なしでウェブページが JavaScript を介して <video> または <audio> の再生を常に開始できるようになっています。ただし、ほとんどのモバイル ブラウザでは、JavaScript によって開始される再生が行われる前に、明示的なユーザー操作が必要になります。これにより、帯域幅の料金を支払っているモバイル ユーザーや公共の環境にいるモバイル ユーザーが、ページを明示的に操作せずに誤ってメディアのダウンロードや再生を開始することを防止できます。
これまで、再生を開始するためにユーザー操作が必要かどうかを判断することや、（自動）再生が試行されて失敗したときに発生するエラーを検出することが困難でした。さまざまな回避策がありますが、理想的とは言えません。この不確実性に対処するための基礎となる play() メソッドの改善は以前から行われていましたが、現在ウェブ プラットフォームに実装され、Chrome 50 で初期実装が行われています。
<video> 要素または <audio> 要素に対して play() 呼び出しを行うと、Promise が返されるようになりました。再生が成功すると Promise が実行され、再生が失敗した場合は、失敗を説明するエラー メッセージとともに Promise が拒否されます。これにより、次のような直感的なコードを作成できます。
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}
新しい Promise ベースのインターフェースでは、play() メソッドが成功したかどうかを検出できるだけでなく、play() メソッドがいつ成功したかを判別できます。状況によっては、ウェブブラウザが再生の開始を遅らせる場合があります。たとえば、パソコンの Chrome では、タブが表示されるまで <video> の再生を開始しません。Promise は、再生が実際に開始されるまで実行されません。つまり、then() 内のコードはメディアが再生されるまで実行されません。play() が成功したかどうかを判断する以前の方法（playing イベントを一定時間待機する、発生しない場合は失敗と判断するなど）は、遅延再生のシナリオで偽陰性の影響を受けやすくなります。
この新機能のライブサンプルを公開しています。この Promise ベースのインターフェースをサポートする Chrome 50 などのブラウザで表示してください。このページにアクセスすると、自動的に音楽が再生されますのでご注意ください。（もちろん、そうではありません）。
危険ゾーン
<video> 内の <source> により、play() Promise が拒否されなくなります。
<video src="not-existing-video.mp4"\> の場合、動画が存在しないため、play() Promise は期待どおりに拒否されます。<video><source src="not-existing-video.mp4" type='video/mp4'></video> の場合、play() Promise は拒否されません。これは、有効なソースがない場合にのみ発生します。