close

Vodnik za DPlayer: Vdelava in konfiguriranje videoposnetkov MP4, HLS, FLV

Kaj je DPlayer?

DPlayer je zmogljiv in prilagodljiv predvajalnik videoposnetkov z odprto kodo. Podpira ne le običajne video formate, kot je MP4, temveč tudi tokove HLS in FLV, zaradi česar je idealen za predvajanje videoposnetkov v živo. DPlayer izstopa s svojim minimalističnim, prilagodljivim vmesnikom in vgrajeno funkcijo »danmaku«(lebdeči komentarji).

Podroben vodnik za uporabo DPlayerja

Za uporabo DPlayerja morate vdelati knjižnico in vse potrebne odvisnosti ter nato konfigurirati predvajalnik.

1. korak: Pridobite potrebne knjižnice

Uporaba CDN-ja je najhitrejši način za pridobitev teh knjižnic. DPlayer bo samodejno zaznal in uporabil odvisne knjižnice, če jih vključite na svojo stran.

  • Za MP4(privzeto):

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

2. korak: Ustvarite HTML in konfigurirajte predvajalnik

Po vdelavi knjižnic lahko ustvarite <div>element za prikaz videa in nato konfigurirate DPlayer z določenimi lastnostmi.

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

Podrobna razlaga lastnosti

Skupne lastnosti(veljajo za vse vrste videoposnetkov)

  • container: Element DOM, kjer bo upodobljen DPlayer. Obvezno.

  • autoplay: trueali false. Samodejno predvaja videoposnetek, ko se stran naloži.

  • theme: Šestnajstiška barvna koda(npr. '#FADFA3'). Nastavi poudarjeno barvo predvajalnika.

  • lang: Jezik uporabniškega vmesnika, npr. 'en'angleščina.

  • loop: trueali false. Po koncu videoposnetka se predvaja v zanki.

  • hotkey: trueali false. Omogoča bližnjice na tipkovnici(npr. preslednica za predvajanje/začasno ustavitev).

  • preload: 'auto', 'metadata'ali 'none'. Kako brskalnik vnaprej naloži videoposnetek.

    • 'auto': Predhodno naloži celoten videoposnetek.

    • 'metadata': Predhodno naloži samo metapodatke(trajanje, dimenzije).

    • 'none': Ne naloži ničesar vnaprej.

  • screenshot: trueali false. Uporabnikom omogoča, da naredijo posnetke zaslona videoposnetka.

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

  • video.pic: Pot do sličice.

  • video.thumbnailsPot do sličice za iskalno vrstico.

Lastnosti za HLS in FLV

Te vrste videoposnetkov za delovanje zahtevajo zunanje knjižnice. DPlayer jih samodejno uporablja, vendar lahko njihovo delovanje prilagodite tudi prek customTypelastnosti.

  • video.type: Določa vrsto videa.

    • 'mp4': Privzeto, lahko se izpusti.

    • 'hls': Za .m3u8videoposnetke.

    • 'flv': Za .flvvideoposnetke.

  • video.customType: Objekt, ki vam omogoča prilagajanje logike obdelave za vsako vrsto videa.

    • Primer s HLS: Koda v njem customType.hlsustvari Hlsinstanco in jo pripne elementu DPlayerja <video>. To je uporabno za obravnavo posebnih primerov ali pridobitev večjega nadzora nad tokom HLS.

    • Primer z FLV: Podobno ta koda ustvari flvPlayerin ga pripne <video>elementu za obdelavo toka FLV.

S temi lastnostmi lahko ustvarite zmogljiv in zelo prilagodljiv video predvajalnik za vse potrebe, od preprostih videoposnetkov do prenosov v živo.