Video iskeleti
<video> ve birden çok <source> ile video iskeletini kurarsın.
video etiketi ve controls
HTML'in <video> etiketi bir videoyu sayfaya gömer. controls özniteliği tarayıcının yerleşik oynatma düğmelerini (oynat, duraklat, ses, tam ekran) gösterir; bu öznitelik boolean'dır, değeri gerekmez.
Video etiketi içine <source> etiketleri konur; her biri farklı bir biçimi temsil eder. Tarayıcı, desteklediği ilk biçimi oynatır.
Boş bir <video> öğesi tek başına hiçbir şey göstermez; kaynak eklenmelidir.
source etiketi ve type
Her <source> etiketi src ile dosya yolunu, type ile MIME türünü belirtir. Tarayıcı, type değerini okuyup kendi oynatabileceği biçimi seçer; desteklemediği dosyaları indirmekle zaman kaybetmez.
MP4 biçimi için type="video/mp4", WebM için type="video/webm" yazılır. Birden çok kaynak vermek, farklı tarayıcılarda tutarlı oynatmayı sağlar.
Uygulama video ve iki source ekle
Önceki dersin iskeletini al. <body> içine <video controls> etiketi ekle. Video içine iki <source> etiketi koy: biri src="/videolar/karadeniz.mp4" type="video/mp4", diğeri src="/videolar/karadeniz.webm" type="video/webm". Video etiketini kapat.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Doğa Belgeseli: Karadeniz</title>
</head>
<body>
<video controls>
<source src="/videolar/karadeniz.mp4" type="video/mp4">
<source src="/videolar/karadeniz.webm" type="video/webm">
</video>
</body>
</html>Kendini test et
-
Hangi öznitelik tarayıcının oynatma düğmelerini gösterir?
- autoplay
- muted
- controls
- loop
Cevabı göster
controls — Doğru! controls özniteliği oynat, duraklat ve ses düğmelerini gösterir.
-
MP4 kaynağının MIME türünü yaz
<source src="/videolar/karadeniz.mp4" type="____">Cevabı göster
<source src="/videolar/karadeniz.mp4" type="video/mp4"> -
Dosya uzantısını MIME türüyle eşleştir.
- .mp4
- video/mp4
- .webm
- video/webm
- .ogg
- video/ogg
- .mov
- video/quicktime