时间戳

首页 > 解决方案 > 加载动态内容时，Html5 视频播放停止工作

javascript - 加载动态内容时，Html5 视频播放停止工作

问题描述

我有一个带有视频产品的 WordPress 网站，此代码添加了一个功能，以便当鼠标悬停在视频缩略图上时它开始播放，当鼠标离开视频时它暂停。它在初始页面加载时工作得很好，但通过 ajax 加载的其他内容什么也不做。

我是 Javascript 新手，但我明白为什么当通过 ajax 加载其他内容时我的代码停止工作。我只是不知道如何使它工作。:) 我已经搜索了答案并遇到了一些关于使用“开启”状态的信息，但无法弄清楚如何在我的代码中使用它。

$(document).ready(function() {
    var figure = $(".video").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}
        });

我知道它不起作用，因为新内容还没有“准备好”，或者脚本不知道新内容，因为页面没有加载。那么......我如何使用动态内容进行这项工作？提前致谢！

标签： javascriptajaxwordpresshoverhtml5-video

解决方案

我能够弄清楚。

$(document).on({
    mouseenter: function () {
        $('video', this).get(0).play();
    },
    mouseleave: function () {
        $('video', this).get(0).pause();
    }
}, '.video');

使用$(document).on而不是$(document).ready允许它适用于任何以前或将来加载的要修改的“.video”类。

使用mouseenter和mouseleave事件而不是 .hover

推荐阅读