HTML
Proje sonu - Video oynatıcı
Tüm video tekniklerini birleştirip erişilebilir oynatıcıyı dokümante edersin.
figure ve figcaption ile birleştir
Son derste tüm parçaları birleştiriyoruz: video, iki kaynak, iki altyazı izi, poster ve preload. Tümünü <figure> içine alıp altına <figcaption> ekleyerek videonun başlığını ve süresini gösteririz.
Sayfaya ayrıca erişilebilirlik notu olarak bir HTML yorumu ekleyeceğiz. Yorum tarayıcıda görünmez ama kaynağı okuyan geliştiricilere yardımcı olur.
Bu, projenin son adımı.
HTML yorumu ile not ekle
HTML yorumu <!-- ... --> sözdizimiyle yazılır ve tarayıcıda görünmez. Kaynak kodunda bırakılan kısa notlar, başka geliştiricilere (ya da gelecekteki sana) bir bölümün neden var olduğunu açıklar.
Erişilebilirlik notu olarak videonun altyazı ve poster içerdiğini yazacağız. Yorum kısa ve anlamlı olsun; gerekmedikçe uzun açıklamalardan kaçın.
Uygulama videoyu figure içine al, figcaption ve yorum ekle
Önceki dersin videosunu al. <body> içinde, video etiketinin üstüne bir HTML yorumu ekle: <!-- Erişilebilir oynatıcı: altyazılar ve poster dahil -->. Sonra videoyu <figure> içine al. Video etiketinin altına <figcaption>Doğa Belgeseli: Karadeniz — 12 dakika, altyazılı.</figcaption> ekle. Figure 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>
<!-- Erişilebilir oynatıcı: altyazılar ve poster dahil -->
<figure>
<video controls poster="/kapaklar/karadeniz.jpg" preload="metadata">
<source src="/videolar/karadeniz.mp4" type="video/mp4">
<source src="/videolar/karadeniz.webm" type="video/webm">
<track kind="captions" src="/altyazilar/karadeniz-tr.vtt" srclang="tr" label="Türkçe">
<track kind="captions" src="/altyazilar/karadeniz-en.vtt" srclang="en" label="İngilizce">
</video>
<figcaption>Doğa Belgeseli: Karadeniz — 12 dakika, altyazılı.</figcaption>
</figure>
</body>
</html>
Proje tamamlandı
Tebrikler! Erişilebilir bir video oynatıcı sayfası tamamladın. Şunları öğrendin:
<video> ve controls ile oynatma<source> ve type ile çoklu biçim<track> ve kind ile altyazıposter ve preload ile önizleme<figure> ve <figcaption> ile açıklama
Bu örüntüyü gerçek projelerinde tekrar kullanabilirsin. Erken başlayan erişilebilirlik, sonradan eklemekten her zaman kolaydır.
Kendini test et
-
<figure> içinde <figcaption> neyi tanımlar?
- Videonun kaynak dosyasını
- Videonun açıklayıcı başlığını
- Videonun süresini
- Videonun oynatma hızını
Cevabı göster
Videonun açıklayıcı başlığını — Doğru! <figcaption> videonun açıklayıcı başlığını veya açıklamasını tanımlar.
-
figcaption içeriğini tamamla
<figcaption>Doğa Belgeseli: Karadeniz — 12 dakika, ____.</figcaption>
Cevabı göster
<figcaption>Doğa Belgeseli: Karadeniz — 12 dakika, altyazılı.</figcaption>
-
Etiketi amacıyla eşleştir (özet).
- video
- video oynatma
- source
- biçim seçeneği
- track
- altyazı ya da bölüm
- figure
- içerik grubu
- figcaption
- açıklama yazısı
Sıradaki ders: Form yönelimi
