在鼠标移出时停止播放 HTML5 视频（延迟加载）

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

我需要在鼠标移出时停止播放视频，然后在悬停时再次播放。

Lazy-load-any 和它使用的 html 注释存在问题。 jQuery 我猜看不到代码。

此外，播放此视频不是悬停的原因 -> 视频 自动播放

Answer 1

发生这种情况是因为延迟加载正在动态加载视频。你必须使用事件委托 .on()

我用 class main 创建了一个最顶层的父级 div，用于事件委托，并为视频指定了一个 ID myVideo。像这样

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

为了获得视频元素的参考，您应该使用 get(0)

这是一个demo

希望对您有所帮助。