HTML

flowplayer HTML5 entegre

flowplayer HTML5 entegre

flowplayer HTML5 entegre

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

Adım 1

1

 

Adım 2

Şimdi sayfamızın

taglarının arasına aşağıdaki kodları yazıyoruz.

Adım 2

1

2

3

4

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.

Adım 3

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

Adım 3

1

2

3

4

5

6

7

<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 sibu 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: 

Açılış Resmi Seçimi

 

"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: 

Video Formatları

1

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.

Çalma Listesi Oluşturma

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<div class="flowplayer"

  

  <video>

    <source type="video/webm" src="video.webm"

    <source type="video/mp4" src="video.mp4"

    <source type="video/ogg" src="video.ogv"

  video>

  

  div class="fp-playlist"

    

    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: 

 ileri ve geri

1

2

3

4

5

6

7

...

  video>

  a class="fp-prev">preva

  a class="fp-next">nexta

  

  div class="fp-playlist"

 

HENÜZ YORUM YAPILMAMIŞ

YORUM GÖNDER