close

„DPlayer“ vadovas: MP4, HLS, FLV vaizdo įrašų įterpimas ir konfigūravimas

Kas yra DPlayer?

„DPlayer“ yra galingas ir lankstus atvirojo kodo vaizdo grotuvas. Jis palaiko ne tik įprastus vaizdo formatus, tokius kaip MP4, bet ir HLS bei FLV srautus, todėl idealiai tinka tiesioginiam vaizdo įrašų atkūrimui. „DPlayer“ išsiskiria minimalistine, pritaikoma sąsaja ir integruota „danmaku“(plaukiojančių komentarų) funkcija.

Išsamus DPlayer naudojimo vadovas

Norėdami naudoti „DPlayer“, turite įterpti biblioteką ir visas reikalingas priklausomybes, tada sukonfigūruoti grotuvą.

1 veiksmas: gaukite reikalingas bibliotekas

Greičiausias būdas gauti šias bibliotekas yra naudoti CDN. „DPlayer“ automatiškai aptiks ir naudos priklausomas bibliotekas, jei jas įtrauksite į savo puslapį.

  • MP4(numatytoji reikšmė):

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

  • HLS(.m3u8) atveju:

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

  • FLV(.flv) formatui:

    <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 veiksmas: sukurkite HTML ir sukonfigūruokite grotuvą

Įdėję bibliotekas, galite sukurti <div>elementą vaizdo įrašui rodyti ir sukonfigūruoti „DPlayer“ su konkrečiomis savybėmis.

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

Išsamus savybių paaiškinimas

Bendrosios savybės(taikoma visiems vaizdo įrašų tipams)

  • containerDOM elementas, kuriame bus atvaizduojamas DPlayer. Privaloma.

  • autoplay: truearba false. Vaizdo įrašas paleidžiamas automatiškai, kai įkeliamas puslapis.

  • themeŠešioliktainis spalvos kodas(pvz., '#FADFA3'). Nustato žaidėjo akcento spalvą.

  • langVartotojo sąsajos kalba, pvz., 'en'anglų.

  • loop: truearba false. Kartoja vaizdo įrašą jam pasibaigus.

  • hotkey: truearba false. Įjungia sparčiuosius klavišus(pvz., tarpo klavišą, kad paleistumėte / pristabdytumėte).

  • preload: 'auto', 'metadata', arba 'none'. Kaip naršyklė iš anksto įkelia vaizdo įrašą.

    • 'auto': Iš anksto įkelia visą vaizdo įrašą.

    • 'metadata': Iš anksto įkelia tik metaduomenis(trukmę, matmenis).

    • 'none': Nieko iš anksto neįkelia.

  • screenshot: truearba false. Leidžia vartotojams daryti vaizdo įrašo ekrano kopijas.

  • video.url: Kelias į jūsų vaizdo įrašo failą.

  • video.pic: Kelias į miniatiūros paveikslėlį.

  • video.thumbnails: Kelias į miniatiūros спрайtą paieškos juostoje.

HLS ir FLV savybės

Šiems vaizdo įrašų tipams veikti reikalingos išorinės bibliotekos. „DPlayer“ jas naudoja automatiškai, tačiau jų elgseną galite pritaikyti ir naudodami šią customTypesavybę.

  • video.type: nurodo vaizdo įrašo tipą.

    • 'mp4'Numatytasis, galima praleisti.

    • 'hls': Vaizdo .m3u8įrašams.

    • 'flv': Vaizdo .flvįrašams.

  • video.customTypeObjektas, leidžiantis pritaikyti apdorojimo logiką kiekvienam vaizdo įrašo tipui.

    • Pavyzdys su HLS: Kodas customType.hlssukuria Hlsegzempliorių ir prideda jį prie DPlayer <video>elemento. Tai naudinga tvarkant specialius atvejus arba norint gauti daugiau kontrolės per HLS srautą.

    • Pavyzdys su FLV: panašiai šis kodas sukuria `` flvPlayerir prideda jį prie <video>elemento, kad būtų galima apdoroti FLV srautą.

Naudodami šias savybes galite sukurti galingą ir labai pritaikomą vaizdo grotuvą bet kokiems poreikiams – nuo ​​paprastų vaizdo įrašų iki tiesioginių transliacijų.