Jquery视频按钮触发问题答案

【问题标题】：Jquery video button trigger issueJquery视频按钮触发问题
【发布时间】：2015-01-13 14:04:24
【问题描述】：

我正在尝试通过单击视频或按钮来切换背景视频的暂停/播放。我已经设法让视频点击触发器工作，但不知道如何做按钮部分。我正在学习jquery，所以还是有点新手！

这是我到目前为止所得到的：

$("video").trigger("play");//for auto play
$("video").addClass('pause');//for check pause or play add a class
$('video').click(function() {
if ($(this).hasClass('pause')) {
 $("video").trigger("play");
 $(this).removeClass('pause');
 $("#artwork").removeClass('fadein')
 $(this).addClass('play');
 pauseButton.innerHTML = "Pause";
} else {
 $("video").trigger("pause");
 $(this).removeClass('play');
 $(this).addClass('pause');
 $("#artwork").addClass('fadein');
 pauseButton.innerHTML = "Paused";
}
});

任何帮助表示赞赏！干杯

【问题讨论】：

how to do the button part 什么意思？
我不知道如何添加到该脚本以触发视频停止并使用按钮停止。应该更清楚。道歉。
这个我试过了但是效果不是很好：$("video").trigger("play");//自动播放 $('video, #play- pause').click(function() { if ($('video').hasClass('pause')) { $("video").trigger("play"); $(this).removeClass('pause '); $("#artwork").removeClass('fadein') $(this).addClass('play'); } else { $("video").trigger("pause"); $(this) .removeClass('play'); $(this).addClass('pause'); $("#artwork").addClass('fadein'); } });

标签： jquery html video html5-video

【解决方案1】：

据我了解，您甚至已经处理了视频点击，并且可以正常工作。因此，只需对您的 pauseButton 执行相同操作即可。将与点击相关的代码移动到某个函数，并将其绑定为您喜欢的任何触发器的回调 - 点击视频、点击按钮等。因此，最少更新您的代码：

function toggleVideo() {
  if ($(this).hasClass('pause')) {
    $("video").trigger("play");
    $(this).removeClass('pause');
    $("#artwork").removeClass('fadein')
    $(this).addClass('play');
    pauseButton.innerHTML = "Pause";
  } else {
    $("video").trigger("pause");
    $(this).removeClass('play');
    $(this).addClass('pause');
    $("#artwork").addClass('fadein');
    pauseButton.innerHTML = "Paused";
  }
};

$('video').click(toggleVideo); // handle click on video
// assuming pauseButton references your play/pause button
$(pauseButton).click(toggleVideo); // handle click on button
$("video").trigger("play"); // for auto play
$("video").addClass('pause'); // for check pause or play add a class

【讨论】：