Created
June 12, 2018 01:26
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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