FlowPlayer

Flowplayer oynatıcısını HTML5 olarak entegre etme

Adım 1

Öncelikle sayfamızın HTML5 olarak çalışabilmesi için dosyanın ilk başına şunu yazıyoruz:

<!DOCTYPE html>

Adım 2

Şimdi sayfamızın <head> taglarının arasına aşağıdaki kodları yazıyoruz.

<link rel="stylesheet" href="http://releases.flowplayer.org/5.4.6/skin/minimalist.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>

Bu kod satırlarından ilki FlowPlayer oynatıcısının tasarımı ile ilgili CSS kodları. İsterseniz bu adresteki başka temaları kullanabilirsiniz, isterseniz bu adresten kendi tasarımınızı oluşturabilirsiniz. İkinci satır JQuery kütüphanesinin kodu. Bu kısmı bir defa yazmak yeterli olacağından daha önce başka bir yerde yazdıysanız buradan silebilirsiniz. Son satır ise oynatıcıyı entegre eden kodlar. Ben bu yazıyı yazarken “5.4.6 ” numaralı sürüm vardı. Siz her ihtimale karşı bu adresten son sürümün numarasını bulun.

FlowPlayer

FlowPlayer

Adım 3

Ve son işlem olarak oynatıcının gözükmesini istediğimiz yerlere aşağıdaki kodları yazıyoruz:

<div class="flowplayer">
  <video>
    <source type="video/webm" src="video.webm">
    <source type="video/mp4" src="video.mp4">
    <source type="video/flash" src="video.flv">
  </video>
</div>

Üçümcü satırı çoğaltarak bir güvenlik protokolü oluşturabilirsiniz. Her tarayıcı her formatı çalamadığından oynatıcı otomatik olarak uygun formatı bulup çalıştacaktır. Şimdi sitenizde çalışan bir flowplayer oynatıcısı olması lazım. Tüm javascript ve CSS kodlarını internetten aldığımız için de si<zin sitenize ek bir yük getirmiyor. Sadece video siteden yükleniyor. Videoları depolamak için bu adresteki kodları kullanarak Youtube sitesini de kullanabilirsiniz eğer erişimi engellenmemişse ve kodlar konusunda uzmansanız.

Açılış Resmi Seçimi

İnanılmaz ama tek bir satır daha ekleyerek bir açılış resmi ekleyebiliyorsunuz:

<div class="flowplayer is-splash"
     style="background:#777 url('splash.jpg') no-repeat;">
  <video>
    <source type="video/mp4"  src="http://mydomain.com/path/intro.mp4">
  </video>
</div>

Video Formatları

“MP4”, “WEBM” ve “OGG” formatlerini kullanmanızı tavsiye ediyoruz çünkü tarayıcıların çoğunluğu sadece bu formatları destekliyor. Özellikle “WEBM” çok meşhur çünkü HTML5’in resmi video formatı. FlowPlayer öncelikle HTML5 kullanarak oynatıcıyı çalıştırmayı deneyecektir. Bu olmazsa flash olarak yüklenecektir. Eğer ilk satırı bu hale getirirseniz oynatıcı hep flash olarak başlayacaktır:

<div class="flowplayer" data-engine="flash">

Çalma Listesi Oluşturma

Çalma listesi yapmak için yapmanız gereken listedeki videoların adreslerini eklemek. Oynatıcı tüm videolar için ilk belirtilen videolardaki formatları deneyecektir.

<div class="flowplayer">
  <!-- ilk çalınacak video -->
  <video>
    <source type="video/webm" src="video.webm">
    <source type="video/mp4" src="video.mp4">
    <source type="video/ogg" src="video.ogv">
  </video>
  <!-- çalma listesi -->
  <div class="fp-playlist">
    <!-- hem link, hem liste -->
    <a href="http://mydomain.com/night1/640x360.mp4"></a>
    <a href="http://mydomain.com/night2/640x360.mp4"></a>
    <a href="http://mydomain.com/night3/640x360.mp4"></a>
    <a href="http://mydomain.com/night4/640x360.mp4"></a>
  </div>
</div>

İsterseniz ileri ve geri düğmeleri de ekleyebilirsiniz:

...
  </video>
  <a class="fp-prev">prev</a>
  <a class="fp-next">next</a>
  <!-- çalma listesi -->
  <div class="fp-playlist">
...