close

Mwongozo wa DPlayer: Pachika na Usanidi Video za MP4, HLS, FLV

DPlayer ni nini?

DPlayer ni kicheza video chenye chanzo-wazi chenye nguvu na rahisi. Haitumii tu umbizo la kawaida la video kama MP4 lakini pia hushughulikia mitiririko ya HLS na FLV, na kuifanya kuwa bora kwa uchezaji wa video wa moja kwa moja. DPlayer ni ya kipekee kwa kutumia kiolesura chake cha chini kabisa, kinachoweza kugeuzwa kukufaa na kipengele kilichojengewa ndani cha "danmaku"(maoni yanayoelea).

Mwongozo wa Kina wa Kutumia DPlayer

Ili kutumia DPlayer, unahitaji kupachika maktaba na utegemezi wowote muhimu, kisha usanidi kicheza.

Hatua ya 1: Pata Maktaba Muhimu

Kutumia CDN ndiyo njia ya haraka sana ya kupata maktaba hizi. DPlayer itatambua kiotomatiki na kutumia maktaba tegemezi ikiwa utazijumuisha kwenye ukurasa wako.

  • Kwa MP4(chaguo-msingi):

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

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

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

Hatua ya 2: Unda HTML na Sanidi Kichezaji

Baada ya kupachika maktaba, unaweza kuunda <div>kipengele ili kuonyesha video na kisha kusanidi DPlayer na sifa maalum.

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

Maelezo ya kina ya Mali

Sifa za Kawaida(zinazotumika kwa aina zote za video)

  • container: Kipengele cha DOM ambapo DPlayer itatolewa. Inahitajika.

  • autoplay: trueau false. Hucheza video kiotomatiki ukurasa unapopakia.

  • theme: Msimbo wa rangi wa Hex(kwa mfano, '#FADFA3'). Huweka rangi ya lafudhi ya mchezaji.

  • lang: Lugha ya kiolesura cha mtumiaji, kwa mfano, 'en'kwa Kiingereza.

  • loop: trueau false. Loweka video baada ya kuisha.

  • hotkey: trueau false. Huwasha mikato ya kibodi(km, upau wa nafasi kucheza/kusitisha).

  • preload: 'auto',, 'metadata'au 'none'. Jinsi kivinjari kinavyopakia video mapema.

    • 'auto': Hupakia mapema video nzima.

    • 'metadata': Hupakia tu metadata(muda, vipimo).

    • 'none': Haipakii chochote mapema.

  • screenshot: trueau false. Huruhusu watumiaji kupiga picha za skrini za video.

  • video.url: Njia ya faili yako ya video.

  • video.pic: Njia ya kuelekea kwenye kijipicha.

  • video.thumbnails: Njia ya kijipicha cha upau wa kutafuta.

Sifa za HLS na FLV

Aina hizi za video zinahitaji maktaba za nje kufanya kazi. DPlayer huzitumia kiotomatiki, lakini pia unaweza kubinafsisha tabia zao kupitia customTypemali.

  • video.type: Hubainisha aina ya video.

    • 'mp4': Chaguomsingi, inaweza kuachwa.

    • 'hls': Kwa .m3u8video.

    • 'flv': Kwa .flvvideo.

  • video.customType: Kitu ambacho hukuruhusu kubinafsisha mantiki ya uchakataji kwa kila aina ya video.

    • Mfano na HLS: Nambari iliyo ndani customType.hlshuunda Hlsmfano na kuambatisha kwa <video>kipengele cha DPlayer. Hii ni muhimu kwa kushughulikia kesi maalum au kupata udhibiti zaidi wa mtiririko wa HLS.

    • Mfano na FLV: Vile vile, msimbo huu huunda flvPlayerna kuambatisha kwa <video>kipengele ili kushughulikia mtiririko wa FLV.

Ukiwa na sifa hizi, unaweza kuunda kicheza video chenye nguvu na kinachoweza kugeuzwa kukufaa sana kwa hitaji lolote, kuanzia video rahisi hadi mitiririko ya moja kwa moja.