Video.js – Ortam oynatma kütüphanesi

Eskiden website sahipleri  için site  üzerinden video yayınlamak bir hayli büyük problemdi. Site üzerinden video oynatmaya yarayan bir kaç çeşit flash  örneği  vardı hatırladığım. Çoğu websitesinde genellikle aynı video oynatıcı  kullanılırdı. Video oynatma tuşuna  bastığımda yükleniyor…. kelimesinden  sonra  bir  türlü yüklenmeyen video çilesi de ayrı bir  sıkıntıydı.  Halen bazı  sitelerde bir  türlü videoları oynatamayan video oynatıcılar mevcut.

Html5’in getirdiği  yenilikler arasında  birde  video  elementi  bulunuyor bildiğiniz gibi.    Img  elementine kolaylıkla resim ekleyebildiğimiz gibi video  elementi sayesinde  websayfasında herhangi bir flash player kullanmadan video oynatabiliyoruz.  Html5 video elementi sayesinde  gün geçtikçe  geliştiriciler tarafından farklı  html5  video player örnekleri hazırlanıyor. Mootools  ve jQuery kütüphaneleri tarafından da desteklenen bir  kaç tane Html5 videoplayer eklentisi paylaşmıştık daha önceden.

VideoJs herhangi  bir  JavaScrip tkütüphanesine ihtiyaç duymadan  tek başına websayfası üzerinden Html5  video elementi sayesinde  video oynatabilen bir  JavaScript kütüphanesidir. İlk  çıktığında yanılmıyorsam  sabit  bir  tasarımı vardı. Kullanmak isteyenlerin olduğu gibi herhangi bir değişiklik yapmadan kullanması gerekiyordu. Daha doğrusu herkesin kendi  zevkine  göre bir  video player hazırlaması mümkün değildi. Şu an site  üzerinden  kendi video playerinizi  tasarlamanız  için eklenmiş  bir kaç  adet  editör ayarı  bulunuyor. Bu ayarlar sayesinde  video playerinizi  kendi sitenizin rengine uyarlayabilmeniz  oldukça  kolay. Şimdilik kendi video playerinizi  oluşturmanız  için fazla  seçenek bulunmuyor  ama umarım gelecekte  tam anlamıyla  kendi  video playerinizi  tasarlayabileceğiniz  ayarlar da eklenir.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

JavaScript ve Css adresleri :

<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2/video.js"></script>

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<video id="my_video_1" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
 data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
 <source src="my_video.webm" type='video/webm'>
</video>

İsterseniz yukarıda vermiş olduğum kodlar ile sitenize video oynatıcı ekleyin, isterseniz demo sayfasında kendinize özgü renkler belirleyerek video oynatıcı kodunu alın.