Vimeo 自动播放静音视频和取消静音不起作用

Question

我有一个带有自动播放和静音选项的嵌入 VIMEO 视频。我正在尝试制作一个自定义功能，让用户通过自定义按钮取消我的视频静音。它工作正常，但在 Chrome 中（尤其是在 Android 中），因为它给了我这个错误：

Unmuting failed and the element was paused instead because the user didn't interact with the document before.

但是如果你阅读他们的文档，它会说：

吸引用户的一种很酷的方法是使用静音自动播放并让他们选择取消静音（请参阅下面的代码片段）。一些网站已经有效地做到了这一点，包括 Facebook、Instagram、Twitter 和 YouTube。

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
   unmuteButton.addEventListener('click', function() {
   video.muted = false;
 });
</script>

那么，有什么问题呢？我的代码看起来像：

var options = {
id: 316816937,
width: 990,
loop: true,
autoplay: true,
mute: true,
};

var player = new Vimeo.Player('embeddedVideo', options);

player.setVolume(0);

player.on('play', function() {
    console.log('played the video!');
});

$(".videoWrapper .cover").click(function () {
    $(this).addClass("close");


    player.ready().then(function () {
    player.setVolume(1);
});

});

所以，我的视频是自动播放+静音，点击自定义层我将音量设置为 1。所以我不知道为什么它给了我上面说的错误。

谢谢！

Answer 1

我今天遇到了这个问题。对我allow="autoplay"有用的解决方案是将属性添加到 Vimeo 的<iframe>标签中，如下所示：

<iframe id="video" src="https://player.vimeo.com/video/<vimeoID>?background=1" width="640" height="360" style="border:0" allow="autoplay" allowFullScreen></iframe>

为了取消静音工作，它必须由用户触发。所以我添加了一个取消静音按钮：

<span data-vimeo="unmute">Unmute</span>

使用 Vimeo 播放器 API：

<script src="https://player.vimeo.com/api/player.js"></script>

然后在 JavaScript 中，使用 jQuery 附加一个点击处理程序：

$("[data-vimeo=unmute]").click(function() {
    var player = new Vimeo.Player($("#video")[0]);
    player.setMuted(false);
});