Günümüzde, web sayfalarının görselliği ve etkileşimi ön plandadır. Bu bağlamda, HTML’in video etiketi (<video>
) ile web sitenize video eklemek oldukça popüler bir yöntemdir. İşte HTML video eklemenin temel konseptleri ve örnek kod blokları:
Temel Video Etiketi Kullanımı:
HTML video eklemek için <video>
etiketini kullanırız. Aşağıda temel bir video etiketi örneği bulunmaktadır:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Video Örneği</title>
</head>
<body>
<h1>Web Sayfamıza Hoş Geldiniz!</h1>
<!-- Temel Video Etiketi -->
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Yukarıdaki örnekte:
width
veheight
: Videonun genişliği ve yüksekliği piksel cinsinden belirlenir.controls
: Oynatma kontrol panelini görüntüler (oynat, duraklat, ses kontrolü, vb.).<source>
etiketi: Farklı video formatları için destek ekler. Bu örnektevideo.mp4
adlı bir video dosyasına bağlantı verilmiştir.
Video Otomatik Oynatma ve Döngü:
Videoları otomatik olarak oynatmak ve döngü içinde çalıştırmak için autoplay
ve loop
özelliklerini kullanabiliriz:
<video width="640" height="360" controls autoplay loop>
<source src="video.mp4" type="video/mp4">
</video>
Altyazı Eklemek:
HTML video etiketi, altyazı eklemek için track
elementini destekler:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="english.vtt">
<track label="Türkçe" kind="subtitles" srclang="tr" src="turkish.vtt">
</video>
Yukarıdaki örnekte, track
etiketi ile farklı dillerde altyazı dosyaları eklenmiştir (english.vtt
ve turkish.vtt
).
HTML video etiketi, zengin medya içeriği eklemek için güçlü bir araçtır. Yukarıdaki örneklerle başlayarak, video etiketinin sunduğu diğer özellikleri ve daha karmaşık kullanım senaryolarını keşfetmek, web sayfanıza dinamik ve etkileşimli içerik eklemenin heyecan verici bir yolunu sunabilir.