close

DPlayer útmutató: MP4, HLS és FLV videók beágyazása és konfigurálása

Mi az a DPlayer?

A DPlayer egy hatékony és rugalmas, nyílt forráskódú videolejátszó. Nemcsak az olyan elterjedt videoformátumokat támogatja, mint az MP4, hanem a HLS és FLV streameket is kezeli, így ideális élő videólejátszáshoz. A DPlayer minimalista, testreszabható felületével és beépített "danmaku"(lebegő megjegyzések) funkciójával tűnik ki.

Részletes útmutató a DPlayer használatához

A DPlayer használatához be kell ágyaznod a könyvtárat és az összes szükséges függőséget, majd konfigurálnod kell a lejátszót.

1. lépés: Szerezd meg a szükséges könyvtárakat

A CDN használata a leggyorsabb módja ezeknek a könyvtáraknak a megszerzésének. A DPlayer automatikusan felismeri és használja a függő könyvtárakat, ha azokat belefoglalod az oldaladra.

  • MP4 esetén(alapértelmezett):

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

  • HLS(.m3u8) esetén:

    <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) esetén:

    <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. lépés: HTML létrehozása és a lejátszó konfigurálása

A könyvtárak beágyazása után létrehozhatsz egy <div>elemet a videó megjelenítéséhez, majd konfigurálhatod a DPlayer-t adott tulajdonságokkal.

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

Tulajdonságok részletes magyarázata

Közös tulajdonságok(minden videotípusra vonatkozik)

  • container: A DOM elem, ahol a DPlayer megjelenik. Kötelező.

  • autoplay: truevagy false. Automatikusan lejátssza a videót, amikor az oldal betöltődik.

  • theme: Hex színkód(pl. '#FADFA3'). Beállítja a lejátszó kiemelő színét.

  • lang: A felhasználói felület nyelve, pl. 'en'angol.

  • loop: truevagy false. A videó vége után ismétli a videót.

  • hotkey: truevagy false. Engedélyezi a billentyűparancsokat(pl. szóköz a lejátszáshoz/szüneteltetéshez).

  • preload: 'auto', 'metadata', vagy 'none'. Hogyan tölti be előre a böngésző a videót.

    • 'auto': Előre betölti a teljes videót.

    • 'metadata'Csak a metaadatokat(időtartam, méretek) tölti be előre.

    • 'none': Nem tölt be semmit előre.

  • screenshot: truevagy false. Lehetővé teszi a felhasználók számára, hogy képernyőképeket készítsenek a videóról.

  • video.url: A videofájl elérési útja.

  • video.pic: A miniatűr kép elérési útja.

  • video.thumbnails: A keresősáv bélyegképének elérési útja.

HLS és FLV tulajdonságai

Ezeknek a videótípusoknak a működéséhez külső könyvtárak szükségesek. A DPlayer automatikusan használja őket, de a tulajdonságon keresztül testre is szabhatod a viselkedésüket customType.

  • video.type: Meghatározza a videó típusát.

    • 'mp4': Alapértelmezett, elhagyható.

    • 'hls'Videókhoz .m3u8.

    • 'flv'Videókhoz .flv.

  • video.customType: Egy objektum, amely lehetővé teszi az egyes videotípusok feldolgozási logikájának testreszabását.

    • Példa HLS-sel: A benne lévő kód customType.hlslétrehoz egy Hlspéldányt, és csatolja azt a DPlayer <video>eleméhez. Ez hasznos speciális esetek kezeléséhez vagy a HLS-folyam feletti nagyobb kontroll megszerzéséhez.

    • Példa FLV-vel: Hasonlóképpen, ez a kód létrehoz egy `t` flvPlayer, és csatolja azt az <video>elemhez az FLV-folyam kezeléséhez.

Ezekkel a tulajdonságokkal egy hatékony és nagymértékben testreszabható videolejátszót hozhatsz létre bármilyen igényre, az egyszerű videóktól az élő közvetítésekig.