Javascript 单击暂停HTML5视频播放器

我想在点击视频后暂停视频

在控制台中使用命令时，一切正常。但是如果我使用jQuery，它就不起作用了。有人知道为什么吗

       $("#video").click(function() {
            if(!$("#video").get(0).paused) {
                console.log("playing");
                showPlayBtn();
                $("#video").get(0).pause();
            } else {
                console.log("paused");
            }
        });

Html:

您的浏览器不支持视频播放器

您的代码中有一个错误，如果

中缺少选择器，请检查：

    $("#video").click(function() {
        if(!$(this).get(0).paused) {
            console.log("playing");
            showPlayBtn();
            $(this).get(0).pause();
        } else {
            console.log("paused");
        }
    });

或者更高效一些：

    $("#video").click(function() {
        var video = $(this).get(0);
        if(!video.paused) {
            console.log("playing");
            showPlayBtn();
            video.pause();
        } else {
            console.log("paused");
        }
    });

以下是我针对html5的jQuery播放/暂停包装器-在不支持的情况下，使用try/catch包装：

/**
 * Play an audio or video element
 * @method play
 * @for jQuery
 * @chainable
 * @return {jQuerySelector}
 */
$fn.play = function() {
    return this.each(function() {
        try {
            this.play();
        } catch (e) {
        }
    });
};

/**
 * Pause an audio or video element
 * @method pause
 * @for jQuery
 * @chainable
 * @return {jQuerySelector}
 */
$fn.pause = function() {
    return this.each(function() {
        try {
            this.pause();
        } catch (e) {
        }
    });
};

由于
.pause（）
是本机VideoElement的方法，而不是jQuery的方法，因此需要对其进行引用。但是使用：
$（“#video”）.get（0）
引用处理程序函数中的视频对象不是必需的，相反，您可以使用引用相同对象的this

您可以查看：

$("#video").click(function() {
    console.log($("#video").get(0)==this);  //true 
}

我已经在两个不同的浏览器中检查了你的代码，它确实有效。但是，在实际加载之前，您可能试图调用$（“#视频”）。
要解决此问题，请在加载后添加，例如：

$(function(){
    //inside here -> means after loading. So video element already exist
    $("#video").click(function() {
        if(!this.paused) {  //if this video element is NOT paused
            console.log("playing");
            showPlayBtn();  //some function of yours
            this.pause();  //pause this video element
        } else {
            console.log("paused");
        }
    });
});

这看起来更像是一个发现差异的游戏，而不是一个答案。哦，对不起，在if检查中，你忘了在选择器中放入任何东西，并且使用
$（This）
而不是
$（“#视频”）
再次简单地更快：-）-编辑以添加它只是搞乱了stackoverflow的代码。在我的代码中，我在if部分得到了选择器。但是您的代码也不起作用…只是为jQuery添加了播放/暂停包装器-它们在我正在处理的一个大型项目中。。。刚刚有了一个想法-一些视频元素在点击开始时会自动暂停-那么有没有可能是系统暂停了它，但这段代码实际上是取消暂停它呢？试着将它放在
.on（“mousedown”…）
中，然后在末尾放一个
return false
来取消事件？
$(function(){
    //inside here -> means after loading. So video element already exist
    $("#video").click(function() {
        if(!this.paused) {  //if this video element is NOT paused
            console.log("playing");
            showPlayBtn();  //some function of yours
            this.pause();  //pause this video element
        } else {
            console.log("paused");
        }
    });
});