web-dev-qa-db-ja.com

Uncaught（約束）DOMExceptionの処理方法：play（）要求はpause（）の呼び出しによって中断されました

以下はブラウザでwav形式のオーディオを再生できるaspxページのコードですが、現在のコードではChromeブラウザでwavオーディオを再生できませんが、Firefoxでは動作します。この例外をどのように処理できますか？

<script>
    window.onload = function () { document.getElementById("audio").play(); }
    window.addEventListener("load", function () { document.getElementById("audio").play(); });
</script>

<body>
    <audio id='audio' controls autoplay>
        <source src="Sounds/DPM317.wav" type="audio/wav" />
        Your browser does not support the audio element.
    </audio>
</body>
javascriptasp.netwav
37
user7076604

Chromeの場合、自動再生ポリシーが変更されたため、 here について読むことができます。

var promise = document.querySelector('audio').play();

if (promise !== undefined) {
    promise.then(_ => {
        // Autoplay started!
    }).catch(error => {
        // Autoplay was prevented.
        // Show a "Play" button so that user can start playback.
    });
}
37
Vladislav Nosenko

これがまだあなたにとって実際のものであるかどうかはわかりませんが、私はまだコメントを残しているので、他の誰かに役立つかもしれません。私は同じ問題を抱えていましたが、 bountysource.com/issues/ で@dighanが提案した解決策で解決しました。

だからここに私の問題を解決したコードがあります：

var media = document.getElementById("YourVideo");
const playPromise = media.play();
if (playPromise !== null){
    playPromise.catch(() => { media.play(); })
}

それでもコンソールにエラーがスローされますが、少なくともビデオは再生されています:)

14
Sharpey

Catchブロックでこのようなコールバックを使用してみてください。

document.getElementById("audio").play().catch(function() {
    // do something
});
10
zapping
  1. 新しいブラウザはすべて、ミュートされた状態でのみ自動再生されるビデオをサポートしていますので、

<video autoplay muted="muted" loop id="myVideo"> <source src="https://w.r.glob.net/Coastline-3581.mp4" type="video/mp4"> </video>

このようなもの

  1. サイトがhttpsで実行されている場合、動画のURLはSSLステータスと一致する必要があり、動画URLもhttpsでHTTPでも同じである必要があります
10
Shobhit Verma

muted="muted"プロパティをHTML5タグに追加すると問題が解決しました

6
Akhtarujjaman Shuvo

Chromeバージョン75を使用しています。

ミュートされたプロパティを動画タグに追加します

<video id="myvid" muted>

次に、javascriptを使用して再生し、ミュートをfalseに設定します

var myvideo = document.getElementById("myvid");
myvideo.play();
myvideo.muted = false;

編集：ユーザーの操作が必要です（少なくともページ内の任意の場所をクリックして作業します）

0
Yusufmm

私は2番目のShobhit Vermaを追加します。彼の投稿では、Chrome（私にとってはOpera）では、自動再生を成功させるためにプレイヤーをミュートする必要があると述べました...皮肉なことに、ロード後に音量を上げても再生されます...コードに挿入された目に見えないフレームを無視するすべてのポップアップ防止メカニズムのようです... php-echoed htmlおよびjavascriptは：10秒setTimeoutボリュームを最大に上げるbodyタグのonLoad、自動再生とmuted = 'muted'を使用したビデオ（ええ、$ muted_code部分は= "muted = 'muted"）

echo "<body style='margin-bottom:0pt; margin-top:0pt; margin-left:0pt; margin-right:0pt' onLoad=\"setTimeout(function() {var vid = document.getElementById('hourglass_video'); vid.volume = 1.0;},10000);\">";
    echo "<div id='hourglass_container' width='100%' height='100%' align='center' style='text-align:right; vertical-align:bottom'>";
    echo "<video autoplay {$muted_code}title=\"!!! Pausing this video will immediately end your turn!!!\" oncontextmenu=\"dont_stop_hourglass(event);\" onPause=\"{$action}\" id='hourglass_video' frameborder='0' style='width:95%; margin-top:28%'>";
0
Phrank