JS implementiert einfachen Beispielcode zur Steuerung der Videowiedergabegeschwindigkeit

Einführung

Ich habe schon einmal ein Problem festgestellt: Manchmal, wenn ich mir Lernvideos ansehe, beschwere ich mich immer, dass die Bewegungen zu langsam sind und es für den Lehrer Zeitverschwendung ist, an die Tafel zu schreiben. Wenn ich die Wiedergabegeschwindigkeit auf ein angemessenes Niveau einstellen könnte, würde das nicht nur meine Lerneffizienz verbessern, sondern mir auch das Anschauen angenehmer machen. So habe ich gelernt, die folgende Webseite zu schreiben, implementiert durch HTML+CSS+JavaScript.

Tipp: Das Folgende ist der Hauptinhalt dieses Artikels. Die folgenden Fälle können als Referenz verwendet werden

1. Fertigprodukteffekt

Dies ist ein Screenshot meines fertigen Produkts.

2. Konkrete Umsetzung

1. HTML+CSS für ein einfaches Layout

Der Code lautet wie folgt (Beispiel):

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <link rel="stylesheet" href="style.css" rel="externes nofollow" >
    <title>Videowiedergabe</title>
    
</Kopf>
<Text>
    <div id="Wrapper">
        <video width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" steuert class="flex"></video>
        
        <div Klasse="Geschwindigkeit">
            <div class="speed-bar">1x</div>
        </div>
        
    </div>
    

    <script src="./index.js"></script>
</body>
</html>

