如何处理未捕获（承诺）DOMException：播放（）请求被暂停（）调用中断
Posted
技术标签:
【中文标题】如何处理未捕获（承诺）DOMException：播放（）请求被暂停（）调用中断【英文标题】：How to handle Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 【发布时间】：2017-03-09 16:07:50 【问题描述】：下面是我在 aspx 页面中的代码，允许在浏览器中播放 wav 格式的音频，但使用我当前的代码，我无法在 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>
【问题讨论】：
您为什么在页面加载时尝试运行play() 两次？删除其中一条线以改善生活
【参考方案1】：
对于 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.
);
【讨论】：
【参考方案2】：我不知道这对你来说是否仍然是真实的，但我仍然留下我的评论，所以也许它会帮助其他人。 我有同样的问题，@dighan 在bountysource.com/issues/ 上提出的解决方案 帮我解决了。
所以这是解决我问题的代码：
var media = document.getElementById("YourVideo");
const playPromise = media.play();
if (playPromise !== null)
playPromise.catch(() => media.play(); )
它仍然会向控制台抛出错误，但至少视频正在播放:)
【讨论】：
【参考方案3】：尝试在 catch 块中使用这样的回调。
document.getElementById("audio").play().catch(function()
// do something
);
【讨论】：
如果 play 没有返回承诺，它将中断（目前，我相信 play() 只在 Chrome 中返回承诺） 我再次收到此未捕获的类型错误：无法读取 null 的属性“播放” 你确定你的 DOM 在被调用播放时已经加载了吗？ document.addEventListener("DOMContentLoaded", function (event) var audio = document.getElementsByTagName("audio")[0]; audio.pause(); ); 我用这种方式滴滴没有错误，但没有播放音频 window.onload = function () document.getElementById("audio").play().catch(function() console.log('hello exception'); );跨度> 【参考方案4】：-
所有新浏览器都支持仅静音自动播放视频
所以请把
<video autoplay muted="muted" loop id="myVideo">
<source src="https://w.r.glob.net/Coastline-3581.mp4" type="video/mp4">
</video>
像这样的
-
如果您的网站使用 https 运行，则视频 URL 应与 SSL 状态匹配，那么视频 URL 也应为 https，对于 HTTP 也是如此
【讨论】：
【参考方案5】：将muted="muted" 属性添加到 html5 标记解决了我的问题
【讨论】：
【参考方案6】：我使用的是 Chrome 版本 75。
将静音属性添加到视频标签
<video id="myvid" muted>
然后使用javascript播放它并将静音设置为false
var myvideo = document.getElementById("myvid");
myvideo.play();
myvideo.muted = false;
编辑：需要用户交互（至少点击页面中的任意位置才能工作）
【讨论】：
【参考方案7】：我第二个 Shobhit Verma，我有一点要补充：在他的帖子中，他告诉在 Chrome（我自己的 Opera）中，玩家需要静音才能使自动播放成功......具有讽刺意味的是，如果加载后提高音量，它仍然会播放... 就像所有那些忽略不可见框架的反弹出窗口机制滑入您的代码一样...... php-echoed html 和 javascript 是： 10 秒 setTimeout onLoad 将音量增加到最大的 body 标签，自动播放视频和 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_codetitle=\"!!! 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%'>";
【讨论】：
【参考方案8】：就我而言，我必须等待用户交互，因此我设置了一个 click 或 touchend 监听器。
const isMobile = navigator.maxTouchPoints || "ontouchstart" in document.documentElement;
function play()
audioEl.play()
document.body.addEventListener(isMobile ? "touchend" : "click", play, once: true );
【讨论】：
以上是关于如何处理未捕获（承诺）DOMException：播放（）请求被暂停（）调用中断的主要内容，如果未能解决你的问题，请参考以下文章