Merhabalar. Bu konumuzda, popüler medya oynatıcılardan biri olan JW Player'ı nasıl sitenize ekleyeceğinizi anlatacağım.

(Anlatım Free -ücretsiz- sürüm ve WordPress harici siteler içindir. Ücretli sürümlerde tek yapmanız gereken 3. adımda anlattığımız kısımdaki kod kısmına, üyelik panelinizdeki kendi kodunuzu girmenizdir. WordPress site sahipleri eklenti kullanarak daha basit bir şekilde oynatıcıyı sitelerine entegre edebilirler.)

1. adım: İlk olarak JW Player web sitesine girerek bir hesap oluşturuyoruz. Hesabı oluşturduktan sonra https://account.jwplayer.com/#/account kısmında bulunan Download Self-Hosted Player linkine tıklıyoruz.

Güncel sürüm (6.11) için: https://account.jwplayer.com/static/download/jwplayer-6.11.zip

2. adım: Dosyayı indirdikten sonra karşımıza 2 klasör çıkacak: __MACOSX ve jwplayer.

jwplayer klasörünü direkt kopyalarak, sitemizin kurulu olduğu dizine (bu dizin root, httpdocs, public_html gibi ada sahip olabilir) atıyoruz.

3. adım: Daha sonra sitemizin header kısmına kısmından hemen öncesine (bazı kodlar gibi bu kodu öncesine ekleyemiyoruz, ben eklediğimde oynatıcı çalışmadı, öncesine ekleyince düzeldi) şu kodu ekliyoruz:

<script></script>
<script>jwplayer.key="KODUNUZBURAYA";</script>

KODUNUZBURAYA kısmına JW Player hesabınızın Overview kısmında yer alan Self-Hosted Player License Key kodunu ekliyoruz.

Entegre işlemimiz bu kadar. Videoları yayınlamak içinse şu kodu kullanıyoruz:

Yükleniyor...

<script>
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
image: "/uploads/myPoster.jpg"
});
</script>

file: kısmına videonuzun adresini giriyorsunuz.

image: kısmına video oynatılmadan önce gözükmesini istediğiniz resmi ekliyorsunuz.

Peki oynatıcıya kalite ayarı nasıl ekleriz?

Bunun için ilgili videonuzu kaç farklı kalitede istiyorsanız, o kalitelerde ayrı ayrı yüklemeniz gerekiyor.

Yükleniyor...

<script>
jwplayer("myElement").setup({
image: "ÖNİZLEME RESMİ BURAYA",
sources: [{
file: "720PVİDEO ADRESİ BURAYA",
label: "720p"
},{
file: "480P VİDEO ADRESİ BURAYA",
label: "480p",
"default": "true"
},{
file: "360P VİDEO ADRESİ BURAYA",
label: "360p"
}]
});
</script>

Yine file yazan kısımlara ilgili label'lara göre farklı kalitedeki videonuzun adreslerini girmeniz yeterli.

Ek olarak label kısmına istediğinizi yazabilirsiniz. Örn: Yüksek Kalite, Düşük Kalite bile yazabilirsiniz.