web-dev-qa-db-ja.com

「ユーザーが最初にドキュメントと対話しなかったために（約束どおりに）DOMException：play（）が捕捉されなかった」という処理方法。Chrome66搭載デスクトップで

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

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

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

ウェブサイトで自動的に再生を開始する広告が見つかりましたが、次のHTMLを使用しました。

<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>

それで、webkit-playsinline="true"、playsinline="true"、およびautoplay=""属性を<video>要素に追加するのと同じくらい簡単に、Chrome v66の自動再生ブロッカーを迂回できますか？これに何らかの悪影響がありますか？

javascriptgoogle-chromevideohtml5-video
65
Steven

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

だからあなたの現在のビデオ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アップデートがタブを止めさせてユーザーのタブにランダムなノイズを発生させようとしていると思います。そのため、ミュートされたプロパティによって自動再生が再び機能するようになります。

66
Joe
  1. chrome://flags/#autoplay-policyを開く
  2. 設定 ユーザーの操作は必要ありません
  3. Chromeを再起動
28
Ming

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

HTML

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

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

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

それで、例えば this fiddle を取ります。

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

まだロードしていない場合、クリックしないと実行されません。まだイベントが登録されていないためです。
しかし、 "Run" ボタンをクリックすると、親ドキュメント（jsfiddle.net）がユーザージェスチャーを受け取り、ビデオが再生されます。別の文書.

しかし、次のスニペットは、実際に Run code snippet ボタンをクリックする必要があるため、自動再生されます。

<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はそれより厳しい規則を持っており、ユーザーイベントハンドラ自体から<video>または<audio>要素に対して少なくとも1回はplay()メソッドを実際にプログラム的にトリガーする必要があることに注意してください。

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>

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

8
Kaiido

Mousemoveイベントリスナーを使用してみてください

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

document.body.addEventListener("mousemove", function () {
    audio.play()
})
3
時雨初

私にとって（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();
}
3
Eutrepe

更新

このテクニックがもううまくいかない場合 - 別の選択肢があります。短くて非常に静かな（-60db）オーディオを含めて、隠しボタンのクリックハンドラ内で再生することができます。その後、他のすべてのオーディオ/ビデオファイルは、直接のユーザー操作なしで再生することが許可されます。無音の音声を http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav から取得して、1/2秒以下にカットできます。

非常に簡単な解決策があります - あなたのページにBUTTONを追加し、見えないようにスタイルを設定してからbutton.click()メソッドの前にplay()メソッドを呼び出すだけです。

Chromiumバージョン70.0.3538.67（Official Build）（64ビット）の魅力のように動作します

var btn = document.getElementById('btn');
document.addEventListener(btn,myPlay,false);
btn.click();

function myPlay()
{
  document.getElementById('movie').play();
}
<video
    title="Advertisement" id="movie"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"
    ></video>
    <button type="button" style="z-index:-1;opacity:0;position: absolute;left:-1000px;" id="btn"></button>
2
IVO GELOV

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

0
Alarik

コードが期待どおりに動作するように、muted内にvideoElement属性を追加する必要があります。怒鳴る..

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

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

0
GNETO DOMINIQUE

私はAndroid携帯電話で遊んでいくつかの問題がありました。何度か試したところ、Data Saverがオンになっていると自動再生が行われないことがわかりました。

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

出典

0
Ido

オーディオファイルを再生しようとしたときと同様のエラーが発生しました。最初は動作していましたが、約束が解決したときに再レンダリングをトリガするためにChangeDetectorのmarkForCheckメソッドを同じ関数で使用し始めたときに動作しなくなりました（ビューのレンダリングに問題がありました）。

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

0
King James Enejo

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>
0
Bernesto