close

JW Player Nasıl Kullanılır: Videoları Yerleştirme ve Yapılandırma

JW Player nedir?

JW Player, web sitenizde video oynatmak için güçlü ve esnek bir araçtır. Bu kılavuz, kütüphaneyi bir CDN kullanarak veya indirerek nasıl edineceğiniz de dahil olmak üzere, nasıl kullanılacağına dair ayrıntılı bir rehber sunacaktır.

JW Player Kitaplığı Nasıl Alınır?

JW Player kütüphanesini edinmek için iki seçeneğiniz var: CDN kullanmak veya yerel barındırma için indirmek.

1. CDN Kullanımı(Önerilir)

JW Player'ı entegre etmenin en basit ve en hızlı yolu CDN(İçerik Dağıtım Ağı) kullanmaktır. CDN, dosyalar dünya genelinde birden fazla sunucuda barındırıldığı için dosyaların daha hızlı yüklenmesine yardımcı olur.

<head>CDN'yi kullanmak için web sitenizin ilgili bölümüne aşağıdaki kod satırını eklemeniz yeterlidir. Not: <YOUR_LICENSE_KEY> Gerçek lisans anahtarınızla değiştirmeniz gerekmektedir .

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. Yerel Olarak İndirme ve Barındırma

Dosyalarınız üzerinde tam kontrole sahip olmak istiyorsanız ve bir ağ bağlantısına güvenmek istemiyorsanız, JW Player'ı indirip kendi sunucunuzda barındırabilirsiniz.

  1. Resmi JW Player web sitesine gidin.

  2. Hesabınıza kaydolun veya giriş yapın(ücretsiz deneme mevcuttur).

  3. Hesap panonuzdan kütüphaneyi bulun ve indirin.

  4. Dosyayı açın ve klasörü sunucunuza yükleyin.

JW Player'ı Kullanmaya İlişkin Ayrıntılı Kılavuz

Kütüphaneyi edindikten sonra JW Player'ı web sitenize yerleştirmeye başlayabilirsiniz.

1. Bir HTML Dosyası Oluşturun ve JW Player'ı Yerleştirin

İşte eksiksiz bir HTML örneği. CDN kullanıyorsanız, <script src="...">satırı yukarıda belirtilen CDN koduyla değiştirin. İndirilen kütüphaneyi kullanıyorsanız, dosya yolunun jwplayer.jsdoğru olduğundan emin olun.

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. Kodun Ayrıntılı Açıklaması

  • <script src="...">: Bu satır JW Player kütüphanesini web sitenize bağlar.

  • <div id="video-container"></div>: Videonun görüntüleneceği yer burasıdır. İstediğiniz adı verebilirsiniz id, ancak işlevde kullanılan adla eşleştiğinden emin olun jwplayer().

  • jwplayer("video-container").setup({...}): Burası JW Player'ı başlatıp yapılandıracağınız yerdir.

    • "file": Video dosyanızın yolu.

    • "image": Video küçük resminin yolu.

    • "width"ve "height": Oynatıcının boyutlarını ayarlar. Duyarlı bir oynatıcı için de kullanabilirsiniz "100%".

    • "autostart" true: Videonun otomatik olarak oynatılmasını istiyorsanız bu seçeneği ayarlayın .

    • "controls" false: Oyuncu kontrollerini gizlemek istiyorsanız ayarlayın .

Bu detaylı rehberle JW Player'ı web sitenizde videoları görüntülemek için kolayca kullanmaya başlayabilirsiniz.