close

Udhëzues për DPlayer: Vendosni dhe Konfiguroni Videot MP4, HLS, FLV

Çfarë është DPlayer?

DPlayer është një program i fuqishëm dhe fleksibël për luajtjen e videove me burim të hapur. Ai mbështet jo vetëm formatet e zakonshme të videos si MP4, por gjithashtu trajton transmetime HLS dhe FLV, duke e bërë ideal për luajtjen e videove drejtpërdrejt. DPlayer dallohet për ndërfaqen e tij minimaliste dhe të personalizueshme dhe një veçori të integruar "danmaku"(komente lundruese).

Një udhëzues i detajuar për përdorimin e DPlayer

Për të përdorur DPlayer, duhet të integroni bibliotekën dhe çdo varësi të nevojshme, pastaj të konfiguroni luajtësin.

Hapi 1: Merrni bibliotekat e nevojshme

Përdorimi i një CDN është mënyra më e shpejtë për të marrë këto biblioteka. DPlayer do t'i zbulojë dhe përdorë automatikisht bibliotekat e varura nëse i përfshini ato në faqen tuaj.

  • Për MP4(parazgjedhur):

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

  • Për 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>

  • Për 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>

Hapi 2: Krijoni HTML dhe Konfiguroni Luajtësin

Pas integrimit të bibliotekave, mund të krijoni një <div>element për të shfaqur videon dhe më pas të konfiguroni DPlayer me veti specifike.

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

Shpjegim i detajuar i vetive

Vetitë e Përbashkëta(të zbatueshme për të gjitha llojet e videove)

  • containerElementi DOM ku do të renderohet DPlayer. I detyrueshëm.

  • autoplay: trueose false. Luan automatikisht videon kur ngarkohet faqja.

  • themeKodi heksadecimal i ngjyrës(p.sh., '#FADFA3'). Cakton ngjyrën e theksit të luajtësit.

  • langGjuha e ndërfaqes së përdoruesit, p.sh., 'en'për anglishten.

  • loop: trueose false. E përsërit videon pasi të mbarojë.

  • hotkey: trueose false. Aktivizon shkurtoret e tastierës(p.sh., tastin e hapësirës për të luajtur/pauzuar).

  • preload: 'auto', 'metadata', ose 'none'. Si e ngarkon paraprakisht videon shfletuesi.

    • 'auto': Ngarkon paraprakisht të gjithë videon.

    • 'metadata'Ngarkon paraprakisht vetëm meta të dhënat(kohëzgjatja, dimensionet).

    • 'none'Nuk ngarkon paraprakisht asgjë.

  • screenshot: trueose false. U lejon përdoruesve të bëjnë pamje të ekranit të videos.

  • video.urlShtegu për në skedarin tuaj video.

  • video.picShtegu për te imazhi në miniaturë.

  • video.thumbnailsShtegu për në një sprite miniaturë për shiritin e kërkimit.

Vetitë për HLS dhe FLV

Këto lloje videosh kërkojnë librari të jashtme për të funksionuar. DPlayer i përdor automatikisht, por ju gjithashtu mund ta personalizoni sjelljen e tyre nëpërmjet customTypeveçorisë.

  • video.type: Specifikon llojin e videos.

    • 'mp4': Parazgjedhur, mund të lihet pas dore.

    • 'hls'Për .m3u8videot.

    • 'flv'Për .flvvideot.

  • video.customTypeNjë objekt që ju lejon të personalizoni logjikën e përpunimit për secilin lloj videoje.

    • Shembull me HLS: Kodi brenda customType.hlskrijon një Hlsinstancë dhe e bashkëngjit atë te elementi i DPlayer <video>. Kjo është e dobishme për trajtimin e rasteve të veçanta ose për të fituar më shumë kontroll mbi rrjedhën HLS.

    • Shembull me FLV: Në mënyrë të ngjashme, ky kod krijon një flvPlayerdhe e bashkëngjit atë në <video>elementin për të trajtuar rrjedhën FLV.

Me këto veti, ju mund të krijoni një program video të fuqishëm dhe shumë të personalizueshëm për çdo nevojë, nga videot e thjeshta deri te transmetimet e drejtpërdrejta.