close

Průvodce DPlayerem: Vkládání a konfigurace videí MP4, HLS, FLV

Co je DPlayer?

DPlayer je výkonný a flexibilní open-source video přehrávač. Podporuje nejen běžné video formáty, jako je MP4, ale také zvládá streamy HLS a FLV, což je ideální pro přehrávání živého videa. DPlayer vyniká svým minimalistickým, přizpůsobitelným rozhraním a vestavěnou funkcí „danmaku“(plovoucí komentáře).

Podrobný návod k používání DPlayeru

Chcete-li používat DPlayer, musíte vložit knihovnu a všechny potřebné závislosti a poté nakonfigurovat přehrávač.

Krok 1: Získejte potřebné knihovny

Použití CDN je nejrychlejší způsob, jak tyto knihovny získat. DPlayer automaticky detekuje a použije závislé knihovny, pokud je zahrnete na svou stránku.

  • Pro MP4(výchozí):

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

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

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

Krok 2: Vytvořte HTML kód a nakonfigurujte přehrávač

Po vložení knihoven můžete vytvořit <div>prvek pro zobrazení videa a poté nakonfigurovat DPlayer se specifickými vlastnostmi.

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

Podrobné vysvětlení vlastností

Společné vlastnosti(platí pro všechny typy videa)

  • containerPrvek DOM, kde bude vykreslován DPlayer. Povinné.

  • autoplay: truenebo false. Automaticky přehraje video při načtení stránky.

  • themeHexadecimální kód barvy(např. '#FADFA3'). Nastavuje zvýrazňující barvu přehrávače.

  • langJazyk uživatelského rozhraní, např. 'en'angličtina.

  • loop: truenebo false. Po skončení videa se video přehrává smyčkou.

  • hotkey: truenebo false. Umožňuje klávesové zkratky(např. mezerník pro přehrávání/pozastavení).

  • preload: 'auto', 'metadata', nebo 'none'. Jak prohlížeč přednačítá video.

    • 'auto': Předběžně načte celé video.

    • 'metadata'Předběžně načte pouze metadata(trvání, rozměry).

    • 'none'Nic se nepřenačítá.

  • screenshot: truenebo false. Umožňuje uživatelům pořizovat snímky obrazovky videa.

  • video.url: Cesta k vašemu video souboru.

  • video.picCesta k náhledovému obrázku.

  • video.thumbnailsCesta k miniatuře spritu pro vyhledávací lištu.

Vlastnosti pro HLS a FLV

Tyto typy videí vyžadují pro fungování externí knihovny. DPlayer je používá automaticky, ale jejich chování si můžete také přizpůsobit pomocí customTypevlastnosti .

  • video.type: Určuje typ videa.

    • 'mp4'Výchozí, lze vynechat.

    • 'hls': Pro .m3u8videa.

    • 'flv': Pro .flvvidea.

  • video.customTypeObjekt, který umožňuje přizpůsobit logiku zpracování pro každý typ videa.

    • Příklad s HLS: Kód uvnitř customType.hlsvytvoří Hlsinstanci a připojí ji k elementu DPlayeru <video>. To je užitečné pro řešení speciálních případů nebo pro získání větší kontroly nad streamem HLS.

    • Příklad s FLV: Podobně tento kód vytvoří flvPlayera připojí ho k <video>elementu pro zpracování FLV streamu.

Díky těmto vlastnostem si můžete vytvořit výkonný a vysoce přizpůsobitelný video přehrávač pro jakoukoli potřebu, od jednoduchých videí až po živé streamy.