Toniq
Toniq

Reputation: 4996

Vimeo api play failed because the user didn't interact with the document first

Vimeo player will now play even with allow="autoplay" attribute, check jsfiddle console error, click small icon play button:

https://jsfiddle.net/0vfLtdm8/

var player = document.getElementById('video-player');
var vimeoPlayer = new Vimeo.Player(player);

playbtn.onclick = function() {
  vimeoPlayer.play();
}
vimeoPlayer.on('error', function(error) {
  console.log(error);	
});
<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 allow="autoplay"></iframe>
  </div>
</div>

Upvotes: 1

Views: 1802

Answers (1)

luwes
luwes

Reputation: 884

@Toniq this is an issue specific to jsfiddle and codepen like services.

On those test pages they wrap the user defined test content in an iframe which doesn't have the allow="autoplay" which prevents the play() action from happening.

enter image description here

Also the Vimeo player iframe has to have the allow="autoplay" attribute.

You can see on the api demo page that this problem doesn't occur if you press the custom play button on the top right.

https://player.vimeo.com/api/demo

Upvotes: 1

Related Questions