我有一个嵌入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);
});
});
所以,我的视频是自动播放+静音,并点击自定义图层我setVolume为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>