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

});

因此，我的视频具有自动播放功能和静音功能，然后单击我将Volume设置为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);
});

Answer 2

我在Chrome中遇到同样的问题，涉及取消VIMEO api播放器的静音。最终这对我有用：

<button onclick="unmute()">
    UNMUTE
</button>
<div id="vimeo-player1"> </div>
<script>
    var options = {
        id: 194500280,
        background: true
    };
    var vid1 = new Vimeo.Player('vimeo-player1', options);
</script>
<script>
    function unmute() {
        vid1.setVolume(1);
    };  
</script>

Vimeo自动播放静音的视频，并且取消静音无法正常工作

2 个答案: