Html ile Web İşlemleri 22 - Video Kullanımı

MEDYA ELEMANLARI

HTML5 Video Kullanımı

<video> etiketi, HTML belgesine video eklemek için kullanılır. Eski sürümlerde video eklemek için eklenti yüklenmesi gerekir. HTML5 ile video eklemek, resim eklemek kadar basittir. <video> etiketi, </video> kapama etiketi ile birlikte kullanılır. Kullanıcının video oynatabilmesi, duraklatabilmesi gibi temel denetimler aşağıdaki HTML kodu ile yapılır.

<video src="video.mp4" controls="controls"> </video>

1. <video> Etiketi

<video> etiketi, videonun nasıl oynatılacağını belirten özelliklere sahiptir.

<video width="600" height="500" controls="controls">
<source src="film.mp4" type="video/mp4">
<source src="film.ogg" type="video/ogg">
<source src="film.webm" type="video/webm">
Tarayıcınız video ögesini desteklemiyor.
</video>

Source etiketine type özelliğini eklemek web site hızını arttırır. Type özelliği belirtilmediğinde tarayıcı oynatabileceği videoyu buluncaya kadar her video dosyasını yükler.

Sıra Sizde

İçeriğinde video bulunan web sitelerinin kaynak kodlarını inceleyerek video ekleme yöntemlerini ve kullanılan HTML etiketi özelliklerini arkadaşlarınız ile paylaşınız.

2. Controls Özelliği

<video controls> özelliği videonun oynatılabilmesi için gereken oynat (play), durdur (pause), ses ayarı (volume) ve tam ekran (full screen) ögelerini içeren medya oynatıcı aracını oluşturur. Kaynak dosya belirtilmez ise sadece medya oynatıcı oluşturulur ve sesiz modda görünür (Görsel 3.35). Kaynak belirtildiğinde tam ekran modu da aktif olur.

<video controls>
<source src=" " type="video/mp4">
Tarayıcınız video ögesini desteklemiyor.

</video>

Görsel 3.35: HTML5 medya oynatıcı temel ögeler

3. Src Özelliği

Src özelliği, açılan HTML belgesinde video dosyasının sunucudaki (localhost veya web) kaynağını ifade eder. Src özelliği belirtilmediğinde sadece video oynatıcı oluşturulur.

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

4. Height ve Witdh Özellikleri

Yükseklik (height) ve genişlik (width) özelliklerini piksel (pixel) olarak ayarlamak için kullanılır. Height ve width özellikleri belirtilmediğinde medya oynatıcı, standart medya aracı boyutunda oluşturulur.

<video controls width="300px" height="200px">
<source src="video.mp4" type="video/mp4">
</video>

5. Autoplay Özelliği

Autoplay özelliği, HTML belgesi aktif olduğunda video dosyası medya oynatıcısı tarafından otomatik olarak oynatılmaya başlanır. Mobil tarayıcılarda bu özellik pasif olarak gelir.

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

6. Loop Özelliği

Loop özelliği, video dosyası medya aracından oynat butonu ile oynatılmaya başlar. Kullanıcı tarafından durdurulmadığı sürece video dosyası oynatılmaya devam eder.

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

7. Muted Özelliği

Muted özelliği ile açılan HTML belgesinde video dosyasının medya oynatıcıdaki varsayılan durumu sessiz (muted) olarak ayarlanır.

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

8. Poster Özelliği

Poster özelliği, video oynatıcı arka planında (background) src özelliği ile belirtilen video görseli dışında bir görsel görüntülenmesini sağlar (Görsel 3.36). Poster özelliği kullanılmaz ise medya oynatıcıda video dosyasının ilk karesi arka planı oluşturur.

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

Görsel 3.36: Poster özelliği kullanımı

9. Preload Özelliği

Preload özelliği ile açılan HTML belgesinde video dosyasının önyüklemesinin yapılıp yapılmayacağı kararı verilir. Önyükleme yapılacak ise preload=auto, yapılamayacak ise preload=none olarak bildirilir.

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

HTML5 <video> ögesine CSS aracılığıyla stil uygulama olanağı sağlar. CSS kullanarak kenarlık eklenir, video opaklığı ayarlanır, filtre uygulanır ve videoda 3D dönüşüm yapılır. HTML5 ayrıca JavaSript tarafından video oynatmayı kontrol etmek için kullanılabilecek yöntemler, özellikler ve olaylar sağlar.

Uygulama

<video> etiketini kullanarak web sayfasına video ekleme işlemini yönergeler doğrultusunda gerçekleştiriniz.

1. Adım: Temel HTML yapısını metin düzenleme programında oluşturunuz.
2. Adım: <body> etiketi içine <video> blokunu ekleyiniz.
3. Adım: “http://meb.ai/KR71t6” URL adresini kullanarak HTML belgenize video ekleyiniz.

<source src=" http://meb.ai/KR71t6" type="video/mp4">

4. Adım: HTML belgenizi tarayıcıda görüntüleyiniz.
5. Adım: Videoyu oynatınız, video görüntülenmiyorsa kodlarınızı gözden geçiriniz.
6. Adım: <video> blokunun altına yeni bir <video> bloku oluşturunuz.
7. Adım: “http://meb.ai/UeSk1O” URL adresini kullanarak HTML belgenize video ekleyiniz.

<source src="http://meb.ai/UeSk1O" type="video/mp4">

Adım 8: Adım 3 ve 4 basamaklarını farklı videolar için tekrarlayınız.