CODEWITHSUNDEEP
javascriptjqueryhtml5-video
Bryan
Bryan

Reputation: 91

JQuery play/pause on HTML5 video is slow

I have an HTML5 video that I want to play/pause when you click anywhere on the video. The code I wrote below works, but if I click the video a few times it starts to get slow and will even freeze sometimes. I saved the selectors in variables hoping that would take care of the issue, but it hasn't made a noticeable difference. Is there a bug in my code that I'm not seeing and the console isn't detecting? Or is there just a better way to write this so it isn't so slow? By the way, the intro-vid ID is on the <video> element in the 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();
    });
});

EDIT: Here is the 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>

Upvotes: 1

Views: 729

Answers (1)

dfsq
dfsq

Reputation: 193261

You should not bind event handlers inside of other handlers, this way them quickly multiply causing troubles. Try this instead:

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

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

Upvotes: 2

Related Questions