HTML Video Ekleme İşlemi Nasıl Yapılır?

HTML5 ile web sitenize eklenti kullanmadan kolayca video yerleştirebilirsiniz. Nasıl mı? İşte detaylar…

HTML5 ile Video Oynatmak Artık Çok Kolay

Eskiden web sitelerine video eklemek için Flash gibi eklentiler kullanmak gerekiyordu. Ancak bu hem güvenlik sorunlarına yol açıyor hem de mobil cihazlarda uyumsuzluk yaratıyordu. Neyse ki HTML5 ile birlikte gelen <video> etiketi sayesinde artık tarayıcılar doğrudan video oynatabiliyor.

<video> Etiketi Nasıl Kullanılır?

Aşağıda basit bir HTML video oynatma örneği yer alıyor:

<video width="360" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tarayıcınız video etiketini desteklemiyor.
</video>

controls özelliği sayesinde kullanıcı videoyu oynatabilir, durdurabilir veya sesi ayarlayabilir.

Video Etiketinde Kullanılabilecek Özellikler

• controls: Kontrol düğmelerini gösterir.
• autoplay: Sayfa yüklendiğinde videoyu otomatik oynatır (genellikle muted ile birlikte).
• muted: Videoyu sessiz başlatır.
• loop: Video bittiğinde yeniden başlatır.
• poster: Video başlamadan önce gösterilecek önizleme görselidir.

Tarayıcı Desteği ve Video Formatları

Her tarayıcı her video formatını desteklemez. Bu yüzden birden fazla format belirtmek önemlidir:

Format	MIME Türü	Destekleyen Tarayıcılar
MP4	video/mp4	Tüm modern tarayıcılar
WebM	video/webm	Chrome, Firefox, Opera
Ogg	video/ogg	Firefox, Chrome, Opera

Poster Kullanımı (Video Önizleme Görseli)

Videonuz başlamadan önce bir görsel göstermek isterseniz aşağıdaki gibi poster özelliğini kullanabilirsiniz:

<video controls poster="onizleme.jpg" width="360" height="240">
  <source src="video.mp4" type="video/mp4">
</video>

JavaScript ile Video Kontrolü

HTML5 video öğesini JavaScript ile kontrol etmek de mümkün. Örneğin:

<video id="video1" width="320" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<button onclick="document.getElementById('video1').play()">Oynat</button>
<button onclick="document.getElementById('video1').pause()">Durdur</button>

SEO Açısından Video Kullanımı

• Video dosyasının adı açıklayıcı olmalı (örnek: urun-tanitim.mp4).
• Poster görseline alt etiketi tanımlanabilir.
• Videonun içeriğini yazıyla da açıklamak arama motorları için faydalıdır.
• Sayfa hızı önemli olduğundan video boyutu optimize edilmelidir.

Kısacası HTML5 ile video eklemek artık hem kolay hem de modern tarayıcılarla tam uyumlu. Sadece birkaç satır kodla sayfanıza canlılık katabilirsiniz. Görsel içerikler kullanıcı deneyimini artırırken, sayfanızın da daha ilgi çekici hale gelmesini sağlar.