En este artículo, veremos cómo podemos cambiar la velocidad de reproducción de videos incrustados en un documento HTML usando una etiqueta de video HTML5 .
Podemos establecer la nueva velocidad de reproducción usando el atributo playbackRate . Tiene la siguiente sintaxis.
Sintaxis:
let video = document.querySelector('video')
video.playbackRate = newPlaybackRate
También podemos establecer la velocidad de reproducción predeterminada utilizando el atributo defaultPlaybackRate . Tiene la siguiente sintaxis.
Sintaxis:
let video = document.querySelector('video')
video.defaultPlaybackRate = 4
video.load()
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
body {
text-align: center;
margin-top: 2%;
}
h1 {
color: green;
}
p {
margin-top: 2%;
}
button {
margin-right: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<video width="890" height="500" controls loop>
<source src="sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>
<button onclick="increase()">Increase Speed</button>
<button onclick="decrease()">Decrease Speed</button>
</p>
<script>
let video = document.querySelector('video');
// Set the default playing speed
video.defaultPlaybackRate = 0.5
// Loading the video after setting
video.load();
function increase() {
// Increasing the playing speed by 1
video.playbackRate += 1;
}
function decrease() {
// Decreasing the playing speed by 1
if (video.playbackRate > 1)
video.playbackRate -= 1;
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chetankhanna767 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA