close

Vodič za DPlayer: Ugradnja i konfiguriranje MP4, HLS, FLV videa

Što je DPlayer?

DPlayer je moćan i fleksibilan video player otvorenog koda. Podržava ne samo uobičajene video formate poput MP4, već i HLS i FLV streamove, što ga čini idealnim za reprodukciju videa uživo. DPlayer se ističe svojim minimalističkim, prilagodljivim sučeljem i ugrađenom značajkom "danmaku"(lebdeći komentari).

Detaljan vodič za korištenje DPlayera

Za korištenje DPlayera, potrebno je ugraditi biblioteku i sve potrebne ovisnosti, a zatim konfigurirati player.

Korak 1: Nabavite potrebne biblioteke

Korištenje CDN-a je najbrži način za dobivanje ovih biblioteka. DPlayer će automatski otkriti i koristiti ovisne biblioteke ako ih uključite na svoju stranicu.

  • Za MP4(zadano):

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

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

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

Korak 2: Izradite HTML i konfigurirajte player

Nakon ugrađivanja biblioteka, možete stvoriti <div>element za prikaz videa, a zatim konfigurirati DPlayer s određenim svojstvima.

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

Detaljno objašnjenje svojstava

Uobičajena svojstva(primjenjivo na sve vrste videozapisa)

  • containerDOM element gdje će se DPlayer prikazivati. Obavezno.

  • autoplay: trueili false. Automatski reproducira videozapis kada se stranica učitava.

  • theme: Heksadecimalni kod boje(npr. '#FADFA3'). Postavlja naglasnu boju igrača.

  • lang: Jezik korisničkog sučelja, npr. 'en'engleski.

  • loop: trueili false. Ponavlja videozapis nakon što završi.

  • hotkey: trueili false. Omogućuje prečace na tipkovnici(npr. razmaknicu za reprodukciju/pauzu).

  • preload: 'auto', 'metadata'ili 'none'. Kako preglednik unaprijed učitava videozapis.

    • 'auto': Prethodno učitava cijeli videozapis.

    • 'metadata': Samo unaprijed učitava metapodatke(trajanje, dimenzije).

    • 'none': Ne učitava ništa unaprijed.

  • screenshot: trueili false. Omogućuje korisnicima snimanje zaslona videozapisa.

  • video.url: Put do vaše video datoteke.

  • video.picPut do sličice.

  • video.thumbnailsPut do sličice spritea za traku za pretraživanje.

Svojstva za HLS i FLV

Ove vrste videozapisa zahtijevaju vanjske biblioteke za funkcioniranje. DPlayer ih automatski koristi, ali možete i prilagoditi njihovo ponašanje putem customTypesvojstva.

  • video.type: Određuje vrstu videa.

    • 'mp4': Zadano, može se izostaviti.

    • 'hls': Za .m3u8videozapise.

    • 'flv': Za .flvvideozapise.

  • video.customTypeObjekt koji vam omogućuje prilagodbu logike obrade za svaku vrstu videozapisa.

    • Primjer s HLS-om: Kod unutar njega customType.hlsstvara Hlsinstancu i pridružuje je elementu DPlayera <video>. To je korisno za rukovanje posebnim slučajevima ili dobivanje veće kontrole nad HLS streamom.

    • Primjer s FLV-om: Slično tome, ovaj kod stvara flvPlayeri prilaže ga <video>elementu za rukovanje FLV streamom.

Pomoću ovih svojstava možete stvoriti moćan i vrlo prilagodljiv video player za bilo koju potrebu, od jednostavnih videa do prijenosa uživo.