Question

这是我的项目：http://jsfiddle.net/p42q12cm/1/

/*
HERE IS MY CODE FOR lazy-load -->
 */
    function load(img)
    {
      img.fadeOut(0, function() {
        img.fadeIn(1000);
      });
    }
    $('.lazyload-thumbnail').lazyload({load: load});
    $('.lazyload-youtube').lazyload({trigger: 'mouseover'});
/*
FOR VIDEOS -->
 */
  var figure = $("figure");
        var vid = $("video");
        var cover = $(".img-cover");
        $(figure).hover(function()
                { $(cover).addClass("img-hide");
        }, function()
                { $(cover).removeClass("img-hide");
        }
        );

        [].forEach.call(vid, function (item) {
                item.addEventListener('mouseover', hoverVideo, false);
                item.addEventListener('mouseout', hideVideo, false);
        });

        function hoverVideo(e) {  
                this.play();
        }

        function hideVideo(e) {
                this.pause();
        }

我需要停止在mouseout上播放视频，并在悬停时再次播放。

使用Laare-load-any和html注释时，问题是一个问题。我想，jQuery无法看到代码。

此外，此视频播放不会导致悬停 - ＆gt;视频自动播放

Answer 1

这种情况正在发生，因为视频是通过延迟加载动态加载的。您必须使用事件委派.on()

我使用类main创建了一个最顶级的父div，用于事件委派，并为视频提供了标识myVideo。喜欢这个

$('.main').on('mouseover', '#myVideo', function(){
    $(this).get(0).play()
}).on('mouseout', '#myVideo', function(){
    $(this).get(0).pause();
});

要获取视频元素的引用，您应该使用get(0)

这是demo

希望这有帮助。

停止在mouseout上播放HTML5视频（延迟加载）

1 个答案: