Open In App

How to play/pause video using jQuery ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Method 1: Using trigger() method: The trigger() method is used to execute a specified event and the default behavior of the event. The event to be executed is passed as a parameter to this method.
The ‘play’ event is used to play any media element and similarly the ‘pause’ event is used to pause any media element. Using these events with the trigger() method will play or pause the video as required.

Syntax:




// Play the video
$('#sample_video').trigger('play');
  
// Pause the video
$('#sample_video').trigger('pause');


Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to play/pause video
        using JQuery?
    </title>
      
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Play/pause HTML 5 video
        using JQuery?
    </b>
      
    <p>
        Click on the buttons to play
        or pause the video.
    </p>
      
    <button onclick="playVideo()">
        Play Video
    </button>
      
    <button onclick="pauseVideo()">
        Pause Video
    </button>
    <br>
      
    <video id="sample_video" width="360" height="240">
      
        <source src=
                type="video/mp4">
    </video>
      
    <script>
        function playVideo() {
            $('#sample_video').trigger('play');
        }
        function pauseVideo() {
            $('#sample_video').trigger('pause');
        }
    </script>
</body>
  
</html>


Output:
play-pause

Method 2: Using the play() and pause() method: The play() method in JavaScript is used to attempt the playback of a media file. In jQuery, the video file is first selected using a selector and the actual element is selected using the get() method. Then the play() method is used on this element to attempt to start the video.

The pause() method in JavaScript is used to pause the playback of a media file. In jQuery, the video file is first selected using a selector and the actual element is selected using the get() method. The pause() method is then used on this element to pause the video.

Syntax:




// Play the video
$('#sample_video').get(0).play();
  
// Pause the video
$('#sample_video').get(0).pause();


Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to play/pause video
        using JQuery?
    </title>
      
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        Play/pause HTML 5 video
        using JQuery?
    </b>
      
    <p>
        Click on the buttons to play
        or pause the video.
    </p>
      
    <button onclick="playVideo()">
        Play Video
    </button>
      
    <button onclick="pauseVideo()">
        Pause Video
    </button>
    <br>
      
    <video id="sample_video" width="360" height="240">
        <source src=
                type="video/mp4">
    </video>
      
    <script>
        function playVideo() {
            $('#sample_video').get(0).play();
        }
      
        function pauseVideo() {
            $('#sample_video').get(0).pause();
        }
    </script>
</body>
  
</html>


Output:
play-pause-2

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 03 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads