javascript play() 失败，因为用户没有先与文档交互 - 在使用 Vimeo API 的点击事件上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54680856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
play() failed because the user didn't interact with the document first - on click event using Vimeo API
提问by froggomad
I'm assuming an onclick event counts as interacting with the document, so not sure why an autoplay error is being thrown
我假设 onclick 事件算作与文档的交互，所以不确定为什么会抛出自动播放错误
Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.
Uncaught (in promise) NotAllowedError: play() 失败，因为用户没有先与文档交互。
const playbtn = document.getElementById('playbtn');
const player = document.getElementById('video-player');
const vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
playbtn.style.display = "none";
vimeoPlayer.play();
}
vimeoPlayer.on('pause', function() {
playbtn.style.display = "block";
});
vimeoPlayer.on('play', function() {
playbtn.style.display = "none";
});i {
position: absolute;
color: white;
}
.fa-play-circle {
display: block;
position: absolute;
left: 50%;
top: 50%;
font-size: 20rem;
-webkit-transform: translateX(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 2;
color: white;
color: rgba(255,255,255,0.75);
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo.com/api/player.js"></script>
<div id="video-outer-full">
<div id="video-inner">
<i class="far fa-play-circle" id="playbtn"></i>
<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>回答by froggomad
I was missing allow="autoplay" in iframe's attributes
我在 iframe 的属性中缺少 allow="autoplay"
<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
回答by lewa9
First mistake is it should be vimeoPlayer.play();The second mistake you have forgot the "in line 5 of your first code.
I tried the code then and it works. But I don't understand why you get this error message.
第一个错误应该是vimeoPlayer.play();第二个错误您忘记了"第一个代码的第 5 行。然后我尝试了代码并且它有效。但我不明白为什么您会收到此错误消息。
var player = document.getElementById('video-player');
var vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
playbtn.style.display = "none";
vimeoPlayer.play();
}
vimeoPlayer.on('pause', function() {
playbtn.style.display = "block";
});
vimeoPlayer.on('play', function() {
playbtn.style.display = "none";
});<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo.com/api/player.js"></script>
<div id="video-outer-full">
<div id="video-inner">
<i class="far fa-play-circle" id="playbtn"></i>
<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>