Top

HTML 5 Dersleri – Bölüm 3 – Video

HTML 5 Dersleri – Bölüm 3 – Video

Web üzerinde video

Şu ana kadar, bir web sayfası üzerinde video göstermenin standardı yoktu.

Günümüzde, flash gibi bir eklenti ile videolar gösterilmekte. Bununla beraber, tarayıcıların hepsi aynı tür eklentilere sahip değiller.

HTML5 video eklemek için bir standart belirlemekte, video elementi ile.


Video Formatları

Varsayılan olarak, video elementince desteklenen 3 tip format mevcut:

FormatIEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No
  • Ogg = Ogg dosyaları Theora video codec’i  ve Vorbis audio codec’i ile çalışır.
  • MPEG4 = MPEG 4 dosyaları H.264 video codec’i ve AAC audio codec’i ile çalışır.
  • WebM = WebM dosyaları VP8 video codec’i ve Vorbis audio codec’i ile çalışır.

Nasıl çalışır?

HTML5’te video göstermek için, ihtiyacınız olan şey:

<video src=”movie.ogg” controls=”controls”>
</video>

Control özelliği oynatmayı eklemek için, durdurmayı, ve de ses kontrollerini…

Width ve height özelliklerini eklemek de iyi bir fikir olur elbette.

<video> ve </video>elementlerinin arasına içerik olarak yazı konulur video elementini desteklemeyen tarayıcılar için:

Yukarıdaki Ogg dosyasının örneğinde olduğu gibi, Opera, Chrome ve Firefox’ta çalışacaktır.

Çalışan bir video ekleyebilmek için Internet Explorer, Safari ve Chrome’un ileri sürümlerinde,MPEG4 ve WebM dosyasını eklemeliyiz.

Video elementi çoklu source elementine izin verir. Source elementi farklı video dosyalarına bağlanabilir. Tarayıcı ilk tanımlanmış olanı kullanacaktır:

Tüm <video> Özellikleri

ÖzellikDeğerTanım
audiomutedSesin varsayılan durumunu tanımlar. Varsayılan olarak sessiz atanmıştır.
autoplayautoplaySunuluyorken,hazır olur olmaz çalması anlamına gelir.
controlscontrolsSunuluyorken kontrol butonları bulunur play gibi
heightpixelsVideo çaların yüksekliğini ayarlar.
looploopSunuluyorken, her bitişten sonra tekrar etme sayısını tanımlar.
posterurlVideo gösterimdeyken bir resime dair url belirlemeye yarar.
preloadpreloadSunumdayken, web sayfası ile beraber video da yüklenecektir, ve hazır olduğunda çalışacaktır. autoplay yok sayılır.
srcurlCalınacak videonun kaynağı,urlsi.
widthpixelsVideo çaların genişliğini tanımlar.
No Comments