MEdiaelement.js - get video to play on Hover to work on multiple elements using wordpress

Question

I have this working for one video , where you can rollover each video and see one video play, but I'm stuck on how to apply this every element.

I know its a noob question but I'm learning mediaelements for the first time

    jQuery(document).ready(function(){

    var player = jQuery('.member-player').mediaelementplayer({
    // add desired features in order
    clickToPlayPause: false,
    hideVideoControlsOnLoad: true,
    enableProgressTooltip: false,
        features: [],
        success: function(mediaElement, originalNode, instance) {
        let videoPlayer = instance

    // jQuery(document).on('mouseenter','.member-video', function(e) 
        // console.log('success inner',videoPlayer)
    // videoPlayer.play()
    //  });
       //jQuery(document).on('mouseleave',instance, function(e) {
          / /console.log('success inner',instance, videoPlayer)

       //   return videoPlayer.pause()
     //     });

       }
      })

player.each(function(x,val){
/// answer may be here
})

jQuery(document).on('mouseenter', '.member-video', function(e) {
    console.log('success inner', player.find(), jQuery(this).attr('id'))
    player[1].play()
});
jQuery(document).on('mouseleave', '.member-video', function(e) {
        player[1].setCurrentTime(0)
    player[1].pause()

});


});

My goal is when you roll over a element it plays the video , when you roll out it rewinds

score 1 · Answer 1 · answered Apr 06 '19 at 20:09

It looks like you were on the right track with the commented out code in the success callback.

Something like this is should work for your success function:

// This is called for each individual mediaElement with its instance passed
function(mediaElement, originalNode, instance) {
    // mediaElement is the media dom node. This is where you want your listener
    jQuery(mediaElement).on('mouseenter', function(event) {
        // All dom events have their target accessible.
        var player = event.currentTarget;
        player.play();
    });
    jQuery(mediaElement).on('mouseleave', function(event) {
        // All dom events have their target accessible.
        var player = event.currentTarget;
        player.pause();
        player.setCurrentTime(0);
    });
}

The other option would be to use the event target in your global handlers at the bottom:

jQuery(document).on('mouseenter', '.member-video', function(e) {
    var targetPlayer = e.currentTarget;
    targetPlayer.play();
});
jQuery(document).on('mouseleave', '.member-video', function(e) {
    var targetPlayer = e.currentTarget;
    targetPlayer.setCurrentTime(0);
    targetPlayer.pause();

});

NOTES: You only need one of the solutions above.

Because I don't know what your html is, .member-video may not be the right dom node but I hope this puts you on the right track.

See here for the difference between e.target and e.currentTarget.

MEdiaelement.js - get video to play on Hover to work on multiple elements using wordpress

1 Answers1