MEdiaelement.js - получить видео для воспроизведения на Hover для работы над несколькими элементами с помощью WordPress - PullRequest
Новая
       35

MEdiaelement.js - получить видео для воспроизведения на Hover для работы над несколькими элементами с помощью WordPress

0 голосов
/ 06 апреля 2019

У меня это работает для одного видео, где вы можете переворачивать каждое видео и смотреть одно видео, но я застрял на том, как применить этот каждый элемент.

Я знаю, это вопрос нуб, но яЯ изучаю медиаэлементы в первый раз 

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

});


});

Моя цель - когда вы переворачиваете элемент, который воспроизводит видео, когда вы разворачиваете, он перематывает

1 Ответ

0 голосов
/ 06 апреля 2019

Похоже, вы были на правильном пути с закомментированным кодом в обратном вызове успеха.

Что-то вроде этого должно работать для вашей функции успеха: 

// 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, но я надеюсь, что это ставит вас на правильный путь.

См. здесь за разницу между e.target и e.currentTarget.

...