close

Gwida tad-DPlayer: Inkorpora u Ikkonfigura Vidjows MP4, HLS, FLV

X'inhu DPlayer?

DPlayer huwa plejer tal-vidjo open-source qawwi u flessibbli. Jappoġġja mhux biss formati komuni tal-vidjow bħal MP4 iżda jimmaniġġja wkoll flussi HLS u FLV, u b'hekk huwa ideali għad-daqq ta' vidjow dirett. DPlayer jispikka bl-interfaċċja minimalista u personalizzabbli tiegħu u l-karatteristika integrata "danmaku"(kummenti f'wiċċ l-ilma).

Gwida Dettaljata għall-Użu ta' DPlayer

Biex tuża DPlayer, trid tinkorpora l-librerija u kwalunkwe dipendenza meħtieġa, imbagħad tikkonfigura l-plejer.

Pass 1: Ikseb il-Libreriji Neċessarji

L-użu ta' CDN huwa l-aktar mod mgħaġġel biex tikseb dawn il-libreriji. DPlayer awtomatikament jiskopri u juża l-libreriji dipendenti jekk tinkludihom fil-paġna tiegħek.

  • Għal MP4(default):

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

  • Għal 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>

  • Għal 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>

Pass 2: Oħloq HTML u Ikkonfigura l-Plejer

Wara li ddaħħal il-libreriji, tista' toħloq <div>element biex turi l-vidjow u mbagħad tikkonfigura DPlayer bi proprjetajiet speċifiċi.

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

Spjegazzjoni Dettaljata tal-Proprjetajiet

Proprjetajiet Komuni(applikabbli għat-tipi kollha ta' vidjows)

  • containerL-element DOM fejn se jiġi rrendut DPlayer. Meħtieġ.

  • autoplay: truejew false. Jilgħab il-vidjow awtomatikament meta titgħabba l-paġna.

  • themeKodiċi tal-kulur eżadecimali(eż., '#FADFA3'). Jissettja l-kulur tal-aċċent tal-plejer.

  • langIl-lingwa tal-interfaċċja tal-utent, eż. 'en'għall-Ingliż.

  • loop: truejew false. Jirrepeti l-vidjow b'mod loop wara li jintemm.

  • hotkey: truejew false. Jippermetti shortcuts tat-tastiera(eż., spacebar biex tilgħab/twaqqaf).

  • preload: 'auto', 'metadata', jew 'none'. Kif il-brawżer jgħabbi l-vidjo minn qabel.

    • 'auto': Jgħabbi minn qabel il-vidjow kollu.

    • 'metadata'Jiċċarġja minn qabel biss il-metadata(tul ta' żmien, dimensjonijiet).

    • 'none'Ma jgħabbi xejn minn qabel.

  • screenshot: truejew false. Jippermetti lill-utenti jieħdu screenshots tal-vidjow.

  • video.url: It-triq għall-fajl tal-vidjo tiegħek.

  • video.pic: It-triq għall-immaġni tat-thumbnail.

  • video.thumbnailsIt-triq għal sprite ta' thumbnail għall-bar tat-tiftix.

Proprjetajiet għal HLS u FLV

Dawn it-tipi ta' vidjow jeħtieġu libreriji esterni biex jiffunzjonaw. DPlayer jużahom awtomatikament, iżda tista' wkoll tippersonalizza l-imġieba tagħhom permezz tal- customTypeproprjetà.

  • video.type: Jispeċifika t-tip ta' vidjo.

    • 'mp4': Default, jista' jitħalla barra.

    • 'hls'Għall .m3u8-vidjows.

    • 'flv'Għall .flv-vidjows.

  • video.customTypeOġġett li jippermettilek tippersonalizza l-loġika tal-ipproċessar għal kull tip ta' vidjow.

    • Eżempju bl-HLS: Il-kodiċi ġewwa customType.hlsjoħloq Hlsistanza u jehmeżha mal <video>-element ta' DPlayer. Dan huwa utli biex timmaniġġja każijiet speċjali jew biex tikseb aktar kontroll fuq l-istreaming tal-HLS.

    • Eżempju b'FLV: Bl-istess mod, dan il-kodiċi joħloq fajl flvPlayeru jehmeżh mal- <video>element biex jimmaniġġja l-istreaming FLV.

B'dawn il-proprjetajiet, tista' toħloq plejer tal-vidjo qawwi u li jista' jiġi personalizzat ħafna għal kwalunkwe ħtieġa, minn vidjows sempliċi għal xandiriet diretti.