play () не удалось, потому что пользователь не взаимодействовал с документом первым - событие щелчка мышью с помощью API Vimeo - PullRequest
Новая
       3

play () не удалось, потому что пользователь не взаимодействовал с документом первым - событие щелчка мышью с помощью API Vimeo

0 голосов
/ 14 февраля 2019

Я предполагаю, что событие onclick считается взаимодействующим с документом, поэтому не уверен, почему выдается ошибка автозапуска

Uncaught (в обещании) 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";
});
<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>

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Мне не хватало allow = "autoplay" в атрибутах iframe 

<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>
0 голосов
/ 14 февраля 2019

Первая ошибка: 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>
...