CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Proje sonu - Video oynatıcı

HTML kursu · İleri seviye · Ders 17/56

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

  1. <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.

  2. 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>

  3. 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ı

İleri seviye bölümündeki tüm dersler

1 İleri medya

  1. Loading lazy
  2. Decoding async
  3. Srcset ve sizes
  4. Width/height ve CLS
  5. Preload ve prefetch
  6. Özet - Performans galerisi

2 Picture ve responsive görsel

  1. Picture ve source
  2. Media özniteliği
  3. Type özniteliği
  4. Aspect-ratio
  5. Background ve img
  6. Özet - Responsive hero

3 Proje: Video oynatıcı

  1. Proje: Erişilebilir video oynatıcı
  2. Video iskeleti
  3. Track ve altyazı
  4. Poster ve önizleme
  5. Proje sonu - Video oynatıcı

4 Karmaşık formlar

  1. Form yönelimi
  2. Hidden input
  3. File upload
  4. Range ve color
  5. Output ve form event
  6. Özet - Ayarlar paneli

5 Meta veri ve SEO

  1. Meta description
  2. Open Graph
  3. Twitter card
  4. Canonical ve hreflang
  5. Title ve slug stratejisi
  6. Özet - SEO paketi

6 Proje: Schema.org işaretleme

  1. Proje: Schema.org işaretleme
  2. Itemtype ve itemid
  3. Itemprop
  4. Nested itemtype
  5. Proje sonu - Yapısal veri

7 Web bileşenleri HTML

  1. Template element
  2. Slot element
  3. Custom element isimleri
  4. Shadow DOM iskeleti
  5. Declarative shadow DOM
  6. Özet - Kart şablonu

8 Şablonlar ve partial

  1. Server-rendered vs client
  2. Partial HTML
  3. Data attributes
  4. Hydration hooks
  5. Noscript ve progressive
  6. Özet - Bileşen iskeleti

9 Proje: Dashboard widget

  1. Proje: Dashboard widget
  2. Widget iskeleti
  3. Veri görsel yapı
  4. Şablon ve slot
  5. Proje sonu - Widget

10 İleri seviye finali

  1. Meydan okuma - Responsive görsel
  2. Meydan okuma - Erişilebilir video
  3. Meydan okuma - Karmaşık form
  4. Meydan okuma - SEO ve yapısal veri
  5. Meydan okuma - İleri seviye projesi