Skip to content

Instantly share code, notes, and snippets.

@blakewilson
Created June 12, 2018 01:26
Show Gist options
  • Save blakewilson/6a80b0dea9c0b5c25cb95ca8d09bbca1 to your computer and use it in GitHub Desktop.
Save blakewilson/6a80b0dea9c0b5c25cb95ca8d09bbca1 to your computer and use it in GitHub Desktop.
Create a makeshift play event for the Vimeo Player API while autoplay/background embed option is enabled.
<div id="made-in-ny"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var options = {
url: 'https://vimeo.com/272406014',
width: 640,
loop: true,
autoplay: true, // Notice autoplay is enabled.
muted: true, // The video has been muted due to new Chrome/Safari autoplay conditions.
background: true, // This will also work for the background option.
};
var player = new Vimeo.Player('made-in-ny', options);
// As you can see, this does not fire when the autoplay/background embed option is enabled.
player.on('play', function() {
console.log('You will not see this in the console.');
});
// Set a variable to track if the video is playing or not.
var isPlaying = false;
// Place your code that you want to run on the makeshift play event here.
function onPlay() {
console.log('Yay! a play event!');
}
/**
* Use the timeupdate event instead of the play event due to
* the play event not firing when using the autoplay or background
* embed option.
*
* @param {Object} data The curent duration, percent, and seconds.
* {@link https://github.com/vimeo/player.js#timeupdate Vimeo Player API timeupdate Event}
*/
player.on('timeupdate', function(data) {
// If isPlaying has already been set to true, quit.
if (isPlaying === true) {
return;
}
// If the video has past 0.00 seconds, set isPlaying to true and run the onPlay() function.
if (data['seconds'] > 0) {
isPlaying = true;
onPlay();
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment