MEdiaelement.js - 在Hover上播放视频，使用wordpress处理多个元素

Question

我有一个视频工作，你可以翻转每个视频，看一个视频播放，但我坚持如何应用这个每个元素。

我知道这是一个菜鸟问题，但我是第一次学习媒体元素

    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()

});


});

我的目标是当你翻转它播放视频的元素时，当你推出它时，它会倒带

Answer 1

看起来你在成功回调中的注释掉的代码中处于正确的轨道上。

这样的事情应该适用于你的成功功能：

// 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);
    });
}

另一种选择是在底部的全局处理程序中使用事件目标：

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();

});

注意：您只需要上述解决方案之一。

因为我不知道你的html是什么，.member-video可能不是正确的dom节点，但我希望这能让你走上正轨。

有关here和e.target之间的区别，请参阅e.currentTarget。