Ein unschuldiger Spaß mit HTML -Video und Fortschritt

Dieses Projekt begann mit einem Workplace -Trainingsvideo zum Mobbing - einer wirklich inspirierenden Quelle kreativer Energie! Die elegante Benutzeroberfläche des Videos, insbesondere die Gradienten -Fortschrittsbalken, löste eine Idee aus. Ich wusste<progress></progress> Element war möglich (dank Pankaj Parashars CSS-Tricks-Post 2016), hatte aber nicht ausgiebig in Video-Manipulation oder JavaScript eingeteilt. Die Herausforderung war an!

Das Ziel war einfach: Synchronisieren Sie den Wert einer Fortschrittsleiste mit dem Wiedergabebestand eines Videos. Es war mehr Spaß als erwartet.

Die HTML

Reines HTML5:

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

Der<progress></progress> Das Element ist der Schlüssel: max="100" legt den Maximalwert fest, und value="0" initialisiert ihn auf Null und repräsentiert 0% Fortschritt.

CSS -Styling

Ich werde Pankajs ausgezeichnete CSS nicht wieder aufbauen, aber hier ist der Code für die Gradienten-Fortschrittsbalken, um die Kompatibilität des Cross-Browsers sicherzustellen:

 Fortschritt [Wert] {
  Aussehen: Keine; / * Safari */
  Grenze: Keine; / * Firefox */
  Farbe: #e52e71; /* Zurückgreifen */
}

Fortschritt [Wert] ::-Webkit-Programm-Wert {
  Hintergrund-Image: Linear-Gradient (rechts, #ff8a00, #e52e71);
  Übergang: Breite 1s linear;
}

Fortschritt [Wert] ::-Moz-Progress-Bar {
  Hintergrund-Image: -moz-linear-Gradient (rechts, #ff8a00, #e52e71);
}

JavaScript: Verbinden der Punkte

Das JavaScript umfasst folgende Schritte:

1. Aktuelle Videozeit und Dauer erhalten: video.currentTime und video.duration .
2. Berechnen Sie den Fortschrittsprozentsatz: (currentTime / duration) * 100 .
3. Aktualisieren Sie den Fortschrittsbalkenwert: progress.value = roundedPercentage .
4. Zeigen Sie verstrichene Zeit an: Aktualisieren Sie ein Timer -Element.

Hier ist der raffinierte Code, der das staatliche Management und requestAnimationFrame für eine bessere Leistung enthält (dank der wertvollen Eingaben von Neal Fennimore):

 const Video = document.querySelector ('Video');
const progress = document.getElementById ('progreshing');
const timer = document.getElementById ('Timer');
const button = document.getElementById ('Play');

const pausiert = 'pausiert';
const spiele = 'spiele';
lass state = pausiert;

Funktion progresorloop () {
  if (state === spielt) {
    progress.Value = math.round ((Video.CurrentTime / Video.Duration) * 100);
    timer.innerhtml = math.round (Video.CurrentTime) 'Sekunden';
    RequestAnimationFrame (ProgressLoop);
  }
}

Funktion onplay () {
  Zustand = Spielen;
  ProgressLoop ();
  button.innerhtml = "❙❙";
}

Funktion onPause () {
  state = pausiert;
  button.innerhtml = "►";
}

Funktion onclick () {
  if (state === pausiert) {
    Video.play ();
  } anders {
    Video.pause ();
  }
}

Video.AdDeVentListener ('Play', Onplay);
Video.AdDeVentListener ('Pause', Onpause);
Button.AdDeVentListener ('Click', Onclick);

Dieser Code aktualisiert effizient die Fortschrittsleiste und den Timer und bietet eine reibungslose, reaktionsschnelle Benutzererfahrung. Die Hinzufügung einer Play/Pause -Taste verbessert die Benutzerfreundlichkeit, während die staatliche Verwaltung und Verwendung von requestAnimationFrame eine saubere und leistungsfähige Implementierung gewährleistet. Und ja, ich habe das Trainingsvideo -Quiz gegründet!

Das obige ist der detaillierte Inhalt vonEin unschuldiger Spaß mit HTML -Video und Fortschritt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!