HTML Web

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.

html5-video-format

 

Kullanım Şekli:

 

<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.

html5-video-tarayıcılar

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

html5-video-özellikler

 

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:

 

Kod  Çıktısı:

html5-video-controls-2

 

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:

Kod Çıktısı:

html5-video-autoplay

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:

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:

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:

Kod Çıktısı:

html5-video-poster

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:

Kod Çıktısı:

html5-video-controls-21

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ı
Rize/Ardeşen doğumlu.
Karadeniz Teknik Üniversitesi, İstatistik ve Bilgisayar Bilimleri mezunu.

.NET teknolojileri alanında ihtisas yapma amacında.
İstatistik ve nevi ilimleri sevmekte, fırsat bulduğunda üzerine çalışmayı amaçlamakta.

Basın İlan Kurumunda yazılım geliştirme uzmanı olarak çalışmaktadır.

  • -VioMatrix-

    Ellerinize sağlık faydalandım.