close

Pandhuan DPlayer: Semat lan Konfigurasi Video MP4, HLS, FLV

Apa DPlayer?

DPlayer minangka pamuter video open-source sing kuat lan fleksibel. Ndhukung ora mung format video umum kaya MP4 nanging uga nangani HLS lan FLV lepen, dadi becik kanggo muter maneh video urip. DPlayer stands metu karo minimalis, antarmuka customizable lan dibangun ing "danmaku"(ngambang komentar) fitur.

Pandhuan rinci kanggo nggunakake DPlayer

Kanggo nggunakake DPlayer, sampeyan kudu nampilaké perpustakaan lan sembarang dependensi perlu, banjur ngatur pamuter.

Langkah 1: Entuk Pustaka sing Perlu

Nggunakake CDN minangka cara paling cepet kanggo entuk perpustakaan kasebut. DPlayer bakal kanthi otomatis ndeteksi lan nggunakake perpustakaan gumantung yen sampeyan kalebu ing kaca.

  • Kanggo MP4(standar):

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

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

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

Langkah 2: Nggawe HTML lan Konfigurasi Player

Sawise masang perpustakaan, sampeyan bisa nggawe <div>unsur kanggo nampilake video banjur ngatur DPlayer kanthi sifat tartamtu.

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

Katrangan rinci Properties

Properti Umum(kanggo kabeh jinis video)

  • container: Unsur DOM ngendi DPlayer bakal render. dibutuhake.

  • autoplay: trueutawa false. Muter video kanthi otomatis nalika kaca dimuat.

  • theme: Kode warna hex(contone, '#FADFA3'). Nyetel werna aksen pamuter.

  • lang: Basa antarmuka panganggo, contone, 'en'kanggo Inggris.

  • loop: trueutawa false. Muter video sawise rampung.

  • hotkey: trueutawa false. Ngaktifake trabasan keyboard(contone, spasi kanggo muter / ngaso).

  • preload: 'auto', 'metadata', utawa 'none'. Carane browser preloads video.

    • 'auto': Preloads kabeh video.

    • 'metadata': Mung preloads metadata(durasi, dimensi).

    • 'none': Ora preload apa-apa.

  • screenshot: trueutawa false. Ngidini pangguna njupuk gambar video.

  • video.url: Path menyang file video sampeyan.

  • video.pic: Path menyang gambar cilik.

  • video.thumbnails: Path menyang sprite thumbnail kanggo nggoleki bar.

Properties kanggo HLS lan FLV

Jinis video iki mbutuhake perpustakaan eksternal supaya bisa digunakake. DPlayer kanthi otomatis nggunakake, nanging sampeyan uga bisa ngatur prilaku liwat customTypeproperti.

  • video.type: Nemtokake jinis video.

    • 'mp4': Default, bisa diilangi.

    • 'hls': Kanggo .m3u8video.

    • 'flv': Kanggo .flvvideo.

  • video.customType: Obyek sing ngidini sampeyan ngatur logika pangolahan kanggo saben jinis video.

    • Conto karo HLS: Kode ing customType.hlsnggawe Hlsconto lan nempelake menyang unsur DPlayer <video>. Iki migunani kanggo nangani kasus khusus utawa entuk kontrol luwih akeh babagan aliran HLS.

    • Conto karo FLV: Kajaba iku, kode iki nggawe flvPlayerlan nempel menyang <video>unsur kanggo nangani stream FLV.

Kanthi properti kasebut, sampeyan bisa nggawe pamuter video sing kuat lan bisa disesuaikan kanggo kabutuhan apa wae, saka video sing gampang nganti stream langsung.