*{
    Rand: 0;
    Polsterung: 0;
}
Körper{
    min-height: 100vh;/* vh relative Einheit, relativ zur Browsergröße*/
    Hintergrund: #4c4c4c url('https://unsplash.it/1500/900?image=1021');
    background-size: cover;/*Verwende den Container als Grundlage und decke den Container vollständig ab, auch wenn das Bild verzerrt oder unscharf ist*/
    /*margin: auto;/* margin:auto und margin:0 auto, aber die Breite und Höhe des übergeordneten Containers sind unbekannt, daher nicht geeignet*/
    display: flex;/*Stellen Sie den Container auf einen flexiblen Container ein*/
    justify-content: center; /*In X-Richtung zentriert*/
    align-items: center; /*In Y-Richtung zentrieren*/ /*Außerschulische Erweiterung: Alle Möglichkeiten die Box in vertikaler Richtung zu zentrieren*/
}
#Verpackung{
    Breite: 850px;
    Anzeige: Flex;
}
.Geschwindigkeit{
    flex: 1;/*Verhältnisvererbung, es sollte eine 1:1-Vererbung sein, aber vedio hat eine feste Breite, also übernimmt speed die verbleibende Breite*/
    Rand: 10px;
    Hintergrundfarbe: #fff;
    Rahmenradius: 50px;
    Anzeige: Flex;
    overflow: hidden;/*Wird verwendet, um festzulegen, dass der untergeordnete Container das Limit nicht überschreiten kann und den abgerundeten Eckeneffekt der übergeordneten Klasse beibehält*/
    Elemente ausrichten: Flex-Start;/* */

}
.Geschwindigkeitsleiste{
    Breite: 100 %;
    Höhe: 16,3 %;
    Hintergrund: linearer Farbverlauf (-170 Grad, #2376ae 0 %, #c16ecf 100 %); /*Farbverlaufsstil festlegen*/
    display: flex; /* Ermöglicht dem Container, die nächsten beiden Stile festzulegen */
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Farbe: #fff;
    Cursor: Zeiger;
}

Das Layout von HTML ist ziemlich standardmäßig. Es legt lediglich einen ID-Selektor für die Verpackung fest und verwendet dann die integrierte Videowiedergabefunktion von H5 über das Video-Tag. Das abgespielte Video kann durch Ändern der Quelle geändert werden.
Achten Sie im CSS einfach auf die Verwendung elastischer Boxen und verwenden Sie den elastischen Container, um die horizontale und vertikale Mitte des Videos festzulegen

2. JS-Implementierungsfunktion

Der Code lautet wie folgt (Beispiel):

//1. Die zu bedienende DOM-Struktur abrufen //2. Die Distanz abrufen, über die die Maus auf dem DOM gleitet //3. Die Höhe des DOM ändern //4. Die Wiedergabegeschwindigkeit des Videos ändern // Die entsprechende DOM-Struktur abrufen var speed = document.querySelector ('.speed') // Ergänzung: getElementsByClassName dient zum Abrufen des Klassenselektors var bar = document.querySelector ('.speed-bar')
var video = document.querySelector('.flex')

speed.addEventListener('mousemove',function(e){ //Einfach ausgedrückt zeigt es auf das aktuelle Ereignis (Klick, Mouseover usw.) und speichert die Informationen des aktuellen Ereignisses. Beispielsweise verfügt ein Mausklickereignis über die Informationen zu den Mauskoordinaten.
    //console.log(e);
    var y = e.pageY-speed.offsetTop //Der Abstand der Maus im rechten Container offsetTop dient zum Abrufen des Abstands von einer bestimmten DOM-Struktur zum oberen Rand des Browsers var percent = y / speed.offsetHeight //offsetHeight dient zum Abrufen der Höhe einer bestimmten DOM-Struktur selbst var min = 0,4 //Geschwindigkeitsbegrenzung festlegen var max = 4
    var playbackRate = Prozent * (max-min)+min //Geschwindigkeitsberechnung var height = Math.round(Prozent * 100)+'%' //Math.abs() nimmt auch absolute Werte an bar.textContent = playbackRate.toFixed(2)+'×' //Textinhalt im DOM ändern toFixed(x) behält x Dezimalstellen bei video.playbackRate = playbackRate //Wiedergabegeschwindigkeit des Videos anpassen bar.style.height = height //Anzeigehöhe des Mehrfachtextes anpassen })
//Hinweis: Die beiden Parameter der Funktion sind: Auf Mausklickereignisse warten, die Funktion innerhalb der Funktion definieren und zur Rückruffunktion werden

Der Schlüssel liegt in der Realisierung der Steuerfunktion bei s. Beim Schreiben des Js-Abschnitts sollten wir uns darüber im Klaren sein, was Js für uns tun soll.

1. Holen Sie sich die zu bedienende DOM-Struktur
2. Ermitteln Sie die Distanz, die die Maus auf dem DOM gleitet
3. Ändern Sie die Höhe des DOM
4. Ändern Sie die Wiedergabegeschwindigkeit des Videos

Mit dem Ziel vor Augen werden wir es nacheinander umsetzen. Für die konkrete Umsetzung können Sie direkt auf den Originalcode verweisen. Hier konzentrieren wir uns auf die Rückruffunktion und das Prinzip der Mausgeschwindigkeitssteuerung. Sie können sehen
Geschwindigkeit.addEventListener("Mausbewegung", Funktion(e){)
Dies ist eine Rückruffunktion. Wenn eine Mausbewegung erfolgt, wird die Funktion (e) ausgeführt. tmousemove wird verwendet, um die Mausposition zu überwachen.

Dies ist das Ende dieses Artikels über die einfache Verwendung von JS zur Steuerung der Videowiedergabegeschwindigkeit. Weitere relevante Inhalte zur Videowiedergabegeschwindigkeit mit JS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Detaillierte Erklärung zur Verwendung des Js-Videoplayer-Plugins Video.js
So lösen Sie das M3U8-Videowiedergabeformat mit Vue Video.js
Vue verwendet video.js für die Videowiedergabe
vue + typescript + video.js zur Realisierung der Streaming-Videoüberwachungsfunktion
video.js Beispielcode zum gleichzeitigen Abspielen mehrerer Videos auf einer Seite
Beispiel für die Wiedergabe eines m3u8-Videostreams mit Vue in Kombination mit Video.js
Zusammenfassung der Wiedergabemethoden für JSP-Videodateien
So verwenden Sie das FLV-Videoplayer-Plugin von js
JavaScript zur Implementierung eines einfachen HTML5-Videoplayers
Verwenden Sie Javascript, um die Videowiedergabe zu überwachen und Protokolle auszudrucken

<<: So ändern Sie die Zeitzone und die Uhrzeit im Ubuntu-System

>>: Detaillierte Erklärung des Codes zwischen der MySQL-Masterbibliothek Binlog (Master-Log) und der Slave-Bibliothek Relay-Log

Apple Mac OS X in VMWare12 installieren – Grafik-Tutorial

JS implementiert einfachen Beispielcode zur Steuerung der Videowiedergabegeschwindigkeit

Einführung

1. Fertigprodukteffekt

2. Konkrete Umsetzung

Apple Mac OS X in VMWare12 installieren – Grafik-Tutorial

Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 mit Bildern und Text

Installationsprozess von VMware vCenter 6.7 (grafisches Tutorial)

Detaillierte Verwendung des JS-Arrays für jede Instanz

So installieren und konfigurieren Sie WSL unter Windows

HTML-Bild img-Tag_Powernode Java Academy

Zusammenfassung einiger kleinerer Probleme mit der MySQL-Autoinkrement-ID

Einführung und detaillierte Verwendung von React Fragment

So dockerisieren Sie eine Python-Django-Anwendung

MySQL: Praktische Erfahrung mit der Verwendung der Insert-Anweisung

Artikel empfehlen

Tutorial zur Master-Slave-Konfiguration der MySQL-Datenbank unter Windows

Implementierung der Positionierung von CSS-Unterelementen relativ zu übergeordneten Elementen

Docker-Compose erstellt schnell Schritte für ein privates Docker-Warehouse

Erfahren Sie, wie Sie mit Webpack TypeScript-Code verpacken und kompilieren

So erstellen Sie ein Docker-Repository mit Nexus

JavaScript implementiert kreisförmiges Karussell

Zusammenfassung von 76 Erfahrungspunkten der User Experience

Informationen zum Fallstrickprotokoll der Vue3-Übergangsanimation

js Drag & Drop-Tabelle zur Realisierung der Inhaltsberechnung

Zusammenfassung der Erfahrungen mit der Web-Frontend-Entwicklung

CSS-Techniken zum Erreichen eines mehrspaltigen Layouts gleicher Höhe, das das Frontend beherrschen sollte

So beheben Sie das Problem mit der Fußzeile unten auf der Seite (mehrere Methoden)

Perfekte Lösung für asynchrone Timeout-Vorgänge im JavaScript-Frontend

Detaillierte Erläuterung der dynamischen Änderung des Elementknotenstils in Uniapp

Detaillierte Schritte zum Ändern gespeicherter MySQL-Prozeduren