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

【问题标题】：Vimeo autoplay muted video and unmute not workingVimeo 自动播放静音视频和取消静音不起作用
【发布时间】：2019-07-09 09:56:11
【问题描述】：

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

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

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

吸引用户的一个很酷的方法是使用静音自动播放并让他们选择取消静音（参见下面的代码 sn-p）。一些网站已经有效地做到了这一点，包括 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。所以我不知道为什么它会给我上面所说的错误。

谢谢！

【问题讨论】：

标签： video vimeo autoplay

【解决方案1】：

我在 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>

【讨论】：

【解决方案2】：

我今天遇到了这个问题。对我有用的解决方案是将 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);
});

【讨论】：