Question

下面是我在aspx页面中的代码，允许在浏览器中播放wav格式的音频但是使用我当前的代码我无法在Chrome浏览器中播放wav音频，但它可以在mozilla 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>

Answer 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.
    });
}

Answer 2

所有新浏览器支持的视频仅在静音的情况下即可自动播放所以请放

<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相同。

Answer 3

我不知道这对你来说是否仍然存在，但我仍然留下我的评论，所以也许它会帮助别人。我有同样的问题，@ dighan在bountysource.com/issues/提出的解决方案为我解决了。

所以这是解决我问题的代码：

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

它仍会向控制台抛出错误，但至少视频正在播放：）

Answer 4

尝试使用catch块进行这样的回调。

document.getElementById("audio").play().catch(function() {
    // do something
});

Answer 5

在HTML5标签中添加muted="muted"属性可以解决我的问题

Answer 6

我正在使用Chrome版本75。

将静音属性添加到视频标签

<video id="myvid" muted>

然后使用javascript播放并将其设置为false

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

编辑：需要用户交互（至少单击页面上的任何位置才能工作）

Answer 7

我是第二位Shobhit Verma，我要补充一点：在他的帖子中，他告诉我们，在Chrome（我自己的歌剧）中，玩家需要静音才能使自动播放成功...而且具有讽刺意味的是，如果加载后提高音量，它仍会播放... 就像所有那些忽略不可见框架的反弹出机制一样，它会滑入您的代码中... php回显的html和javascript是：正文标签的10秒钟setTimeout onLoad可将音量提高到最大，视频具有自动播放功能，并且静音=“静音”（是的$ 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%'>";

Answer 8

就我而言，我不得不等待用户交互，因此我设置了click或touchend侦听器。

const isMobile = navigator.maxTouchPoints || "ontouchstart" in document.documentElement;

function play(){
    audioEl.play()
}


document.body.addEventListener(isMobile ? "touchend" : "click", play, { once: true });

如何处理Uncaught（在promise中）DOMException：play（）请求被pause（）调用中断

8 个答案: