Las barras de progreso dinámicas en los videos son bastante atractivas visualmente en sí mismas. Aquí, crearemos una barra de progreso que cambia su gradiente de color usando HTML simple, CSS y algo de JavaScript. El degradado aquí se refiere a los cambios de color de uno a otro con bastante suavidad. Aquí cambiaremos el color del degradado de verde a cian.
Función preconstruida utilizada: Principalmente solo necesitaremos el método setInterval().
Sintaxis:
setInterval(function_reference, time interval)
Comencemos por crear el código HTML:
- Ejemplo: código HTML
html
<!DOCTYPE html> <html> <head> <title>Gradient Progress Bar</title> </head> <body> <h2>Welcome To GFG</h2> <figure> <video id="video" src="GFG.mp4"> </video> <figcaption> <button id="play" aria-label="Play" role="button"> Play </button> <progress id="progress" max="100" value="0"> Progress </progress> </figcaption> </figure> </body> </html>
La línea principal aquí es:
<progress id="progress" max="100" value="0">Progress</progress>
Aquí, el atributo max nos dice que el valor máximo en el video aquí será 100 y el atributo value nos dice que estamos comenzando desde 0.
Elegimos esto porque es bastante simple de entender en términos del porcentaje del video reproducido con 100 reproducido por completo y 0 aún no iniciado.
A continuación, añadimos el CSS de nuestra elección:
- Ejemplo: código CSS
css
progress[value] {
appearance: none;
border: none;
color: green;
}
progress[value]::-webkit-progress-value {
background-image: linear-gradient(
to right,
#00ff00, #014f01
);
transition: width 1s linear;
}
Ahora, comienza la codificación de JavaScript para la barra de progreso. Vamos a hacer esto paso a paso para que puedas entender con bastante facilidad.
Obtener valores de progreso del video:
Hagamos esto en pasos:
- Obtenga la hora actual del video.
- Obtenga la duración total del video.
- Calcule el valor de progreso utilizando la fórmula matemática básica de porcentajes: (tiempo actual/duración = valor de progreso)
- La función Math.round() luego actualizará los resultados a los enteros enteros más cercanos.
La tarea básica está hecha. Tendrá una barra de progreso de gradiente siguiendo los pasos anteriores.
Además, agregaremos algunas características adicionales que se enumeran a continuación:
- Mostrando la hora actual.
- Adición de un botón de reproducción.
Mostrando la hora actual:
¡Esto es bastante fácil de hacer! Podemos simplemente contar los segundos mientras se reproduce el video y mostrarlos en un temporizador al lado de la barra de progreso.
- Ejemplo:
Agregue una etiqueta de temporizador en el archivo HTML:
html
<figure> <video controls id="video" src="GFG.mp4"> </video> <figcaption> <label id="timer" for="progress" role="timer"></label> <progress id="progress" max="100" value="0"> Progress </progress> </figcaption> </figure>
Ahora solo necesitamos asignarle una variable y usar el HTML interno para imprimir el valor actual dentro de él:
- Ejemplo:
javascript
const progress = document.getElementById("progress");
const timer = document.getElementById( "timer" );
function progressLoop() {
setInterval(function () {
progress.value =
Math.round((video.currentTime / video.duration) * 100);
timer.innerHTML =
Math.round(video.currentTime) + " seconds";
});
}
progressLoop();
Agregar el botón de reproducción:
Una etiqueta de video tiene un atributo de control que, cuando se llama, viene con las funciones de reproducción, progreso, volumen y omisión de video. Dejemos caer este atributo y creemos un botón Reproducir/Pausar:
- Ejemplo:
Agregue un botón al HTML:
html
<figure> <video id="video" src="GFG.mp4"> </video> <figcaption> <label id="timer" for="progress" role="timer"></label> <button id="play" aria-label="Play" role="button"> Play </button> <progress id="progress" max="100" value="0"> Progress </progress> </figcaption> </figure>
Ahora conéctelo con una función de JavaScript que alterna el video entre Reproducir y Pausa:
- Ejemplo:
javascript
button = document.getElementById( "play" );
function playPause() {
if ( video.paused ) {
video.play();
button.innerHTML = "Pause";
}
else {
video.pause();
button.innerHTML = "Play";
}
}
button.addEventListener( "click", playPause );
video.addEventListener("play", progressLoop);
Código completo:
html
<!DOCTYPE html>
<html>
<head>
<title>Gradient Video Progress Bar</title>
<style>
body {
background-image:
radial-gradient(circle at top right, green, cyan);
display: grid;
height: 100vh;
place-items: center;
width: 100%;
}
figure {
width: 50%;
}
video {
display: block;
width: 100%;
}
figcaption {
align-items: center;
background: #eaeaea;
display: grid;
grid-gap: 1rem;
grid-template-columns: 50px auto min(115px);
padding: 0.5rem;
}
button {
border: 0;
background: green;
display: inline;
color: white;
order: 1;
padding: 0.5rem;
transition: opacity 0.25s ease-out;
width: 100%;
}
button:hover {
cursor: pointer;
opacity: 0.8;
}
label {
order: 2;
text-align: center;
}
/* Fallback stuff */
progress[value] {
appearance: none;
border: none;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
color: dodgerblue;
display: inline;
height: 15px;
order: 1;
position: relative;
width: 100%;
}
/* WebKit styles */
progress[value]::-webkit-progress-bar {
background-color: white;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
linear-gradient(to right, green, cyan);
border-radius: 3px;
position: relative;
transition: width 1s linear;
}
</style>
</head>
<body>
<h2 style="color: black; font-size: 70px;">
Welcome To GFG
</h2>
<figure>
<video id="video"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191016154640/geeks6.mp4">
</video>
<figcaption>
<label id="timer"
for="progress"
role="timer">
</label>
<button id="play"
aria-label="Play"
role="button">
Play
</button>
<progress id="progress"
max="100"
value="0">
Progress
</progress>
</figcaption>
</figure>
<script>
const progress = document.getElementById("progress");
const timer = document.getElementById("timer");
button = document.getElementById("play");
function progressLoop() {
setInterval(function () {
progress.value =
Math.round((video.currentTime / video.duration) * 100);
timer.innerHTML =
Math.round(video.currentTime) + " seconds";
});
}
function playPause() {
if (video.paused) {
video.play();
button.innerHTML = "Pause";
} else {
video.pause();
button.innerHTML = "Play";
}
}
button.addEventListener("click", playPause);
video.addEventListener("play", progressLoop);
</script>
</body>
</html>
Producción:
