Javascript 视频按钮

Question

在Jquery方面我有点菜鸟。

我正在尝试通过单击视频本身和 play/pause 按钮来 pause/play 视频。现在，我已经设法让它在用户点击视频时按预期工作。但我也无法使用按钮让它工作。

到目前为止我已经尝试过：

$("video").trigger("play");//for auto play
$('video, #pausebutton').click(function() {
if ($('video').hasClass('pause')) {
 $("video").trigger("play");
 $(this).removeClass('pause');
 $("#artwork").removeClass('fadein')
 $(this).addClass('play');
 $("#pausing").html("&#9616;&#9616;");
} else {
 $("video").trigger("pause");
 $(this).removeClass('play');
 $(this).addClass('pause');
 $("#artwork").addClass('fadein');
 $("#pausing").html("&#9658;");
}
});

暂停按钮确实暂停了视频，但在第二次单击时不会恢复播放。它还会忽略其他属性，例如添加和删除类等。澄清一下，当直接单击视频时，所有这些都会起作用。

如有任何帮助，我们将不胜感激。

干杯

Answer 1

是在事件处理器中使用了this，点击按钮时this是按钮，不是视频，类设置在按钮上视频

$("video").trigger("play"); //for auto play
$('video, #pausebutton').click(function () {
    if ($('video').hasClass('pause')) {
        $("video").trigger("play");
        $('video').removeClass('pause');
        $("#artwork").removeClass('fadein')
        $('video').addClass('play');
        $("#pausing").html("&#9616;&#9616;");
    } else {
        $("video").trigger("pause");
        $('video').removeClass('play');
        $('video').addClass('pause');
        $("#artwork").addClass('fadein');
        $("#pausing").html("&#9658;");
    }
});

FIDDLE

Javascript 视频按钮

Javascript Video Button

javascript

video

jquery