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:

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.

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan HTML 5 Dersleri - Bölüm 2 - Yeni elementler başlıklı makalemizde article, aside ve audio hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious