How to play and pause a video using Jquery

October 7, 2024 by Shoaib

In this article, I’ll explain how to use jQuery to play and pause an Html video element. It is pretty easy and with just a few lines of code you can achieve this functionality. This will allow you to add custom buttons that can control the playing state of the video.

HTML Structure

First, we’ll write a simple HTML for the video and buttons:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Control</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <video id="myVideo" width="640" height="360" controls>
        <source src="your-video-file.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <button id="playBtn">Play</button>
    <button id="pauseBtn">Pause</button>

</body>
</html>

jQuery Script

Next, we will add a jQuery code to control the playing state of the video:


$(document).ready(function() {
    var video = $('#myVideo').get(0); // Get the video element

    $('#playBtn').click(function() {
        video.play(); // Play the video
    });

    $('#pauseBtn').click(function() {
        video.pause(); // Pause the video
    });
});

How It Works

When the “Play” button is clicked, it calls the method video.play(), which starts playing the video. When the Pause button is clicked, the video.pause() method is called and it pauses the video.

This simple line of code allows you to control the video playback using jQuery.

Leave a Comment Cancel reply