close

DPlayer-guide: Integrer og konfigurer MP4-, HLS- og FLV-videoer

Hvad er DPlayer?

DPlayer er en kraftfuld og fleksibel open source-videoafspiller. Den understøtter ikke kun almindelige videoformater som MP4, men håndterer også HLS- og FLV-streams, hvilket gør den ideel til live videoafspilning. DPlayer skiller sig ud med sin minimalistiske, brugerdefinerbare brugerflade og en indbygget "danmaku"-funktion(flydende kommentarer).

En detaljeret guide til brug af DPlayer

For at bruge DPlayer skal du integrere biblioteket og eventuelle nødvendige afhængigheder og derefter konfigurere afspilleren.

Trin 1: Få de nødvendige biblioteker

Brug af et CDN er den hurtigste måde at få fat i disse biblioteker. DPlayer vil automatisk registrere og bruge de afhængige biblioteker, hvis du inkluderer dem på din side.

  • For MP4(standard):

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

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

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

Trin 2: Opret HTML og konfigurer afspilleren

Efter at have integreret bibliotekerne kan du oprette et <div>element til at vise videoen og derefter konfigurere DPlayer med specifikke egenskaber.

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

Detaljeret forklaring af egenskaber

Fælles egenskaber(gælder for alle videotyper)

  • containerDOM-elementet, hvor DPlayer skal gengives. Påkrævet.

  • autoplay: trueeller false. Afspiller automatisk videoen, når siden indlæses.

  • theme: Hexadezimal farvekode(f.eks. '#FADFA3'). Angiver accentfarven for afspilleren.

  • langBrugergrænsefladesproget, f.eks. 'en'for engelsk.

  • loop: trueeller false. Afspiller videoen i en løkke, når den er slut.

  • hotkey: trueeller false. Aktiverer tastaturgenveje(f.eks. mellemrumstasten til afspilning/pause).

  • preload: 'auto', 'metadata', eller 'none'. Hvordan browseren forudindlæser videoen.

    • 'auto': Forindlæser hele videoen.

    • 'metadata'Forudindlæser kun metadata(varighed, dimensioner).

    • 'none': Forindlæser ikke noget.

  • screenshot: trueeller false. Giver brugerne mulighed for at tage skærmbilleder af videoen.

  • video.urlStien til din videofil.

  • video.picStien til miniaturebilledet.

  • video.thumbnailsStien til en miniature-sprite til søgelinjen.

Egenskaber for HLS og FLV

Disse videotyper kræver eksterne biblioteker for at fungere. DPlayer bruger dem automatisk, men du kan også tilpasse deres opførsel via customTypeegenskaben.

  • video.type: Angiver videotypen.

    • 'mp4'Standard, kan udelades.

    • 'hls'Til .m3u8videoer.

    • 'flv'Til .flvvideoer.

  • video.customTypeEt objekt, der giver dig mulighed for at tilpasse behandlingslogikken for hver videotype.

    • Eksempel med HLS: Koden i koden customType.hlsopretter en Hlsinstans og knytter den til DPlayers <video>element. Dette er nyttigt til at håndtere særlige tilfælde eller opnå mere kontrol over HLS-strømmen.

    • Eksempel med FLV: På samme måde opretter denne kode en flvPlayerog vedhæfter den til <video>elementet for at håndtere FLV-streamen.

Med disse egenskaber kan du oprette en kraftfuld og meget brugerdefinerbar videoafspiller til ethvert behov, fra simple videoer til livestreams.