web-dev-qa-db-fra.com

play () a échoué car l'utilisateur n'a pas interagi d'abord avec le document - événement sur clic à l'aide de l'API Vimeo

Je suppose qu'un événement onclick compte comme une interaction avec le document, donc je ne sais pas pourquoi une erreur de lecture automatique est générée

UnCaught (promis) NotAllowedError: play () a échoué car l'utilisateur n'a pas interagi avec le document en premier.

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>
javascriptvimeo
3
froggomad

Il me manquait allow = "autoplay" dans les attributs de 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>
10
froggomad

La première erreur est que ce devrait être vimeoPlayer.play(); La deuxième erreur que vous avez oublié le " à la ligne 5 de votre premier code. J'ai alors essayé le code et ça marche. Mais je ne comprends pas pourquoi vous obtenez ce message d'erreur.

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>
2
lewa9