close

DPlayer-Handbuch: Einbetten und Konfigurieren von MP4-, HLS- und FLV-Videos

Was ist DPlayer?

DPlayer ist ein leistungsstarker und flexibler Open-Source-Videoplayer. Er unterstützt nicht nur gängige Videoformate wie MP4, sondern verarbeitet auch HLS- und FLV-Streams und ist somit ideal für die Live-Videowiedergabe. DPlayer zeichnet sich durch seine minimalistische, anpassbare Oberfläche und die integrierte Danmaku-Funktion(schwebende Kommentare) aus.

Eine ausführliche Anleitung zur Verwendung von DPlayer

Um DPlayer zu verwenden, müssen Sie die Bibliothek und alle erforderlichen Abhängigkeiten einbetten und dann den Player konfigurieren.

Schritt 1: Besorgen Sie sich die erforderlichen Bibliotheken

Die Verwendung eines CDN ist der schnellste Weg, um diese Bibliotheken zu erhalten. DPlayer erkennt und verwendet die abhängigen Bibliotheken automatisch, wenn Sie sie auf Ihrer Seite einbinden.

  • Für MP4(Standard):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

  • Für HLS(.m3u8):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>

  • Für FLV(.flv):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>

Schritt 2: HTML erstellen und Player konfigurieren

Nach dem Einbetten der Bibliotheken können Sie ein <div>Element zum Anzeigen des Videos erstellen und DPlayer dann mit bestimmten Eigenschaften konfigurieren.

<!DOCTYPE html>  
<html>  
<head>  
    <title>Advanced DPlayer Example</title>  
    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>  
</head>  
<body>  
  
    <h1>How to Use DPlayer</h1>  
  
    <div id="dplayer-container-1"></div>  
  
    <hr>  
  
    <div id="dplayer-container-2"></div>  
  
    <hr>  
  
    <div id="dplayer-container-3"></div>  
  
    <script>  
        // DPlayer configuration for MP4  
        const dpMP4 = new DPlayer({  
            container: document.getElementById('dplayer-container-1'),  
            autoplay: false,  
            lang: 'en',  
            loop: true,  
            hotkey: true,  
            preload: 'auto',  
            screenshot: true,  
            video: {  
                url: 'https://example.com/videos/my-video.mp4',  
                pic: 'https://example.com/images/my-video-thumbnail.jpg',  
                thumbnails: 'https://example.com/images/video-thumbnails.jpg',  
                type: 'mp4'  
            }  
        });  
  
        // DPlayer configuration for HLS  
        const dpHLS = new DPlayer({  
            container: document.getElementById('dplayer-container-2'),  
            autoplay: true,  
            lang: 'en',  
            theme: '#ff6666',  
            loop: false,  
            hotkey: true,  
            preload: 'metadata',  
            video: {  
                url: 'https://example.com/live/my-stream.m3u8',  
                type: 'hls',  
                customType: {  
                    hls: function(video, player) {  
                        const hls = new Hls();  
                        hls.loadSource(video.src);  
                        hls.attachMedia(video);  
                    }  
                }  
            }  
        });  
  
        // DPlayer configuration for FLV  
        const dpFLV = new DPlayer({  
            container: document.getElementById('dplayer-container-3'),  
            autoplay: true,  
            lang: 'en',  
            theme: '#0077c2',  
            loop: false,  
            hotkey: true,  
            preload: 'auto',  
            video: {  
                url: 'https://example.com/live/my-stream.flv',  
                type: 'flv',  
                customType: {  
                    flv: function(video, player) {  
                        const flvPlayer = flvjs.createPlayer({  
                            type: 'flv',  
                            url: video.src,  
                        });  
                        flvPlayer.attachMediaElement(video);  
                        flvPlayer.load();  
                    }  
                }  
            }  
        });  
    </script>  
</body>  
</html>

Detaillierte Erklärung der Eigenschaften

Gemeinsame Eigenschaften(für alle Videotypen anwendbar)

  • container: Das DOM-Element, in dem DPlayer gerendert wird. Erforderlich.

  • autoplay: trueoder false. Spielt das Video automatisch ab, wenn die Seite geladen wird.

  • theme: Hex-Farbcode(z. B. '#FADFA3'). Legt die Akzentfarbe des Players fest.

  • lang: Die Sprache der Benutzeroberfläche, z. B. 'en'für Englisch.

  • loop: trueoder false. Lässt das Video nach dem Ende in einer Schleife ablaufen.

  • hotkey: trueoder false. Aktiviert Tastaturkürzel(z. B. Leertaste zum Abspielen/Pause).

  • preload: 'auto', 'metadata', oder 'none'. Wie der Browser das Video vorlädt.

    • 'auto': Lädt das gesamte Video vorab.

    • 'metadata': Lädt nur Metadaten(Dauer, Abmessungen) vor.

    • 'none': Lädt nichts vor.

  • screenshot: trueoder false. Ermöglicht Benutzern, Screenshots des Videos zu machen.

  • video.url: Der Pfad zu Ihrer Videodatei.

  • video.pic: Der Pfad zum Miniaturbild.

  • video.thumbnails: Der Pfad zu einem Miniatur-Sprite für die Suchleiste.

Eigenschaften für HLS und FLV

Für diese Videotypen sind externe Bibliotheken erforderlich. DPlayer verwendet sie automatisch, Sie können ihr Verhalten jedoch auch über die customTypeEigenschaft anpassen.

  • video.type: Gibt den Videotyp an.

    • 'mp4': Standard, kann weggelassen werden.

    • 'hls': Für .m3u8Videos.

    • 'flv': Für .flvVideos.

  • video.customType: Ein Objekt, mit dem Sie die Verarbeitungslogik für jeden Videotyp anpassen können.

    • Beispiel mit HLS: Der darin enthaltene Code customType.hlserstellt eine HlsInstanz und hängt sie an das Element von DPlayer an <video>. Dies ist nützlich, um Sonderfälle zu behandeln oder mehr Kontrolle über den HLS-Stream zu erlangen.

    • Beispiel mit FLV: In ähnlicher Weise erstellt dieser Code ein flvPlayerund hängt es an das <video>Element an, um den FLV-Stream zu verarbeiten.

Mit diesen Eigenschaften können Sie einen leistungsstarken und hochgradig anpassbaren Videoplayer für jeden Bedarf erstellen, von einfachen Videos bis hin zu Live-Streams.