modifying wp-playlist.js renderCurrent

I’m adding a parallax scrolling background to the wordpress playlist using jarallax.

I want to be able to bind to renderCurrent found in wp-playlist.js

renderCurrent : function () {
var dimensions, defaultImage = ‘wp-includes/images/media/video.png’;
if ( ‘video’ === this.data.type ) {
if ( this.data.images && this.current.get( ‘image’ ) && -1 === this.current.get( ‘image’ ).src.indexOf( defaultImage ) ) {
this.playerNode.attr( ‘poster’, this.current.get( ‘image’ ).src );
}
dimensions = this.current.get( ‘dimensions’ ).resized;
this.playerNode.attr( dimensions );
} else {
if ( ! this.data.images ) {
this.current.set( ‘image’, false );
}
this.currentNode.html( this.currentTemplate( this.current.toJSON() ) );
}
},

adding the jarallax initialisation at the end

$(‘.jarallax’).jarallax({
speed: 0.2
});

This works great if I modify the core files, but as everyone knows, that is simply not acceptable!!

How could I add this to my themes main.js?

I’ve tried:

$(‘.wp-playlist .mejs-mediaelement audio’).on(‘renderCurrent’, function (event) {
console.log(‘renderCurrent’);
});

but that doesn’t log anything. Nor does

$(‘.wp-playlist .mejs-mediaelement audio’).on(‘ended’, function (event) {
console.log(‘ended’);
});

as suggested here: Audio Playlist : How to bind events for “track change”, “track end”?

This simply logs nothing at all.

How can I bind to the renderCurrent event from within my theme? I’m using a roots-sage 8 as my theme framework.

Read more here:: modifying wp-playlist.js renderCurrent

Leave a Reply

Your email address will not be published. Required fields are marked *