自动播放后自动打开视频音量的Javascript答案

【问题标题】：Javascript to automatically turn on sound volume on video after autoplay自动播放后自动打开视频音量的Javascript
【发布时间】：2021-09-20 02:04:52
【问题描述】：

我正在编写一个在线心理学实验。参与者必须观看一部短片并记住一些信息。要分析数据，每个人都必须看同一部电影，所以如果人们暂停它就会有问题。因此，我禁用了所有控件并自动播放视频。

在 Chrome 上，这仅在播放器开始静音时才有效。所以我想在视频开始后立即自动打开声音。

我正在尝试将以下 html 用于托管 here 的视频

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no">
  </head>

  <body style="width: 1000px; height: 800px; background-color: grey;">

    <div class="container">
      <div id="video-player"></div>
    </div>
    <script src="https://muse.ai/static/js/embed-player.min.js"></script>

    <script>
      const player = MusePlayer({
        container:'#video-player',
        video: 'qhRjheS',
        width: 720,
        height: 480,
        autoplay: true,
        loop: true,
        volume: 0,
        style: 'no-controls',
        shortcuts: false,
        css: '*{pointer-events:none!important;}',
      });
      player.on('timeupdate', function(time) {player.setVolume(100)});
    </script>

  </body>
</html>

这一行的问题所在：

player.on('timeupdate', function(time) {player.setVolume(100)});

这可以在视频运行时在控制台中使用，但如果将其放入脚本中则会崩溃。

任何人都可以想出任何方法来自动打开声音吗？如果电影开始后有一点延迟，那也没关系。

【问题讨论】：

标签： javascript html controls video-streaming html5-video

【解决方案1】：

作为一个实验（不是一个完整的解决方案），我会尝试这样的事情：

setTimeout(() => player.on('timeupdate', () => player.setVolume(100)), 3000);

（我冒昧地更改了您的代码以使用箭头函数。）

我怀疑播放器没有立即准备好设置音量，需要一点时间才能完全设置好并准备好开始播放。我不熟悉 MusePlayer，但我会查看文档，看看除了'timeupdate' 事件之外是否还有其他事件，在为'timeupdate' 设置侦听器之前，您希望先接收这些事件事件。

【讨论】：

谢谢，这个建议很有帮助。视频运行了 3 秒，然后暂停，控制台中出现以下警告：“embed-player.min.js:1 取消静音失败，元素暂停，因为用户之前没有与文档交互。 [链接](developers.google.com/web/updates/2017/09/…" 我猜取消静音被阻止了？有没有办法解决？
我很容易将这段代码粘贴到 CodePen 中并自己尝试一下。我得到了这个错误，而不是崩溃：“取消静音失败，元素被暂停，因为用户之前没有与文档交互。”很可能 Chrome 正在保护用户免受未经用户许可（非常令人讨厌）开始大声播放的广告的影响。这对你来说可能是个问题。

【解决方案2】：

感谢 kshetline 的输入。 chrome阻止自动播放对我来说确实是个问题。但是，添加事件侦听器以在单击时开始播放电影是一种解决方法。我想自动启动是不可能的，但这样一来，电影开始后所有其他控件仍然保持禁用状态。

document.body.addEventListener("click", function () {
    player.play();
});

【讨论】：