close

Ghid DPlayer: Integrarea și configurarea videoclipurilor MP4, HLS, FLV

Ce este DPlayer?

DPlayer este un player video open-source puternic și flexibil. Acceptă nu doar formate video comune precum MP4, ci și fluxuri HLS și FLV, fiind ideal pentru redarea video live. DPlayer se remarcă prin interfața sa minimalistă, personalizabilă și funcția încorporată „danmaku”(comentarii plutitoare).

Un ghid detaliat pentru utilizarea DPlayer

Pentru a utiliza DPlayer, trebuie să încorporați biblioteca și orice dependențe necesare, apoi să configurați playerul.

Pasul 1: Obțineți bibliotecile necesare

Utilizarea unei rețele CDN este cea mai rapidă modalitate de a obține aceste biblioteci. DPlayer va detecta și utiliza automat bibliotecile dependente dacă le includeți pe pagina dvs.

  • Pentru MP4(implicit):

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

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

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

Pasul 2: Creați HTML și configurați playerul

După încorporarea bibliotecilor, puteți crea un <div>element pentru a afișa videoclipul și apoi configura DPlayer cu proprietăți specifice.

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

Explicație detaliată a proprietăților

Proprietăți comune(aplicabile tuturor tipurilor de videoclipuri)

  • containerElementul DOM unde va fi redat DPlayer. Obligatoriu.

  • autoplay: truesau false. Redă automat videoclipul când se încarcă pagina.

  • themeCod hexadecimal de culoare(de exemplu, '#FADFA3'). Setează culoarea de accent a playerului.

  • langLimba interfeței utilizator, de exemplu, 'en'pentru engleză.

  • loop: truesau false. Redă videoclipul în buclă după ce se termină.

  • hotkey trueActivează comenzi rapide de la tastatură(de exemplu, bara de falsespațiu pentru redare/pauză).

  • preload: 'auto', 'metadata', sau 'none'. Cum preîncarcă browserul videoclipul.

    • 'auto': Preîncarcă întregul videoclip.

    • 'metadata'Preîncarcă doar metadatele(durată, dimensiuni).

    • 'none'Nu preîncarcă nimic.

  • screenshot: truesau false. Permite utilizatorilor să facă capturi de ecran ale videoclipului.

  • video.urlCalea către fișierul video.

  • video.picCalea către imaginea miniatură.

  • video.thumbnailsCalea către un sprite în miniatură pentru bara de căutare.

Proprietăți pentru HLS și FLV

Aceste tipuri de videoclipuri necesită biblioteci externe pentru a funcționa. DPlayer le folosește automat, dar le puteți personaliza comportamentul și prin intermediul customTypeproprietății.

  • video.type: Specifică tipul videoclipului.

    • 'mp4'Implicit, poate fi omis.

    • 'hls'Pentru .m3u8videoclipuri.

    • 'flv'Pentru .flvvideoclipuri.

  • video.customTypeUn obiect care vă permite să personalizați logica de procesare pentru fiecare tip de videoclip.

    • Exemplu cu HLS: Codul din interior customType.hlscreează o Hlsinstanță și o atașează elementului DPlayer <video>. Acest lucru este util pentru gestionarea cazurilor speciale sau pentru obținerea unui control sporit asupra fluxului HLS.

    • Exemplu cu FLV: În mod similar, acest cod creează un fișier flvPlayerși îl atașează <video>elementului pentru a gestiona fluxul FLV.

Cu aceste proprietăți, poți crea un player video puternic și extrem de personalizabil pentru orice nevoie, de la videoclipuri simple la transmisiuni live.