Home »
jQuery »
jQuery Examples
Play/pause HTML 5 video using jQuery
In this tutorial, let's learn how you can play or pause an HTML video using jQuery?
Submitted by Pratishtha Saxena, on June 17, 2022
jQuery is a JavaScript library used to simplify HTML DOM tree traversal and manipulation, and also event handling. It is free, open-source software. It is user-friendly and easy to learn and understand.
Note: Always remember to apply the CDN link while working with jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Suppose, we want to control the basic function of a video like play and pause with jQuery, then two different methods for doing it are discussed below.
- Using trigger() Method
- Using play() & pause() Methods
1) Using trigger() Method
The trigger() method in jQuery triggers the instruction or the event passed to the method. It helps to execute the particular event and also the default behavior of that event. The "play" and "pause" are the two keywords that are passed as parameters to this method which plays and pauses the specified video respectively.
Syntax:
$(selector).trigger('play');
$(selector).trigger('pause');
Example 1:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<center>
<h1>Play and Pause Video</h1>
<button onclick="playVideo()">Play Video</button>
<button onclick="pauseVideo()">Pause Video</button><br>
<video id="first_video" width="500" height="300">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
jQuery Function:
<script>
function playVideo() {
$('#first_video').trigger('play');
}
function pauseVideo() {
$('#first_video').trigger('pause');
}
</script>
Output:
2) Using play() and pause() Methods
These methods, simple play and pause the video specified for it. The play() method plays the selected video, and the pause() method pauses the video. Here, we use the get() method also to select the actual element that the selector has selected.
Syntax:
$(selector).get(0).play();
$(selector).get(0).pause();
Example 2:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<center>
<h1>Play and Pause Video</h1>
<button onclick="playVideo()">Play Video</button>
<button onclick="pauseVideo()">Pause Video</button><br>
<video id="first_video" width="500" height="300">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
jQuery Function:
<script>
function playVideo() {
$('#first_video').get(0).play();
}
function pauseVideo() {
$('#first_video').get(0).pause();
}
</script>
Output:
