close

DPlayer-guide: Bädda in och konfigurera MP4-, HLS- och FLV-videor

Vad är DPlayer?

DPlayer är en kraftfull och flexibel videospelare med öppen källkod. Den stöder inte bara vanliga videoformat som MP4 utan hanterar även HLS- och FLV-strömmar, vilket gör den idealisk för liveuppspelning av video. DPlayer utmärker sig med sitt minimalistiska, anpassningsbara gränssnitt och en inbyggd funktion för "danmaku"(flytande kommentarer).

En detaljerad guide till att använda DPlayer

För att använda DPlayer måste du bädda in biblioteket och eventuella nödvändiga beroenden och sedan konfigurera spelaren.

Steg 1: Skaffa de nödvändiga biblioteken

Att använda ett CDN är det snabbaste sättet att få tag på dessa bibliotek. DPlayer kommer automatiskt att upptäcka och använda de beroende biblioteken om du inkluderar dem på din sida.

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

Steg 2: Skapa HTML och konfigurera spelaren

Efter att du har bäddat in biblioteken kan du skapa ett <div>element för att visa videon och sedan konfigurera DPlayer med specifika egenskaper.

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

Detaljerad förklaring av egenskaper

Vanliga egenskaper(gäller alla videotyper)

  • containerDOM-elementet där DPlayer kommer att renderas. Obligatoriskt.

  • autoplay: trueeller false. Spelar upp videon automatiskt när sidan laddas.

  • themeHexagonal färgkod(t.ex. '#FADFA3'). Ställer in spelarens accentfärg.

  • langAnvändargränssnittets språk, t.ex. 'en'för engelska.

  • loop: trueeller false. Loopar videon efter att den är slut.

  • hotkey: trueeller false. Aktiverar kortkommandon(t.ex. mellanslagstangenten för att spela upp/pausa).

  • preload: 'auto', 'metadata', eller 'none'. Hur webbläsaren förladdar videon.

    • 'auto': Förladdar hela videon.

    • 'metadata'Förinläser endast metadata(varaktighet, dimensioner).

    • 'none': Förladdar ingenting.

  • screenshot: trueeller false. Tillåter användare att ta skärmdumpar av videon.

  • video.urlSökvägen till din videofil.

  • video.picSökvägen till miniatyrbilden.

  • video.thumbnailsSökvägen till en miniatyrsprite för sökfältet.

Egenskaper för HLS och FLV

Dessa videotyper kräver externa bibliotek för att fungera. DPlayer använder dem automatiskt, men du kan också anpassa deras beteende via customTypeegenskapen.

  • video.type: Anger videotypen.

    • 'mp4'Standard, kan utelämnas.

    • 'hls'För .m3u8videor.

    • 'flv'För .flvvideor.

  • video.customTypeEtt objekt som låter dig anpassa bearbetningslogiken för varje videotyp.

    • Exempel med HLS: Koden i kodfilen customType.hlsskapar en Hlsinstans och kopplar den till DPlayers <video>element. Detta är användbart för att hantera specialfall eller få mer kontroll över HLS-strömmen.

    • Exempel med FLV: På liknande sätt skapar den här koden en flvPlayeroch kopplar den till <video>elementet för att hantera FLV-strömmen.

Med dessa egenskaper kan du skapa en kraftfull och mycket anpassningsbar videospelare för alla behov, från enkla videor till livestreams.