CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Poster ve önizleme

HTML kursu · İleri seviye · Ders 16/56

poster özniteliği ve preload ile önizleme davranışını ayarlarsın.

poster özniteliği

poster özniteliği, video oynatılmadan önce gösterilen kapak görselini belirler. Değer bir görsel dosyasının yoludur (ör. poster="/kapaklar/karadeniz.jpg"). Kullanıcı oynat düğmesine basana kadar bu görsel görünür.

Poster, video ilk karesi yüklenmeden önce sayfanın boş görünmesini engeller ve videonun içeriği hakkında ipucu verir. Erişilebilir oynatıcılarda poster tercih edilir.

preload özniteliği

preload özniteliği tarayıcıya videonun ne kadarının önceden yüklenmesi gerektiğini söyler. Üç değer alır:

  • auto: tüm videoyu önbelleğe alır.
  • metadata: yalnızca süre ve boyut gibi meta verileri yükler.
  • none: kullanıcı oynatana kadar hiçbir şey yüklenmez.

Mobil veri tasarrufu için metadata iyi bir denge sunar.

Uygulama poster ve preload ekle

Önceki dersin videosunu al. <video controls> etiketine poster="/kapaklar/karadeniz.jpg" ve preload="metadata" özniteliklerini ekle. Diğer içerik aynı kalsın.

Ö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 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>
  </body>
</html>

Kendini test et

  1. preload özniteliğine hangi değer verilirse video kullanıcı oynatana kadar yüklenmez?

    • auto
    • metadata
    • lazy
    • none
    Cevabı göster

    none — Doğru! preload="none" videonun kullanıcı oynatana kadar yüklenmesini engeller.

  2. Poster görselinin yolunu yaz

    <video controls poster="____" preload="metadata"></video>
    Cevabı göster 
    <video controls poster="/kapaklar/karadeniz.jpg" preload="metadata"></video>

  3. Özniteliği amacıyla eşleştir.

    poster
    kapak görseli
    preload
    önyükleme miktarı
    controls
    oynatma düğmeleri
    autoplay
    otomatik başlatma

İ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