Sitemize JW Player Entegre Etme

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.

Mobil cihazlarda tabletlerde vs. çalışıyormu?

Şahsen denemedim ancak JW Player, tablet ve mobil cihazlar ile tamamen uyumlu bir oynatıcıdır.

JWPLAYER 'in wp eklentisini kullanıyorum ama mobilde hata veriyor.

Bilemiyorum hocam. Ben eklentiyi hiç kullanmadım. Temanızla alakalı bir sorun olabilir, sunucunuzla alakalı olabilir, kullandığınız sürümde bir bug olabilir. Yani debug yapmak lazım herhalde bunu çözmek için. İşi bilene sorarsanız daha iyi olacaktır. :)

Ya da eklentiyi bir süre devre dışı bırakıp, bu yöntemle bir deneme yapın isterseniz? Bu şekilde hiçbir şekilde veritabanına vs. değişiklik olmuyor zaten.

Siz sadece ilgili dosyaları root'a atıp, yukarıda verdiğim video gömme kodlarını istediğiniz yazı/sayfa veya herhangi bir yere yapıştırıyorsunuz. Gerisini JW Player hallediyor.

HTML5 destekliyor aslında ama mobilde açılmıyor bir türlü. Bi ayarı var ama çözemedim :)

Hocam ben wp de eklentisini kurdum ama linkler ortada kaynak dosyada. linkleri gizlemek için ücretli sürüm mü almamız lazım. bir de bildiğiniz ücretsiz player varmı linkleri gizleyen?

Maalesef, bilgim yok.