How do I listen for the "video-background-play" event and other events?
4foot30 opened this issue · comments
Sorry to open this issue, but I can't seem to pick up any events being dispatched by the YoutubeBackground class, through the VideoBackgrounds class.
I'm initialising like this:
const videoBackground = new VideoBackgrounds('[data-vbs]');
And I've tried listening for the video-background-play event via various methods:
window.addEventListener('video-background-play', function(e) { alert(e) });
document.addEventListener('video-background-play', function(e) { alert(e) });
document.documentElement.addEventListener('video-background-play', function(e) { alert(e) });
const embedTargets = document.querySelectorAll('.class-name-i-added-to-the-data-vbs-elements')
if (this.embedTargets) {
this.embedTargets.forEach((elem) => {
elem.addEventListener('video-background-play', this.videoHasStarted);
});
}
and so on...
I can see that the YoutubeBackground class is dispatching these events, for example: https://github.com/stamat/youtube-background/blob/master/src/youtube-background.js#L130
But I can't pick them up it seems!...
Any help much appreciated, many thanks.
Same here,
let $video = $('[data-vbg]');
$video.on('video-background-play', (e) => {
alert('playing');
});
$video.youtube_background({ 'fit-box': true });
Nothing happens.
Can you add this line after YoutubeBackground.prototype.onVideoStateChange = function (event) {...
this.element.dispatchEvent(new CustomEvent('video-background-state', { bubbles: true, detail: {YoutubeBackground: this, videoState: event.data} }));
so it looks like this:
YoutubeBackground.prototype.onVideoStateChange = function (event) {
this.element.dispatchEvent(new CustomEvent('video-background-state', { bubbles: true, detail: {YoutubeBackground: this, videoState: event.data} }));
if (event.data === 0 && this.params.loop) {
this.seekTo(this.params['start-at']);
this.player.playVideo();
}
...
Then we can get any player stateChange events like this:
let $video = $('[data-vbg]');
$video.on('video-background-state', (e) => {
console.log(e.detail.videoState, 'state');
});
$video.youtube_background({ 'fit-box': true });
Look for onStateChange event in this API doc
