Un peu de plaisir innocent avec la vidéo HTML et les progrès

Ce projet a commencé avec une vidéo de formation en milieu de travail sur l'intimidation - une source vraiment inspirante d'énergie créative! L'interface utilisateur élégante de la vidéo, en particulier sa barre de progression de gradient, a déclenché une idée. Je savais créer un dégradé similaire sur un<progress></progress> L'élément était possible (grâce au post CSS-Tricks 2016 de Pankaj Parashar), mais n'avait pas largement plongé dans la manipulation vidéo ou JavaScript. Le défi était allumé!

L'objectif était simple: synchroniser la valeur d'une barre de progression avec la progression de la lecture d'une vidéo. Cela s'est avéré plus amusant que prévu.

Le html

Pur html5:

<video src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>
<figcaption>
  ► <button id="play">►</button>
  <progress id="progress" max="100" value="0">Progrès</progress>
  <label for="progress" id="timer" role="timer"></label>
</figcaption>

Le<progress></progress> L'élément est clé: max="100" définit la valeur maximale, et value="0" l'initialise à zéro, représentant 0% de progrès.

Style CSS

Je ne remanerai pas l'excellent CSS de Pankaj, mais voici le code de la barre de progression de gradient, garantissant la compatibilité des navigateurs croisés:

 Progress [valeur] {
  Apparence: aucun; / * Safari * /
  Border: aucun; / * Firefox * /
  Couleur: # E52E71; /* Retomber */
}

Progress [valeur] :: - webkit-progress-valeur {
  Image d'arrière-plan: gradient linéaire (à droite, # FF8A00, # E52E71);
  transition: largeur 1s linéaire;
}

Progress [valeur] :: - Moz-Progress-Bar {
  Image d'arrière-plan: -moz-linear-gradient (à droite, # ff8a00, # e52e71);
}

Javascript: connexion des points

Le javascript implique ces étapes:

1. Obtenez le temps et la durée de la vidéo actuelles: video.currentTime et video.duration .
2. Calculez le pourcentage de progrès: (currentTime / duration) * 100 .
3. Mettre à jour la valeur de la barre de progression: progress.value = roundedPercentage .
4. Afficher le temps écoulé: mettre à jour un élément de minuterie.

Voici le code raffiné, incorporant la gestion de l'État et requestAnimationFrame pour de meilleures performances (grâce à la précieuse entrée de Neal Fennimore):

 const video = document.QuerySelector ('vidéo');
const progress = document.getElementById («progrès»);
const timer = document.getElementById ('TIMER');
const Button = document.getElementById ('play');

const Used = 'paused';
const jouant = 'play';
Soit l'état = pause;

fonction progressoop () {
  if (state === jouer) {
    Progress.Value = Math.round ((video.currentTime / Video.Duration) * 100);
    timer.innerhtml = math.round (video.currentTime) 'secondes';
    DemandeAnationFrame (ProgressLoop);
  }
}

Function onPlay () {
  état = jouer;
  ProgressLoop ();
  Button.innerhtml = "❙❙";
}

fonction onPause () {
  état = pause;
  bouton.innerhtml = "►";
}

fonction onClick () {
  if (état === pause) {
    video.play ();
  } autre {
    video.pause ();
  }
}

video.AddeventListener ('play', onPlay);
vidéo.addeventListener («pause», onPause);
Button.AdDeventListener ('click', onClick);

Ce code met à jour efficacement la barre de progression et le minuteur, offrant une expérience utilisateur fluide et réactive. L'ajout d'un bouton Play / Pause améliore la convivialité, tandis que la gestion de l'État et l'utilisation de requestAnimationFrame assure une implémentation propre et performante. Et oui, j'ai acé ce quiz de formation!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!