close

DPlayer-handleiding: MP4-, HLS- en FLV-video's insluiten en configureren

Wat is DPlayer?

DPlayer is een krachtige en flexibele open-source videospeler. Hij ondersteunt niet alleen gangbare videoformaten zoals MP4, maar ook HLS- en FLV-streams, waardoor hij ideaal is voor het live afspelen van video. DPlayer onderscheidt zich door zijn minimalistische, aanpasbare interface en een ingebouwde "danmaku"-functie(zwevende reacties).

Een gedetailleerde handleiding voor het gebruik van DPlayer

Om DPlayer te kunnen gebruiken, moet u de bibliotheek en eventuele benodigde afhankelijkheden inbedden en vervolgens de speler configureren.

Stap 1: De benodigde bibliotheken verkrijgen

Het gebruik van een CDN is de snelste manier om deze bibliotheken te verkrijgen. DPlayer detecteert en gebruikt de afhankelijke bibliotheken automatisch als u ze op uw pagina opneemt.

  • Voor MP4(standaard):

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

  • Voor 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>

  • Voor 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>

Stap 2: HTML maken en de speler configureren

Nadat u de bibliotheken hebt ingesloten, kunt u een <div>element maken om de video weer te geven en vervolgens DPlayer configureren met specifieke eigenschappen.

<!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>

Gedetailleerde uitleg van eigenschappen

Algemene eigenschappen(van toepassing op alle videotypen)

  • container: Het DOM-element waar DPlayer wordt gerenderd. Vereist.

  • autoplay: trueof false. Speelt de video automatisch af wanneer de pagina laadt.

  • theme: Hexadecimale kleurcode(bijv. '#FADFA3'). Stelt de accentkleur van de speler in.

  • lang: De taal van de gebruikersinterface, bijvoorbeeld 'en'voor Engels.

  • loop: trueof false. Herhaalt de video nadat deze is afgelopen.

  • hotkey: trueof false. Hiermee worden sneltoetsen ingeschakeld(bijvoorbeeld de spatiebalk om af te spelen/pauzeren).

  • preload: 'auto', 'metadata', of 'none'. Hoe de browser de video vooraf laadt.

    • 'auto': Laadt de volledige video vooraf.

    • 'metadata': Laadt alleen metagegevens vooraf(duur, afmetingen).

    • 'none': Er wordt niets vooraf geladen.

  • screenshot: trueof false. Hiermee kunnen gebruikers screenshots van de video maken.

  • video.url: Het pad naar uw videobestand.

  • video.pic: Het pad naar de miniatuurafbeelding.

  • video.thumbnails: Het pad naar een miniatuursprite voor de zoekbalk.

Eigenschappen voor HLS en FLV

Deze videotypen vereisen externe bibliotheken om te functioneren. DPlayer gebruikt ze automatisch, maar je kunt hun gedrag ook aanpassen via de customTypeeigenschap.

  • video.type: Geeft het videotype aan.

    • 'mp4': Standaard, kan worden weggelaten.

    • 'hls': Voor .m3u8video's.

    • 'flv': Voor .flvvideo's.

  • video.customType: Een object waarmee u de verwerkingslogica voor elk videotype kunt aanpassen.

    • Voorbeeld met HLS: De code binnenin customType.hlscreëert een Hlsinstance en koppelt deze aan het element van DPlayer <video>. Dit is handig voor het afhandelen van speciale gevallen of om meer controle te krijgen over de HLS-stream.

    • Voorbeeld met FLV: Op soortgelijke wijze maakt deze code een element aan flvPlayeren koppelt deze aan het <video>element om de FLV-stream te verwerken.

Met deze eigenschappen kunt u een krachtige en uiterst aanpasbare videospeler maken voor elke behoefte, van eenvoudige video's tot livestreams.