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

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

by Hasan Yasin Türkyılmaz Temmuz 09, 2011

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:

Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.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

Özellik Değer Tanım
audio muted Sesin varsayılan durumunu tanımlar. Varsayılan olarak sessiz atanmıştır.
autoplay autoplay Sunuluyorken,hazır olur olmaz çalması anlamına gelir.
controls controls Sunuluyorken kontrol butonları bulunur play gibi
height pixels Video çaların yüksekliğini ayarlar.
loop loop Sunuluyorken, her bitişten sonra tekrar etme sayısını tanımlar.
poster url Video gösterimdeyken bir resime dair url belirlemeye yarar.
preload preload Sunumdayken, web sayfası ile beraber video da yüklenecektir, ve hazır olduğunda çalışacaktır. autoplay yok sayılır.
src url Calınacak videonun kaynağı,urlsi.
width pixels Video çaların genişliğini tanımlar.

Bültenime kaydol!

İster soru sor, ister yazılarımdan ve etkinliklerimden haberdar ol...

Hasan Yasin Türkyılmaz

Dijital stratejist, growth hacker, pazarlama ve reklam danışmanı, eğitmen, konuşmacı, yazar @bilgeadam @g4asw @hyturkyilmaz

Related Articles

%d blogcu bunu beğendi: