Grundlegende Ideen und Codes zur Implementierung von Videoplayern in Browsern

Vorwort

Passen Sie einen Player an. Alle Komponenten sind nativ, daher ist er etwas hässlich. Konzentrieren Sie sich auf die Geschäftslogik.

Die Schnittstelle sieht wahrscheinlich wie folgt aus.

Sie können sich die Benutzeroberfläche ansehen und überlegen, wie Sie diesen Videoplayer implementieren würden. Hier sind einige Fragen, die Sie sich stellen sollten:

• Diese Komponente akzeptiert diese Requisiten
• So erhalten Sie grundlegende Informationen zu einem Video, einschließlich Dauer, Auflösung usw.
• So pausieren und spielen Sie
• So implementieren Sie die Logik zum Ziehen des Fortschrittsbalkens
• Wie wird das anfängliche Laden des Videos gehandhabt?
• So gehen Sie mit dem Ladebildschirm um, wenn das Video während der Wiedergabe hängen bleibt

Zusammenfassung der Audio- und Videokenntnisse in Browsern

Videokodierung

Ein Video ist eigentlich eine Reihe von Bildern, die kontinuierlich abgespielt werden. Wenn 24 Bilder in 1 Sekunde abgespielt werden, beträgt die Bildrate des Videos 24.

Wenn die Größe des Videos 1920 x 1080 beträgt, ist die Größe eines Bildes 1920 x 1080 x 3 Bytes, multipliziert mit 3, da ein Pixel 3 Bits hat, die jeweils RGB speichern. Der für ein 30-minütiges Video erforderliche Speicherplatz beträgt dann:

//Der für ein 1-Sekunden-Video erforderliche Speicherplatz beträgt:
1920*1080*3*24 Byte
//Benötigter Speicherplatz für 30min Video:
1920*1080*3*24*60*30=250,28 GB

Wie Sie sehen, ist es sehr groß, daher muss das Video komprimiert werden (daher das Codec-Konzept). Das Videocodierungsformat kann als Komprimierungsformat verstanden werden. Unterschiedliche Codierungsformate haben unterschiedliche Komprimierungsraten. Zu den gängigen Codierungsformaten gehören h264, mpeg4, vp8 usw.

Darüber hinaus muss Folgendes beachtet werden: Aufgrund von Urheberrechtsproblemen beim Kodierungsformat unterstützen verschiedene Browser unterschiedliche Kodierungsformate. Daher können manche Videos in manchen Kodierungsformaten in manchen Browsern nicht abgespielt werden oder es wird nur Ton, aber kein Bild angezeigt.

Unsere Front-End-Entwickler müssen sich nur eines merken: Das von gängigen Browsern unterstützte Videocodierungsformat ist h264 .

Verpackungsformat

Eine Videodatei enthält Video- und Audiostreams sowie einige Metadaten wie Auflösungsinformationen, Titel usw. Das Format dieser Datei wird als Kapselungsformat bezeichnet, das als Verpackungsformat verstanden werden kann. Gängige Formate wie MP4, WebP, MOV, MPEG usw. sind allesamt Kapselungsformate.

Das Kapselungsformat hat oft nichts mit der Videokodierung zu tun. Bei einer MP4-Datei kann die Videostream-Kodierung h264 oder mpeg sein. Daher kann es sein, dass manche Browser dieselbe MP4-Datei abspielen können, andere jedoch nicht.

Audio- und Video-Tags

<Videosteuerung poster="1.jpg" src="1.mp4" Schleife stummgeschaltet></video>
<audio-Steuerelemente src="1.mp3"></audio>

src gibt die Ressourcenadresse an, poster gibt ein Titelbild für das Video an und controls gibt an, dass der Browser UI-Steuerelemente anzeigen soll (unterschiedliche Stile für jeden Browser).

Gemeinsame Eigenschaften

Im Folgenden sind die gemeinsamen Eigenschaften von Video und Audio aufgeführt.

Häufige Ereignisse

Allgemeine Ereignisse für Video und Audio

Gängige Methoden

• play() steuert die Wiedergabe des Videos
• pause() steuert das Anhalten der Videowiedergabe

Mit den oben genannten Eigenschaften, Ereignissen und Methoden können wir viele Dinge tun, z. B. den Player anpassen, den Player zur lokalen Vorschau des Videos verwenden usw.

Die Grundidee ist wie folgt

1. Diese Komponente erhält eine Video-Quelle als Parameter
2. Hören Sie auf das Ereignis „onLoadedMetadata“, um die Videodauer (Dauer), die tatsächliche Breite und Höhe (videoWidth, videoHeight) abzurufen.
3. Wenn Sie auf Wiedergabe/Pause klicken, rufen Sie die Wiedergabe-/Pause-Methode des Videoelements auf
4. Hören Sie während der Wiedergabe auf onTimeUpdate, ermitteln Sie die aktuelle Wiedergabezeit (currentTime) und berechnen Sie den Fortschritt des Fortschrittsbalkens
5. Ziehen Sie den Fortschrittsbalken, um die aktuelle Videowiedergabezeit einzustellen, was das Gegenteil von Schritt 4 ist.
6. Beim ersten Laden des Videos wird „Wird geladen“ angezeigt. Das heißt, wenn die Komponente zum ersten Mal gerendert wird, ist das Ladeattribut standardmäßig auf „true“ eingestellt, wodurch der Ladeeffekt angezeigt wird. Wenn die Videometadaten geladen sind, wird der Ladevorgang abgebrochen.
7. Wenn das Video einfriert, wird „Wird geladen“ angezeigt. Diese Funktion wird durch die Überwachung des Ereignisses onWaiting implementiert. Wenn keine Verzögerung auftritt, brechen Sie den Ladevorgang ab und überwachen Sie das Ereignis onCanPlay.

Code-Implementierung

Der Code wird mit React implementiert, und das Gleiche gilt für Vue. Konzentrieren Sie sich einfach auf die Geschäftslogik. Bei Bedarf kann ich diesen Artikel aktualisieren und Vue-Code hinzufügen.

Hinweis: DOM-nativen Ereignissen in React muss ein „On“ vorangestellt werden und sie müssen in Camel Case geschrieben sein.

Funktion formatDuration(Dauer) {
    var sec_num = parseInt(duration, 10); // den zweiten Parameter nicht vergessen
    var Stunden = Math.floor(sec_num / 3600);
    var Minuten = Math.floor((sec_num - (Stunden * 3600)) / 60);
    var Sekunden = Sek._Anzahl – (Stunden * 3600) – (Minuten * 60);

    if (Stunden < 10) {Stunden = "0"+Stunden;}
    if (Minuten < 10) {Minuten = "0"+Minuten;}
    if (Sekunden < 10) {Sekunden = "0"+Sekunden;}
    returniere Stunden+':'+Minuten+':'+Sekunden;
}

importiere React, { createRef, useState } von 'react'
importiere './VideoPlayer.css'
Funktion VideoPlayer({src}){
    const videoDom = createRef()
    // Aktuelle Videowiedergabezeit const [curTime,setCurTime]=useState(0)
    // Videodauer const [duration,setDuration]=useState(0)
    // Videostatus, ob pausiert werden soll const [isPause,setPause]=useState(true)
    // Die tatsächliche Größe des Videos const [size,setSize]=useState({width:1920,height:1080})
    // Video wird geladen const [waiting,setWaiting]=useState(true)

    // Video-Metadaten erfolgreich geladen const onLoad=(e)=>{
        const {Dauer,Videobreite,Videohöhe}=e.target
        setDuration(Dauer)
        setSize({Breite:Videobreite,Höhe:Videohöhe})
        setzeWaiting(false)
    }
    // Wiedergabepause steuern const handlePlay=(play)=>{
        const v = videoDom.current
        wenn(abspielen){
            setzePause(false)
            v. abspielen()
        }anders{
            setzePause(true)
            v.pause()
        }

    }
    //Ändern Sie die aktuelle Videozeit, wenn Sie den Schieberegler ziehen
    const onSliderChange=(e)=>{
        setCurTime(e.Ziel.Wert)
        videoDom.current.currentTime=e.Ziel.Wert

    }
    // Auf Zeitaktualisierung des Videos warten
    const onTimeUpdate=()=>{
        const v = videoDom.current
        setze AktuelleZeit(v.aktuelleZeit)
        wenn(v.ended){
            handlePlay(falsch)
            v.aktuelleZeit=0
        }
    }
    //Wenn es nicht weitergeht, zeige die Ladeaufforderung an const onWaiting=()=>{
        setzeWaiting(true)
    }
    // Wenn das Video abgespielt werden kann, verstecke die Ladeaufforderung const onCanPlay=()=>{
        setzeWaiting(false)
    }
    returniere <div Klassenname="video-wrapper">
            <video ref={videoDom} src={src} onLoadedMetadata={onLoad} onTimeUpdate={onTimeUpdate} onWaiting={onWaiting} onCanPlay={onCanPlay} ></video>
            {/* Anzeige wird geladen, wenn das Video geladen wird */}
            {wartet && <div className="wartet">wird geladen...</div>}
            <div Klassenname="Video-Steuerelemente">
                {/* Wiedergabetaste */}
                {isPause? <button onClick={()=>{handlePlay(true)}}>Abspielen</button>: <button onClick={()=>{handlePlay(false)}}>Pause</button>}
                {/* Fortschrittsbalken */}
                <Eingabetyp="Bereich" min="0" max={Dauer} Wert={aktuelleZeit} beiÄnderung={beiSliderChange}/>
                {/* Zeitinformationen und Auflösungsinformationen*/}
                {formatDuration(aktuelleZeit)}/{formatDuration(Dauer)}
                <span>Auflösung: {size.width}x{size.height}</span>
            </div>
        </div>
}
Standard-VideoPlayer exportieren

Ich habe ein bisschen Stil geschrieben, VideoPlayer.css

.video-wrapper{
    Breite: 800px;
}
.video-wrapper>video{
    Breite: 100 %;
}

.video-Steuerungen{
    Rand oben: 20px;
}

Der Fokus dieses Artikels liegt nicht auf React. React ist nur ein Träger. Die gleiche Logik kann problemlos mit Vue implementiert werden. Der Fokus liegt auf der Anpassung der Logik eines Videoplayers.

Zusammenfassen

Damit ist dieser Artikel über die grundlegenden Ideen und Codes zur Implementierung von Videoplayern in Browsern abgeschlossen. Weitere Informationen zur Implementierung von Videoplayern in Browsern finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!