close

Panduan DPlayer: Sematkan dan Konfigurasikan Video MP4, HLS, FLV

Apa itu DPlayer?

DPlayer adalah pemutar video sumber terbuka yang tangguh dan fleksibel. DPlayer tidak hanya mendukung format video umum seperti MP4, tetapi juga menangani aliran HLS dan FLV, sehingga ideal untuk pemutaran video langsung. DPlayer menonjol dengan antarmukanya yang minimalis dan dapat disesuaikan, serta fitur "danmaku"(komentar mengambang) bawaan.

Panduan Lengkap Penggunaan DPlayer

Untuk menggunakan DPlayer, Anda perlu menanamkan pustaka dan dependensi yang diperlukan, lalu mengonfigurasi pemutar.

Langkah 1: Dapatkan Perpustakaan yang Diperlukan

Menggunakan CDN adalah cara tercepat untuk mendapatkan pustaka ini. DPlayer akan otomatis mendeteksi dan menggunakan pustaka dependen jika Anda menyertakannya di halaman Anda.

  • Untuk MP4(default):

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

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

  • Untuk 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: Buat HTML dan Konfigurasikan Pemutar

Setelah menanamkan pustaka, Anda dapat membuat <div>elemen untuk menampilkan video dan kemudian mengonfigurasi DPlayer dengan properti tertentu.

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

Penjelasan Properti Secara Detail

Properti Umum(berlaku untuk semua jenis video)

  • container: Elemen DOM tempat DPlayer akan dirender. Wajib diisi.

  • autoplay: trueatau false. Memutar video secara otomatis saat halaman dimuat.

  • theme: Kode warna heksadesimal(misalnya, '#FADFA3'). Mengatur warna aksen pemain.

  • lang:Bahasa antarmuka pengguna, misalnya 'en'untuk bahasa Inggris.

  • loop: trueatau false. Memutar ulang video setelah berakhir.

  • hotkey: trueatau false. Mengaktifkan pintasan papan ketik(misalnya, spasi untuk memutar/menjeda).

  • preload: 'auto', 'metadata', atau 'none'. Cara peramban memuat video terlebih dahulu.

    • 'auto': Memuat awal seluruh video.

    • 'metadata': Hanya memuat awal metadata(durasi, dimensi).

    • 'none': Tidak memuat apa pun sebelumnya.

  • screenshot: trueatau false. Memungkinkan pengguna mengambil tangkapan layar video.

  • video.url: Jalur ke berkas video Anda.

  • video.pic: Jalur ke gambar mini.

  • video.thumbnails: Jalur ke sprite gambar mini untuk bilah pencarian.

Properti untuk HLS dan FLV

Jenis video ini memerlukan pustaka eksternal agar berfungsi. DPlayer menggunakannya secara otomatis, tetapi Anda juga dapat menyesuaikan perilakunya melalui customTypeproperti tersebut.

  • video.type: Menentukan jenis video.

    • 'mp4': Default, dapat dihilangkan.

    • 'hls': Untuk .m3u8video.

    • 'flv': Untuk .flvvideo.

  • video.customType: Objek yang memungkinkan Anda menyesuaikan logika pemrosesan untuk setiap jenis video.

    • Contoh dengan HLS: Kode di dalamnya customType.hlsmembuat sebuah Hlsinstance dan melampirkannya ke <video>elemen DPlayer. Ini berguna untuk menangani kasus-kasus khusus atau mendapatkan kontrol lebih besar atas aliran HLS.

    • Contoh dengan FLV: Demikian pula, kode ini membuat flvPlayerdan melampirkannya ke <video>elemen untuk menangani aliran FLV.

Dengan properti ini, Anda dapat membuat pemutar video yang kuat dan sangat dapat disesuaikan untuk kebutuhan apa pun, mulai dari video sederhana hingga streaming langsung.