Método 1: Usar el método trigger(): El método trigger() se usa para ejecutar un evento específico y el comportamiento predeterminado del evento. El evento a ejecutar se pasa como parámetro a este método.
El evento ‘reproducir’ se usa para reproducir cualquier elemento multimedia y, de manera similar, el evento ‘pausa’ se usa para pausar cualquier elemento multimedia. El uso de estos eventos con el método trigger() reproducirá o pausará el video según sea necesario.
Sintaxis:
// Play the video
$('#sample_video').trigger('play');
// Pause the video
$('#sample_video').trigger('pause');
Ejemplo:
<!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>
Producción:
Método 2: Usar el método play() y pause(): El método play() en JavaScript se usa para intentar reproducir un archivo multimedia. En jQuery, el archivo de video se selecciona primero usando un selector y el elemento real se selecciona usando el método get(). Luego, se usa el método play() en este elemento para intentar iniciar el video.
El método pause() en JavaScript se usa para pausar la reproducción de un archivo multimedia. En jQuery, el archivo de video se selecciona primero usando un selector y el elemento real se selecciona usando el método get(). Luego, se usa el método pause() en este elemento para pausar el video.
Sintaxis:
// Play the video
$('#sample_video').get(0).play();
// Pause the video
$('#sample_video').get(0).pause();
Ejemplo:
<!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>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA