HTML5 Video Kullanımı

Merhaba,
Bu yazıda HTML5 ile gelen ögelerden olan, <video> elementini anlatmaya çalışacağım.
Daha önceki HTML sürümlerinde herhangi bir video dosyasını oynatabilmek için harici kodlara (scriptlere) ve eklentilere ihtiyaç duyulmaktaydı. Fakat bu son sürümle beraber desteklenen tarayıcılarda, gerekli etiketlerle elementler çağrıldığında rahatlıkla video dosyaları HTML5’ in kendi medya aracı ile oynatılabilmektedir. Şimdi <video> elementini işlemeye başlayalım.

1- <video> desteklenen dosya türleri ve tarayıcılar

<video>…</video>  tagları (etiketleri) arasında tanımlanarak oluşturulur.

 

Kullanım Şekli:

<video controls>
 
     <!--MP4 tipi video dosyası için-->
     <source src="video.mp4" type="video/mp4">
 
     <!--Ogg tipi video dosyası için-->
     <source src="video.ogg" type="video/ogg">
 
     <!--WebM tipi video dosyası için-->
     <source src="video.webm" type="video/webm">
 
</video>

 

<source>, <video> elementleri içerisinde kullanılır. Kaynak manasına gelmektedir. Kullanılacak medya ögesinin kaynak dosyası (src) ve dosya tipi (type) bu kısımda belirlenir.

Aşağıdaki görselde <video>’nun hangi tarayıcılar tarafından desteklendiğini gösteren bir görsel bulunmaktadır.

2. <video> özellikleri ve kullanımı 

 

2.1. controls özelliği :

<video controls>şekilde bir kullanımı vardır. Videonun oynatılabilmesi için gerekli olan play (oynat), pause (durdur), volume (ses ayarı) ve full screen (tam ekran) öğelerinini içeren medya aracını oluşturulur. Kullanılması gereken temel video şeklini ifade eder.

İçerisinde kaynak dosya belirtilmediğinde sadece medya oynatıcısı oluşturulur ve sessiz modda görünür. Kaynak belirtildiğinde ise tam ekran modu da aktif olur.

Kullanım Şekli:

<video controls>
   <source src="UyanEyGozlerim.mp4" type="video/mp4">
</video>

 

Kod  Çıktısı:

 

2.2. autoplay özelliği :

Bu özellik ile sayfa açıldığında video dosyası medya aracı tarafından otomatik olarak oynatılmaya başlar ve video bitene kadar çalmaya devam eder.

Kullanım Şekli:

<video controls autoplay="autoplay">
   <source src="UyanEyGozlerim.mp4" type="video/mp4">
</video>

Kod Çıktısı:

2.3. loop ve muted özelliği :

loop özelliği; açılan sayfada video dosyası medya aracından play (oynat)  ile oynatılmaya başlar. Kullanıcı tarafından müdahale edilmediği sürece, video dosyası bitse bile yeniden başlayacak şekilde sürekli oynatılmaya devam eder.

muted özelliği; açılan sayfada video dosyasının medya aracındaki varsayılan durumu sessiz (muted) olarak ayarlanır.

Kullanım Şekli:

<video controls loop>
   <source src="UyanEyGozlerim.mp4" type="video/mp4">
</video>

<video controls muted>
   <source src="UyanEyGozlerim.mp4" type="video/mp4">
</video>

2.4. preload ve src özelliği :

preload özelliği ; video dosyasının açılan sayfada ön yüklemesinin yapılıp yapılmayacağı kararı verilir. preload=”none” olduğunda ön yükleme yapılmayacağını bildiririz. preload=”auto” olduğunda ise ön yükleme yapılacağını bildiririz.

Kullanım Şekli:

<video controls preload="auto | none | metadata">
     <source src="UyanEyGozlerim.mp4" type="video/mp4">
</video>

src özelliği; oynatılmasını istediğimiz video dosyasının sunucumuzdaki (localhost veya web) kaynağını belirtiriz. Yukarıda örneklediğim tüm kodlarda, kullanım örneği vardır.

2.5. poster özelliği :

Bu özellik ile video oynatılmadan önce, medya aracında videonun görseli dışında bir resim görüntülenmesini sağlar. Bir nevi videoya arka plan resmi eklenmiş olur.

Kullanım Şekli:

<video controls poster="yayla.jpg">
     <source src="UyanEyGozlerim.mp4" type="video/mp4">
</video>

Kod Çıktısı:

2.6. height ve width özelliği :

Videoyu oynatacak medya aracının yükseklik (height) ve genişliği (width) üzerinde ayarlama yapılmasını mümkün kılar. Değeri pixel(piksel) olarak tanımlanmıştır.

Kullanım Şekli:

<video controls height="500px" width="500px">
   <source src="UyanEyGozlerim.mp4" type="video/mp4">
</video>

Kod Çıktısı:

video elementinin anlatımı da bu şekilde sona ermiş bulunmaktadır. Yukarıda temel olarak<video>‘nun nasıl kullanılması gerektiği hususunda bilgiler verilmiştir. Bunları çeşitlendirmek ve kullanımı zenginleştirmek ilgili tasarımcı ve programcılara kalmıştır.

Bu yazı ile birlikte HTML5 derslerini sonlandırmış bulunmaktayım. Şimdiye kadar yazılmış tüm yazılar ile temel ve orta düzeyde HTML5’i öğrenmiş olunur. Daha ilerisi yazılımcının CSS3, JavaScript vb. diğer tasarım elemanlarını kullanabilme kabiliyeti ile alakalıdır.

İnşallah bu ders dizisi faydalı olmuştur.
Selamet ile.

---

HTML 5 Müfredatı

1. HTML5 Nedir ?
2. HTM5 – Temel Etiketler ve Özel Karakterler
3. Metin Biçimlendirme(Text Formatting)
4. Bağlantı (Link) Yapısı
5. Tablo (Table) Kullanımı
6. Liste(Lists) Kullanımı
7. Form Nesneleri ve Kullanımı ~ 1
8. Form Nesneleri ve Kullanımı ~ 2
9. Audio Kullanımı
10. Video Kullanımı