javascript - HTML5 视频上的 JQuery 播放/暂停速度很慢

Question

我有一个 HTML5 视频，我想在您点击视频的任意位置时播放/暂停。我在下面编写的代码有效，但如果我点击视频几次，它就会开始变慢，有时甚至会卡住。我将选择器保存在变量中，希望能解决这个问题，但它并没有产生明显的区别。我的代码中是否存在我未发现且控制台未检测到的错误？还是有更好的方法来编写它，这样它就不会那么慢？顺便说一下，介绍视频 ID 在 <video> 上HTML 中的元素。

var $video = $('video')[0];
var $introVid = $('#intro-vid');

// If the video is playing, pause it when clicked
$introVid.on('play', function() {
    $introVid.click(function() {
        $video.pause();
    });
});

// If the video is paused, play it when clicked
$introVid.on('pause', function() {
    $introVid.click(function() {
        $video.play();
    });
});

编辑:这是 HTML

<video id="intro-vid" controls>
    <source src="placeholder.mp4" type="video/mp4">
    <source src="placeholder.webm" type="video/webm">
        Your browser does not support the video tag.
</video>

Answer 1

您不应该在其他处理程序中绑定(bind)事件处理程序，这样它们会迅速增加，从而造成麻烦。试试这个:

var $video = $('video')[0];
var $introVid = $('#intro-vid');

$introVid.click(function () {
    $video.paused ? $video.play() : $video.pause();
});