jQuery在HTML5視頻上播放/暫停很慢

Question

我有一個HTML5視頻，我想在您單擊視頻的任何位置時播放/暫停它。 我在下面編寫的代碼可以正常工作，但是如果我單擊視頻幾次，它開始變慢，有時甚至會凍結。 我將選擇器保存在變量中，希望可以解決該問題，但是並沒有明顯的區別。 我的代碼中是否存在我沒​​有看到的錯誤，並且控制台沒有檢測到？ 還是有一種更好的方法編寫它，所以它不會那么慢？ 順便說一句，intro-vid ID在HTML的<video>元素上。

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

您不應將事件處理程序綁定到其他處理程序中，這樣它們會迅速成倍增加，從而引起麻煩。 嘗試以下方法：

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

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