「キャッチされていない（約束された）DOMException：ユーザーが最初にドキュメントを操作しなかったため、play（）が失敗しました」の処理方法 Chrome 66を搭載したデスクトップ上で

エラーメッセージが表示されます。

キャッチされていない（約束どおり）DOMException：play（）は、ユーザーが最初にドキュメントを操作しなかったために失敗しました。

..Chromeバージョン66を使用してデスクトップでビデオを再生しようとしたとき。

次のHTMLを使用して、Webサイトで自動的に再生を開始する広告を見つけました。

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

そうでパッシングと同じように簡単に追加するだけ本当にクロームV66の自動再生ブロッカーをあるwebkit-playsinline="true"、playsinline="true"とautoplay=""に属性を<video>要素？これにマイナスの影響はありますか？

chrome 66の更新後にhtml 5要素の自動再生を機能させるには、mutedプロパティをvideo要素に追加するだけです。

現在のビデオHTML

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay=""></video>

ちょうど必要 muted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay="true"
    muted="muted"></video>

Chrome 66のアップデートは、ユーザーのタブにランダムなノイズを生成するタブを停止しようとしていると思います。そのため、ミュートされたプロパティは自動再生を再び機能させます。

私が見つけた最良の解決策は、ビデオをミュートすることです

HTML

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>

1. 開いた chrome://settings/content/sound
2. 設定しないんユーザのジェスチャが必要です
3. Chromeを再起動します

手元の質問に答える...
いいえ、これらの属性を用意するだけでは不十分です。オーディオ付きのメディアを自動再生するには、ドキュメントにユーザージェスチャーを登録する必要があります。

ただし、この制限は非常に弱いものです。親ドキュメントでこのユーザージェスチャーを受信し、ビデオがiframeから読み込まれた場合、再生できます...

たとえば、このフィドルを考えてみましょう。

<video src="myvidwithsound.webm" autoplay=""></video>

最初にロードし、どこにもクリックしないと、イベントはまだ登録されていないため、実行されません。
ただし、「実行」ボタンをクリックすると、親ドキュメント（jsfiddle.net）はユーザージェスチャーを受け取り、技術的に別のドキュメントにロードされていても、ビデオが再生されます。

ただし、次のスニペットでは、[ コードスニペットを実行 ]ボタンをクリックする必要があるため、自動再生されます。

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

これは、メインページにユーザージェスチャーを提供したため、広告を再生できた可能性があることを意味します。

ここで、SafariとMobile Chromeにはそれよりも厳しいルールがあり、ユーザーイベントハンドラ自体からのまたは要素に対してplay()プログラムでメソッドを少なくとも1回実際にトリガーする必要があることに注意してください。<video><audio>

btn.onclick = e => {
  // mark our MediaElement as user-approved
  vid.play().then(()=>vid.pause());
  // now we can do whatever we want at any time with this MediaElement
  setTimeout(()=> vid.play(), 3000);
};

<button id="btn">play in 3s</button>
<video
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>

また、オーディオが不要な場合は、メディアに添付しないでください。ビデオトラックのみのビデオも自動再生が許可され、ユーザーの帯域幅の使用量が削減されます。

私（Angularプロジェクト）の場合、このコードは役に立ちました：

HTMLでは追加する必要があります autoplay muted

JS / TSの場合

playVideo() {
    const media = this.videoplayer.nativeElement;
    media.muted = true; // without this line it's not working although I have "muted" in HTML
    media.play();
}

mousemoveイベントlisentnerを使用してみてください

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})

DOM要素を拡張し、エラーを処理し、段階的に低下させる

以下では、プロトタイプ関数を使用してネイティブDOM再生関数をラップし、その約束を取得して、ブラウザーが例外をスローした場合に再生ボタンに低下します。この拡張機能は、ブラウザーの欠点に対処し、ターゲット要素の知識を持つすべてのページでプラグアンドプレイです。

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

私の場合、私はこれをしなければなりませんでした

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

Chromeで動画を自動再生またはjs（video.play（））で再生するには、ユーザーの操作が必要です。しかし、相互作用はいつでもどのような種類のものでもかまいません。ページでランダムをクリックするだけで、ビデオが自動再生されます。その後、「ビデオの自動再生を有効にする」というボタン（Chromeブラウザのみ）を追加して解決しました。ボタンは何も実行せず、クリックするだけで、以降の動画に必要なユーザー操作になります。

オーディオファイルを再生しようとしたときに、同様のエラーが発生しました。最初はmarkForCheck機能していましたが、同じ機能でChangeDetectorのメソッドの使用を開始すると機能が停止し、Promiseが解決されたときに再レンダリングをトリガーしました（ビューのレンダリングに問題がありました）。

に変更するmarkForCheckとdetectChanges、再び機能し始めました。私は本当に何が起こったのか説明できません、私はこれをここに落とすことを考えました、おそらくそれは誰かを助けるでしょう。

コードが期待どおりに機能するように、muted内部に属性を追加しておく必要がありますvideoElement。下を見て..

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

ソースとして有効なビデオリンクを追加することを忘れないでください

Androidフォンでの再生で問題が発生しました。何度か試した後、データセーバーがオンのときは自動再生がないことがわかりました。

データセーバーモードが有効になっている場合、自動再生はありません。データセーバーモードが有効になっている場合、メディア設定で自動再生が無効になります。

ソース

アドレスバーにChrome：// flagsと入力します

検索：自動再生

自動再生ポリシー

オーディオまたはビデオの自動再生を許可するかどうかを決定するときに使用されるポリシー。

– Mac、Windows、Linux、Chrome OS、Android

「に設定してくださいませユーザージェスチャが必要とされません」

Chromeを再起動すれば、コードを変更する必要はありません