How to play/pause video using jQuery ?

03 Aug, 2021
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=        "https://code.jquery.com/jquery-3.4.1.min.js">    </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="https://media.geeksforgeeks.org/wp-content/uploads/20200107020629/sample_video.mp4"                type="video/mp4">    </video>          <script>        function playVideo() {            $('#sample_video').trigger('play');        }        function pauseVideo() {            $('#sample_video').trigger('pause');        }    </script></body>  </html>
Output:
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=        "https://code.jquery.com/jquery-3.4.1.min.js">    </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="https://media.geeksforgeeks.org/wp-content/uploads/20200107020629/sample_video.mp4"                type="video/mp4">    </video>          <script>        function playVideo() {            $('#sample_video').get(0).play();        }              function pauseVideo() {            $('#sample_video').get(0).pause();        }    </script></body>  </html>
Output:
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.
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
jQuery | children() with Examples
Scroll to the top of the page using JavaScript/jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
How to get the value in an input text box using jQuery ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?