自动播放后自动打开视频音量的Javascript
Posted
技术标签:
【中文标题】自动播放后自动打开视频音量的Javascript【英文标题】：Javascript to automatically turn on sound volume on video after autoplay 【发布时间】：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));
这可以在视频运行时在控制台中使用，但如果将其放入脚本中则会崩溃。
任何人都可以想出任何方法来自动打开声音吗？如果电影开始后有一点延迟，那也没关系。
【问题讨论】：
【参考方案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();
);
【讨论】：
以上是关于自动播放后自动打开视频音量的Javascript的主要内容，如果未能解决你的问题，请参考以下文章