DOM

：

：

HTMLMediaElement.play() メソッド

　編集：2022.11.03 by T.A.

[Edge]。→、、

HTMLMediaElement の再生を開始しようとします。再生が正常に開始されたときに解決される Promise を返します。

許可の問題などの理由で再生を開始しないと、Promise が拒否されます。

構文
HTMLMediaElement.play()
HTMLMediaElement HTMLMediaElement。
戻り値

再生開始時に解決される Promise、または、何らかの理由で再生を開始できない場合は拒否されます。

注： 2019年より前にリリースされたブラウザーは、play() から値を返さない場合があります。

例外／mdn

promiseの拒否ハンドラーは、（従来の例外がスローされるのとは対照的に）唯一の入力パラメーターとして渡された例外名を使用して呼び出されます。考えられるエラーは次のとおりです。

NotAllowedError／DOMException
ユーザー エージェント（ブラウザー）またはオペレーティング システムが現在のコンテキストまたは状況でメディアの再生を許可しない場合に提供されます。これは、たとえば、発生する可能性があります。ブラウザーがユーザーに「再生」ボタンをクリックしてメディアの再生を明示的に開始するように要求する場合。
NotSupportedError／DOMException
メディアソースの場合に提供（たとえば、MediaStream、MediaSource、Blob、File としての何れかで指定される場合があります）は、サポートされているメディア形式を表していません。

その他の例外が報告される場合がありますが、ブラウザの実装の詳細に応じて、メディア プレーヤーの実装など。

使用上の注意／mdn

「自動再生」という用語は通常、ロードされるとすぐにメディアの再生を開始するページを指すと考えられていますが、Web ブラウザーの自動再生ポリシーは、play() の呼び出しを含む、スクリプトによって開始されるメディアの再生にも適用されます。

ユーザー エージェントがメディアの自動再生またはスクリプト開始の再生を許可しないように構成されている場合、play() を呼び出すと、返された Promise は NotAllowedError ですぐに拒否されます。この状況に対処するために、Web サイトを準備する必要があります。たとえば、サイトは、再生が自動的に開始されたと想定するユーザー インターフェイスを提示するべきではありません。ただし、代わりに、返されたプロミスが実行されたか拒否されたかに基づいてユーザー インタフェースを更新する必要があります。詳細については、以下の例を参照してください。

mdn： 注： play() メソッドにより、ユーザーはメディアを再生するための許可を与えるように求められる場合があります。その結果、返されたプロミスが解決されるまでに遅延が発生する可能性があります。コードが即時の応答を期待していないことを確認してください。

mdn： 自動再生と自動再生のブロックに関するさらに詳細な情報については、「」の記事を参照してください。

例
mdn

この例は、再生が開始されたことを確認する方法と、ブロックされた自動再生を適切に処理する方法を示しています： 

let videoElem = document.getElementById("video");
let playButton = document.getElementById("playbutton");

playButton.addEventListener("click", handlePlayButton, false);
playVideo();

async function playVideo() {
  try {
    await videoElem.play();
    playButton.classList.add("playing");
  } catch(err) {
    playButton.classList.remove("playing");
  }
}

function handlePlayButton() {
  if (videoElem.paused) {
    playVideo();
  } else {
    videoElem.pause();
    playButton.classList.remove("playing");
  }
}

この例では、ビデオの再生は非同期 playVideo() 関数によってオフとオンが切り替えられます。ビデオを再生しようとしますが、成功すると、playButton 要素のクラス名が「playing」に設定されます。再生が開始されない場合は、playButton 要素のクラスがクリアされます。デフォルトの外観に戻します。これにより、play() によって返される Promise の解決または拒否を監視することにより、再生ボタンが実際の再生状態と一致することが保証されます。

この例を実行すると、まず、再生のオンとオフを切り替えるために使用される <video> 要素と <button> への参照を収集します。次に、再生トグル ボタンのクリック イベントのイベント ハンドラーを設定し、playVideo() を呼び出して自動的に再生を開始しようとします。

この例は、Glitchでリアルタイムで試してみるかリミックスすることができます。

HTML： 

<VIDEO id=IdTest src="../../Sample/Eizou_M.mp4" controls style="width:200px"></VIDEO>

JavaScript： 

D=IdTest.play();  //＝[object]：[object Promise]

IdTest.src="../../Sample/Eizou_M.mpg";  //再生できないタイプ。
D=IdTest.play();  //＝[object]：[object Promise]
プロミス受け取り

HTML： 

<VIDEO id=IdTest src="../../Sample/Eizou_M.mp4" controls style="width:200px"></VIDEO><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

async function playVideo(){  //再生の処理：
  try{
    await IdTest.play();      //再生をさせてみてOKを待つ。
    IdLog.innerHTML="再生中";
  }catch(e){                  //拒否された：
    IdLog.innerHTML="再生できません";
  }
}
//IdTest.src="../../Sample/Eizou_M.mpg";  //再生できないファイル。
playVideo();  //再生。

→async function…、await。

テスト