close

DPlayer Kılavuzu: MP4, HLS, FLV Videolarını Yerleştirme ve Yapılandırma

DPlayer nedir?

DPlayer, güçlü ve esnek bir açık kaynaklı video oynatıcıdır. MP4 gibi yaygın video formatlarını desteklemenin yanı sıra HLS ve FLV akışlarını da işleyerek canlı video oynatma için idealdir. DPlayer, minimalist ve özelleştirilebilir arayüzü ve yerleşik "danmaku"(yüzen yorumlar) özelliğiyle öne çıkar.

DPlayer Kullanımına İlişkin Ayrıntılı Kılavuz

DPlayer'ı kullanmak için kütüphaneyi ve gerekli tüm bağımlılıkları yerleştirmeniz ve ardından oynatıcıyı yapılandırmanız gerekir.

Adım 1: Gerekli Kitaplıkları Edinin

Bu kütüphanelere ulaşmanın en hızlı yolu CDN kullanmaktır. Bağımlı kütüphaneleri sayfanıza eklerseniz, DPlayer bunları otomatik olarak algılar ve kullanır.

  • MP4 için(varsayılan):

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

  • HLS(.m3u8) için:

    <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) için:

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

Adım 2: HTML Oluşturun ve Oynatıcıyı Yapılandırın

<div>Kütüphaneleri yerleştirdikten sonra videoyu görüntülemek için bir eleman oluşturabilir ve ardından DPlayer'ı belirli özelliklerle yapılandırabilirsiniz.

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

Özelliklerin Ayrıntılı Açıklaması

Ortak Özellikler(tüm video türleri için geçerlidir)

  • container: DPlayer'ın oluşturulacağı DOM öğesi. Gerekli.

  • autoplay: trueveya false. Sayfa yüklendiğinde videoyu otomatik olarak oynatır.

  • theme: Hex renk kodu(örn. '#FADFA3'). Oynatıcının vurgu rengini ayarlar.

  • lang: Kullanıcı arayüzü dili, örneğin 'en'İngilizce için.

  • loop: trueveya false. Videoyu bittikten sonra tekrar oynatır.

  • hotkey: trueveya false. Klavye kısayollarını etkinleştirir(örneğin, oynatma/duraklatma için boşluk tuşu).

  • preload: 'auto', 'metadata', veya 'none'. Tarayıcının videoyu önceden yükleme şekli.

    • 'auto': Videonun tamamını önceden yükler.

    • 'metadata': Yalnızca meta verileri(süre, boyutlar) önceden yükler.

    • 'none': Hiçbir şeyi önceden yüklemez.

  • screenshot: trueveya false. Kullanıcıların videonun ekran görüntüsünü almasına olanak tanır.

  • video.url: Video dosyanızın yolu.

  • video.pic: Küçük resim görüntüsünün yolu.

  • video.thumbnails: Arama çubuğu için küçük resim sprite'ına giden yol.

HLS ve FLV için özellikler

Bu video türlerinin çalışması için harici kütüphanelere ihtiyaç vardır. DPlayer bunları otomatik olarak kullanır, ancak bunların davranışlarını özellik aracılığıyla da özelleştirebilirsiniz customType.

  • video.type: Video türünü belirtir.

    • 'mp4': Varsayılan, atlanabilir.

    • 'hls': .m3u8Videolar için.

    • 'flv': .flvVideolar için.

  • video.customType: Her video türü için işleme mantığını özelleştirmenize olanak tanıyan bir nesne.

    • HLS ile örnek: İçerideki kod customType.hlsbir örnek oluşturur Hlsve bunu DPlayer'ın <video>öğesine ekler. Bu, özel durumları ele almak veya HLS akışı üzerinde daha fazla kontrol sağlamak için kullanışlıdır.

    • FLV ile örnek: Benzer şekilde, bu kod bir oluşturur flvPlayerve bunu <video>FLV akışını işlemek için öğeye ekler.

Bu özellikler sayesinde basit videolardan canlı yayınlara kadar her türlü ihtiyacınıza uygun, güçlü ve son derece özelleştirilebilir bir video oynatıcısı yaratabilirsiniz.