首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >chrome window.load~ .play()

问chrome window.load~ .play()
EN

Stack Overflow用户
提问于 2018-06-29 17:40:01
回答 3查看 793关注 0票数 2
代码语言:javascript
复制
window.onload = function() {
    document.getElementById("up").play();
    alert("k");
}

<audio id="up" src="./res/up.mp3" loop="loop"></audio>

嗨,我刚开始学习html&js,上面的代码在IE上运行得很好,但是只有警告发生在chrome上。这是正常的吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-29 18:08:28

这是因为chrome抛出了一个异常:

DOMException:元素没有支持的源。

代码语言:javascript
复制
  "code": 9,
  "name": "NotSupportedError",
  "message": "The element has no supported sources."

Chrome改变了它的政策,因为blocking roughly half of unwanted media autoplays

读:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

参考资料:

自动播放策略推出在M66稳定的音频和视频元素,并有效地阻止了大约一半不想要的媒体自动播放在Chrome。对于,自动播放策略将在M70中启动。这会影响到使用音频功能的web游戏、一些WebRTC应用程序和其他网页。开发人员需要更新他们的代码以利用策略。更多详细信息可以在下面的部分中找到。

代码语言:javascript
复制
Chrome's autoplay policies are simple:
  • 静音自动播放始终是允许的。
  • 如果:允许自动播放声音
    • 用户已经与域进行交互(单击、点击等)。
    • 在桌面上,用户的媒体参与度指数已经超过阈值,这意味着用户以前用声音播放视频。
    • 在手机上,用户已经将站点添加到自己的主屏幕上。

​

  • 顶部帧可以将自动播放权限委托给它们的iframes,以允许声音自动播放。

我已经编辑了您的代码以显示错误。

​

代码语言:javascript
复制
window.onload = function() {
    const playPromise = document.getElementById("up").play();
    // In browsers that don’t yet support this functionality,
    // playPromise won’t be defined.
    if (playPromise !== undefined) {
    playPromise.then(function() {
      // Automatic playback started!
    }).catch(function(error) {
        console.log(error);
       // Automatic playback failed.
       // Show a UI element to let the user manually start playback.
  });
}
    alert("k");
    
}
代码语言:javascript
复制
<audio id="up" src="http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Queen/Queen%20'Back%20Chat'.mp3" loop="loop"></audio>

​

票数 5
EN

Stack Overflow用户

发布于 2018-06-29 18:07:54

这是Chrome的自动播放策略的结果,它限制站点在用户与页面交互之前播放音频。

票数 0
EN

Stack Overflow用户

发布于 2018-06-29 18:26:31

总之,自2018年4月以来,Chrome中的autoplay是默认禁止的。这是为了保护用户不想听到的声音。更多信息。

但是,如果用户与页面交互(例如通过单击),那么是允许的,因此您可以将onload代码更改为单击。如下所示:

代码语言:javascript
复制
window.addEventListener("click", function(event) {
    document.getElementById("up").play();
    alert("k");
});

点击页面和walla。

希望能帮上忙。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51106932

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档