Bu makalede, videoları kitleniz için daha erişilebilir hale getirmek amacıyla altyazılar gibi zamanlanmış metin verilerini açıklamakta kullanılan WebVTT (Web Video Metin Parçaları) biçimi hakkında bilgi edineceksiniz.
Erişilebilirlik pasta kreması gibi değildir. İş Listesi’ne daha sonra sizi paylaşma umuduyla yaptığınız hiçbir şey olmaz. Altyazılar ve ekran okuyucu açıklamaları, birçok kullanıcının videolarınızı deneyimlemesinin tek yoludur ve bazı yargı alanlarında, yasalar veya yönetmelikler tarafından zorunludur.
<track> etiket ekle
Bir web videosuna altyazı veya ekran okuyucu açıklamaları eklemek için <video> etiketine <track> etiketi ekleyin. <track> etiketleri, altyazılara ve ekran okuyucu açıklamalarına ek olarak, altyazılar ve bölüm başlıkları için de kullanılabilir.
<track> etiketi, arama motorlarının videonun içeriğini anlamasına da yardımcı olabilir.
Ancak bu özellikler, bu makalenin kapsamı dışındadır.
<track> etiketi, referans verilen içeriğe işaret eden src özelliğine sahip olması bakımından <source> öğesine benzer. Bir <track> etiketi için WebVTT dosyasını işaret eder. label özelliği, belirli bir parçanın arayüzde nasıl tanımlanacağını belirtir.
Birden fazla dilde kanal sağlamak amacıyla, sağladığınız her WebVTT dosyası için ayrı bir <track> etiketi ekleyin ve srclang özelliğini kullanarak dili belirtin.
İki <track> etiketi olan örnek bir <video> etiketi aşağıda gösterilmiştir. Glitch'te görüntüleyebileceğiniz bir örnek de (source) vardır.
Bir <track> öğesini <video> öğesinin alt öğesi olarak ekleyin:
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
WebVTT dosya yapısı
Aşağıda, yukarıda bağlantısı verilen demo için varsayımsal bir WebVTT dosyası verilmiştir. Dosya, bir dizi işaret içeren bir metin dosyasıdır. Her ipucu, ekranda görüntülenecek bir metin bloğu ve gösterileceği zaman aralığıdır.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
Parça dosyasındaki her öğeye işaret adı verilir. Her işaretin bir başlangıç ve bitiş saati vardır. Bitiş zamanı okla ayrılır. Alttaki satırda da işaret metni bulunur. İşaretler, isteğe bağlı olarak aşağıdaki örnekte railroad ve manuscript gibi kimliklere de sahip olabilir.
İşaretler boş bir satırla ayrılır.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
İşaret saatleri hours:minutes:seconds.milliseconds biçimindedir. Ayrıştırma katı kurallı bir işlemdir.
Diğer bir deyişle, sayıların gerekirse sıfır dolgulu olması gerekir: saat, dakika ve saniye iki rakamdan oluşmalıdır (sıfır değer için 00), milisaniye ise üç basamaktan oluşmalıdır (sıfır değeri için 000). Live WebVTT Doğrulayıcı'da, zaman biçimlendirme hatalarını ve sıralı olmayan zamanlar gibi sorunları kontrol eden mükemmel bir WebVTT doğrulayıcısı bulunmaktadır.
VTT dosyasını manuel olarak oluşturabilirsiniz. Bunları sizin için oluşturacak birçok hizmet vardır.
Önceki örneklerimizde görebileceğiniz gibi WebVTT biçimi oldukça basittir. Zamanlamalarla birlikte metin verilerinizi eklemeniz yeterlidir.
Ancak, altyazılarınızın sola veya sağa hizalanarak farklı bir konumda oluşturulmasını istiyorsanız ne olur? Belki de altyazıları mevcut konuşmacının konumuyla
aynı hizaya getirebilir veya kamera önündeki metinlerden uzak tutabilirsiniz. WebVTT, bunu ve daha fazlasını doğrudan .vtt dosyasının içinde yapmak için ayarları tanımlar. Zaman aralığı tanımlarından sonra ayarlar ekleyerek altyazı yerleşiminin nasıl tanımlandığına dikkat edin.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
Kullanışlı bir diğer özellik de CSS kullanarak ipuçları şekillendirme olanağıdır. Arka plan olarak, tüm altyazılar için ön plan rengi ve
peachpuff renkli tüm kalın metinlerle birlikte gri bir doğrusal renk geçişini
kullanmak isteyebilirsiniz.papayawhip
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Tek tek işaretlerin stilini belirleme ve etiketleme hakkında daha fazla bilgi edinmek istiyorsanız gelişmiş örnekler için WebVTT spesifikasyonu iyi bir kaynaktır.
Metin parçası türleri
<track> öğesinin kind özelliğini fark ettiniz mi? Belirli metin parçasının videoyla olan ilişkisini göstermek için kullanılır. kind özelliğinin olası değerleri şunlardır:
captions: Transkriptlerin altyazıları ve olası seslerin çevirileri için. İşitme engelliler ve videonun sessiz olarak oynatıldığı durumlarda uygundur.subtitles: Altyazılar, videonun ana dilinden farklı bir dildeki konuşma ve metin çevirileri için kullanılır.descriptions: Video içeriğinin görsel bölümlerinin açıklamaları için. Görme engelli kişiler için uygundur.chapters: Kullanıcı videoda gezinirken gösterilmek üzere tasarlanmıştır.metadata: Görünmez ve komut dosyaları tarafından kullanılabilir.
Artık bir videoyu web sayfanızda kullanılabilir ve erişilebilir kılmanın temellerini öğrendiğinize göre, daha karmaşık kullanım alanlarını merak ediyor olabilirsiniz. Sıradaki videoda Medya çerçeveleri ve bunların gelişmiş özellikler sağlarken web sayfanıza video eklemenize nasıl yardımcı olabilecekleri hakkında bilgi edineceksiniz.