HTML ile erişilebilir video oynatıcı: altyazı, metin dökümü ve klavye kontrolü

Bir video rehberi yalnızca ses açıkken anlaşılabiliyorsa birçok okuyucu için eksik kalır. Toplu taşımada sessiz izleyen kişi, işitme güçlüğü yaşayan ziyaretçi veya videodaki bir adımı metinden tekrar bulmak isteyen okuyucu farklı ihtiyaçlara sahiptir. Bu rehberde HTML’in yerleşik video öğesini kullanarak altyazı ve metin dökümü olan bir sayfa hazırlıyoruz. Özel oynatıcı düğmelerini sıfırdan yazmak yerine tarayıcının sunduğu temel kontrollerle başlıyoruz.

1. Dosyaları aynı klasöre alın

Örnek için kendi videonuzu video.mp4, kapak görselinizi kapak.jpg adıyla kaydedin. Altyazı dosyası altyazi-tr.vtt olacak. Aşağıdaki HTML’i index.html olarak saklayın. Bu dosya isimleri örnektir; gerçek medya dosyalarını siz sağlamalısınız. Bir dosyanın uzantısını değiştirmek biçimini dönüştürmez. MP4 kapsayıcı içindeki kodlayıcıların tarayıcıda desteklendiğini ayrıca kontrol edin.

2. Sayfanın temel kodu

controls tarayıcının oynatma arayüzünü açar. Otomatik oynatmayı eklemiyoruz; ziyaretçi videoyu kendisi başlatır. Görüntünün genişliği dar ekranlara uyum sağlayacak biçimde sınırlandırılır. Video yanında görünen açıklama ve metin dökümü, içeriğin video başlamadan anlaşılmasını sağlar.

<!doctype html>
<html lang="tr">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Üç sahneli video rehberi</title>
<style>
body { font: 18px/1.65 system-ui; max-width: 850px; margin: 32px auto; padding: 0 20px; }
video { display: block; width: 100%; height: auto; background: #142036; }
a:focus-visible, summary:focus-visible { outline: 3px solid #245acb; outline-offset: 4px; }
</style>
<main>
<h1>Üç sahneli video projesi nasıl düzenlenir?</h1>
<p id="aciklama">Senaryo, ses ve çıktı klasörlerini ayıran kısa uygulama.</p>
<video controls preload="metadata" poster="kapak.jpg" aria-describedby="aciklama">
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="altyazi-tr.vtt" srclang="tr" label="Türkçe" default>
  Tarayıcınız bu videoyu oynatamıyor.
</video>
<p><a href="video.mp4">Video dosyasını aç</a> · <a href="altyazi-tr.vtt">Türkçe altyazıyı aç</a></p>
<section aria-labelledby="dokum">
<h2 id="dokum">Metin dökümü</h2>
<p><strong>Anlatıcı:</strong> Önce senaryo klasörünü açıyoruz.</p>
<p>[Ekranda senaryo, ses ve teslim klasörleri gösteriliyor.]</p>
<p><strong>Anlatıcı:</strong> Son videoyu teslim klasörüne kaydediyoruz.</p>
</section>
</main>
</html>

3. WebVTT altyazısını hazırlayın

WebVTT dosyasını aşağıdaki örnekle oluşturun; zamanları kendi konuşmanıza göre değiştirin. İlk satırdaki WEBVTT ve ardından gelen boş satır önemlidir. Buradaki zamanlarda virgül yerine nokta kullanılır. SRT dosyasını yalnızca yeniden adlandırmak doğru bir dönüşüm yöntemi değildir.

WEBVTT

00:00:00.500 --> 00:00:03.000
Önce senaryo klasörünü açıyoruz.

00:00:03.200 --> 00:00:06.500
Son videoyu teslim klasörüne kaydediyoruz.

4. Yerel sunucuyla deneyin

Bazı tarayıcı davranışları dosyayı doğrudan açtığınızda farklılaşabilir. Çalışma klasöründe python -m http.server 8000 --bind 127.0.0.1 komutunu kullanıp http://127.0.0.1:8000/ adresini açın. İşiniz bitince terminalde sunucuyu durdurun. Bu yerel sunucu yayın hizmeti değildir; dosyaları kendi bilgisayarınızda denemek içindir. Sayfada videoyu başlatın ve altyazı düğmesini kontrol edin.

5. Altyazıyla metin dökümünü ayırın

Altyazı, izleme sırasında sesle eşleşen kısa parçalar sağlar. Metin dökümü ise içeriği baştan sona okumaya ve aranan adımı bulmaya yardımcı olur. Ekranda gösterilen fakat seslendirilmemiş önemli bilgiyi dökümde açıklayın. Örneğin yalnızca işaret edilen dosya adı anlatımda geçmiyorsa metne eklemek gerekir. Açıklama ile gerçek konuşmayı karıştırmamak için sahne notlarını köşeli parantez içinde belirtmek anlaşılır bir yöntemdir.

6. Klavyeyle ve sessiz izleyin

Fare kullanmadan Tab tuşuyla bağlantılara ve oynatıcıya ulaşın. Odak hangi öğede görünüyor, video durdurulabiliyor mu, altyazı seçilebiliyor mu kontrol edin. Ardından sesi kapatıp videoyu izleyin. Kritik bilgi yalnızca müzik veya ses efektine bağlı kalıyorsa gerekli açıklamayı ekleyin. W3C rehberi, içerik için gerekli konuşma dışı seslerin de altyazıda aktarılmasını vurgular. Her küçük arka plan sesini yazmak yerine anlamı etkileyenleri seçin.

7. Yayına almadan önce

Altyazı dosyasının gerçekten yüklendiğini, Türkçe karakterlerin bozulmadığını ve telefon ekranında metnin okunabildiğini kontrol edin. Kaynak dosya, kapak, altyazı ve metin dökümünün aynı video sürümüne ait olması gerekir. Video güncellenirse dökümü ve zamanları da gözden geçirin. Bu temel yapı erişilebilir bir başlangıçtır; tüm sitenin erişilebilirlik değerlendirmesinin yerine geçmez. Oynatıcının çalışması kadar, anlattığınız adımların bütün ziyaretçiler için takip edilebilir olması da önemlidir.

İlgili okumalar

• Python ile video proje klasörü oluşturma: dosyaları ilk günden düzenleyin
• FFmpeg ile yatay videodan dikey video hazırlama: merkez kırpma ve kadraj kontrolü