时间戳

首页 > 解决方案 > Vimeo 自动播放静音视频和取消静音不起作用

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

问题描述

我有一个带有自动播放和静音选项的嵌入 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。所以我不知道为什么它会给我上面所说的错误。

谢谢！

标签： videovimeoautoplay

解决方案

我今天遇到了这个问题。对我有用的解决方案是将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 中，附加一个带有 jQ​​uery 的点击处理程序：

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

推荐阅读