Diese Freigabe ist ein benutzerdefinierter Videoplayer, der auf dem HTML5 -Etikett basiert. Unter ihnen werden die Funktionen wie das Spielen von Pause, das Fortschrittsschleppen, die Lautstärkeregelung und der Vollbildmodus implementiert.
VorschauKlicken Sie auf mich, um das Quellcode -Lager anzuzeigen.
KernideeIch glaube, dass einige Kinderschuhe, die nicht der Herstellung von kundenspezifischen Spielern ausgesetzt waren, hier für Etiketten bleiben.
<Video -Steuerelemente = Steuerelemente autoplay = autoplay> <source src = move.ogg type = Video/ogg/> </Video>
Die Steuerelement -Eigenschaft wird so eingestellt, dass sie die eigene Steuerleiste eines Browsers in der Schnittstelle anzeigen. Wenn es keine Nachfrage nach Benutzeroberfläche gibt, kann der gebaute Controller die meisten Anforderungen bereits erfüllen. Wenn ja, werden Sie diese Freigabe nicht sehen =. =
Verstecken Sie die Kontrollleiste und simulieren SieDann ist der Schlüssel zum Player, der eine benutzerdefinierte Funktion implementiert, dass wir den nativen Controller nicht verbergen. Wir sowie die entsprechenden Simulations -Benutzeroberflächen- und Video -Wiedergabedaten des Betriebsverhaltens des Benutzers.
Die Verwendung mehrerer Kernfunktionen und -attributeMyvid = document.getElementById (Video1); .Duration // Die Gesamtlänge des Videos zurückgeben // Simulation Video Volumen myvid.volume // Volumen // Nach dem Erhalten des Videos wird festgelegt, wenn es vom Laden auf myvid.readystate // 0 = Have_nothing -no umgestellt wird Über Audio/ob das Video bereit ist // 1 = Have_Metadata -about Audio/Video unter metadata // 2 = Have_Current_Data -Data über den aktuellen Wiedergabestandort ist verfügbar, aber es gibt keine genügend Daten, um den nächsten Frame/Millisekunden // abzuspielen // 3 = Have_Future_Data -Der aktuelle und zumindest der nächste Frame der Daten ist verfügbar // 4 = Haveough_Data -verfügbar
In allen wichtigen Punkten der Implementierung ist die Simulation der Fortschrittsbalken umso mühsamer. Unter ihnen werden die aktuellen Time- und Dauerattribute in der Videodabel verwendet, um die Position der Fortschrittsleiste relativ zur Gesamtlänge durch die aktuelle Wiedergabezeit und die Gesamtwiedergabezeit zu berechnen. Gleichzeitig kann die Länge des Benutzers bei der endgültigen Einstellung des Benutzers auch zur Umkehrung der Position des Videos zu diesem Zeitpunkt verwendet werden.
Ziehen Sie die Codeidee // Core Code Beispiel var dragdis = 0var proceswidth = xxx // Gesamtlänge der Schleppstange ('Körper'). am selben Ort vergeben Videosource.pause ()}). (links <0) {links = 0} Dragtarget.css ({links: links}) DragProcess.css ({Breite: links}). Processwidth * Dauer // Berechnen Sie die richtige Spielposition des Videos nach dem ZiehenDie Kontrolle des Volumens ist im Grunde genommen das gleiche wie das obige Verhalten.
Steuern Sie die Ladeanimation, bevor Sie abspielen, indem Sie den Video -Streaming -Status abfragen Funktion IfState () {var state = videoSource.readyState if (state === 4) {// 状态为 4 即可播放 videoplayer ()} else {$ ('. Play-Sym-Wrapper'). REMET () $ ('Body'). fstate, 10)}} setTimeout (IfState, 10)Der Kernkontrollteil wurde fertiggestellt. Die grundlegenden Funktionen des gesamten Videoplayers werden realisiert.
Das oben genannte ist der Inhalt dieses Artikels.