close

Podręcznik DPlayer: Osadzanie i konfiguracja filmów MP4, HLS i FLV

Czym jest DPlayer?

DPlayer to wydajny i elastyczny odtwarzacz wideo typu open source. Obsługuje nie tylko popularne formaty wideo, takie jak MP4, ale także strumienie HLS i FLV, dzięki czemu idealnie nadaje się do odtwarzania wideo na żywo. DPlayer wyróżnia się minimalistycznym, konfigurowalnym interfejsem oraz wbudowaną funkcją „danmaku”(ruchomych komentarzy).

Szczegółowy przewodnik po korzystaniu z DPlayer

Aby używać DPlayera, należy osadzić bibliotekę i wszelkie niezbędne zależności, a następnie skonfigurować odtwarzacz.

Krok 1: Zdobądź niezbędne biblioteki

Najszybszym sposobem na uzyskanie tych bibliotek jest skorzystanie z CDN. DPlayer automatycznie wykryje i użyje zależnych bibliotek, jeśli dodasz je do swojej strony.

  • Dla MP4(domyślnie):

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

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

  • W przypadku formatu 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: Utwórz kod HTML i skonfiguruj odtwarzacz

Po osadzeniu bibliotek możesz utworzyć <div>element wyświetlający wideo, a następnie skonfigurować DPlayer przy użyciu określonych właściwości.

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

Szczegółowe wyjaśnienie właściwości

Wspólne właściwości(dotyczące wszystkich typów wideo)

  • container:Element DOM, w którym będzie renderowany DPlayer. Wymagany.

  • autoplay: truelub false. Automatycznie odtwarza wideo po załadowaniu strony.

  • theme: Kod koloru szesnastkowego(np. '#FADFA3'). Ustawia kolor akcentu odtwarzacza.

  • lang:Język interfejsu użytkownika, np. 'en'w przypadku języka angielskiego.

  • loop: truelub false. Odtwarza wideo w pętli po jego zakończeniu.

  • hotkey: truelub false. Włącza skróty klawiaturowe(np. spacja do odtwarzania/pauzy).

  • preload: 'auto', 'metadata', lub 'none'. W jaki sposób przeglądarka wstępnie ładuje wideo.

    • 'auto': Wstępnie ładuje cały film.

    • 'metadata': Wstępnie ładuje tylko metadane(czas trwania, wymiary).

    • 'none':Nie ładuje niczego wstępnie.

  • screenshot: truelub false. Umożliwia użytkownikom wykonywanie zrzutów ekranu wideo.

  • video.url:Ścieżka do pliku wideo.

  • video.pic:Ścieżka do miniatury obrazu.

  • video.thumbnails:Ścieżka do miniaturki paska przewijania.

Właściwości dla HLS i FLV

Te typy wideo wymagają do działania zewnętrznych bibliotek. DPlayer automatycznie z nich korzysta, ale można również dostosować ich działanie za pomocą customTypewłaściwości.

  • video.type: Określa typ wideo.

    • 'mp4': Domyślne, można pominąć.

    • 'hls':Do .m3u8filmów.

    • 'flv':Do .flvfilmów.

  • video.customType:Obiekt umożliwiający dostosowanie logiki przetwarzania dla każdego typu wideo.

    • Przykład z HLS: Kod w tym pliku customType.hlstworzy Hlsinstancję i dołącza ją do elementu DPlayer <video>. Jest to przydatne do obsługi specjalnych przypadków lub uzyskania większej kontroli nad strumieniem HLS.

    • Przykład z FLV: W podobny sposób ten kod tworzy flvPlayeri dołącza do <video>elementu, aby obsłużyć strumień FLV.

Dzięki tym właściwościom możesz stworzyć wydajny i niezwykle konfigurowalny odtwarzacz wideo, który sprosta wszelkim potrzebom — od prostych filmów po transmisje na żywo.