Proje: Erişilebilir video oynatıcı

HTML kursu · İleri seviye · Ders 13/56

5 derslik projenin genel bakışı: altyazılı video sayfası.

Proje: Erişilebilir video oynatıcı

Bu 5 derslik projede bir erişilebilir video oynatıcı sayfası yapacaksın. Her derste bir parça ekleyecek, sonunda tam bir oynatıcı elinde olacak.

Şunları kullanacaksın:

<video> ile video oynatma
<source> ile birden çok biçim
<track> ile altyazılar
poster ile kapak görseli
<figure> ve <figcaption> ile açıklama

Videonun başlığı Doğa Belgeseli: Karadeniz olacak.

Video ve erişilebilirlik

Bir video sayfasını herkes için kullanılabilir yapmak için üç şey şarttır:

Altyazı: işitme engelli izleyiciler konuşmaları okur.
Açıklama: görme engelli izleyiciler sahneyi sesli betimle dinler.
Denetimler: klavye ve ekran okuyucu oynatmayı yönetebilir.

HTML'in <video> ve <track> etiketleri bu ihtiyaçları yerleşik olarak karşılar. Bu projede her üçünü de uygulayacağız.

Uygulama Boş belge iskeletini yaz

Projeye başlarken boş bir HTML belge iskeleti yaz. İçinde DOCTYPE, <html> (lang="tr" ile), <head> (meta charset utf-8, viewport, title) ve boş <body> bulunsun. Title içeriği Doğa Belgeseli: Karadeniz olsun.

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

Kendini test et

Bu projede hangi HTML etiketi video dosyasını taşır?
- audio
- video
- picture
- embed
Cevabı göster

video — Doğru! <video> etiketi bir video dosyasını sayfaya gömer.
Sayfa karakter kodlamasını belirt
```
<meta charset="____">
```
Cevabı göster
```
<meta charset="utf-8">
```
Proje parçalarını HTML etiketleriyle eşleştir.

video oynatıcı

<video>
altyazı

<track>
video açıklaması

<figcaption>
sayfa başlığı

<title>

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

Proje: Erişilebilir video oynatıcı