Yayınlanma tarihi: 20 Ağustos 2020
Altyazılar ve ekran okuyucu açıklamaları, birçok kullanıcının videolarınızı deneyimleyebilmesinin tek yoludur. Bazı yargı alanlarında bunlar yasa veya yönetmelik gereği zorunludur. WebVTT (Web Videosu Metin Parçaları) biçimi, altyazı gibi zamanlanmış metin verileri sunarak videolarınızı daha etkili bir erişilebilir.
<track> etiketi ekleme
Web videosuna altyazı veya ekran okuyucu açıklamaları eklemek için <video> etiketi içine bir <track> etiketi ekleyin. Altyazılar ve ekran okuyucuya ek olarak
açıklamalar, <track> etiketleri altyazılar ve bölüm başlıkları için de kullanılabilir.
<track> etiketi, referans verilen içeriği işaret eden bir src özelliğine sahip olması açısından <source> öğesine benzer. <track> etiketi için WebVTT dosyasını işaret eder.
label özelliği, belirli bir parçanın arayüzde nasıl tanımlanabileceğini belirtir.
Birden fazla dile parça sağlamak için her dil için ayrı bir <track> etiketi ekleyin.
sağladığınız WebVTT dosyasını seçin ve srclang kullanarak dili belirtin
özelliğini gönderin.
İki <track> etiketi içeren bu örnek <video> etiketine göz atın.
<video> öğesinin alt öğesi olarak bir <track> öğesi 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>
Buradaki örnek bir videoyu da Glitch'te görüntüleyin.
WebVTT dosya yapısı
Demo için varsayımsal bir WebVTT dosyasını burada bulabilirsiniz. Bu, işaret eder. Her işaret, gösterilecek bir metin blokudur ve reklamın görüntülendiği zaman aralığına bağlı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 öğe bir işaretçi'dir. Her işaretin bir başlangıç ve bitiş zamanı vardır. Bunlar bir okla ayrılır ve ardından işaret metni gelir. İşaretler,
railroad ve manuscript gibi kimlikler. İş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çi süreleri hours:minutes:seconds.milliseconds biçimindedir. Ayrıştırma işlemi katı kurallara tabidir.
Yani, gerekirse sayılar sıfır olarak doldurulmalıdır: saat, dakika ve saniye
İki rakam (sıfır değeri için 00) ve milisaniye üç rakam içermelidir
(sıfır değeri için 000). Live WebVTT Validator'da, zaman biçimlendirmesindeki hataları ve sıra dışı saatler gibi sorunları kontrol eden mükemmel bir WebVTT doğrulayıcısı bulunur.
VTT dosyasını manuel olarak oluşturabilirsiniz. Bununla birlikte, sizin için bu dosyaları oluşturan birçok hizmet vardır.
Önceki örneklerimizde görebileceğiniz gibi, WebVTT biçimi oldukça basittir. Metin verilerinizi zamanlamayla birlikte eklemeniz yeterlidir.
Ancak altyazılarınızın solda veya sağda hizalanarak farklı bir konumda oluşturulmasını istiyorsanız ne yapabilirsiniz? Altyazıları mevcut konuşmacının konumuyla hizalamak veya kameradaki metnin önüne geçmemek için bu işlemi yapabilirsiniz. WebVTT, bunun için ayarları tanımlar.
ve daha fazlasını doğrudan
.vtt dosyası yükleyin. Altyazı yerleşiminin nasıl tanımlandığına dikkat etmek için
ayarlarını değiştirebilirsiniz.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
CSS kullanarak işaretlere stil verme özelliği de kullanışlı özelliklerden biridir. Arka plan olarak gri doğrusal degrade, tüm altyazılar için papayawhip ön plan rengi ve tüm kalın metinler için peachpuff rengi kullanmak isteyebilirsiniz.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Tek tek veya site bağlantılarında stil ve etiketleme WebVTT spesifikasyonu, gelişmiş örnekler için iyi bir kaynaktır.
Metin parçası türleri
<track> öğesinin kind özelliğini fark ettiniz mi? Belirli bir altyazı parçasının videoyla olan ilişkisini belirtmek için kullanılır. kind özelliğinin olası değerleri şunlardır:
captions: Transkriptlerden ve seslerin çevirilerinden alınan altyazılar için kullanılır. İşitme engelliler ve videonun sessiz oynatıldığı durumlar için uygundur.subtitles: Altyazılar için yani, videonun ana dilinden farklı bir dil kullanmayın.descriptions: Video içeriğinin görsel bölümlerinin açıklamaları için kullanılır. Görme engelliler için uygundur.chapters: Kullanıcı videoda gezinirken gösterilmesi amaçlanmıştır.metadata: Görünmez ve komut dosyaları tarafından kullanılabilir.
Artık bir videoyu erişilebilir ve erişilebilir hale getirmenin temellerini biliyorsunuz. daha karmaşık kullanım alanlarını merak ediyor olabilirsiniz. Daha fazla bilgi Medya çerçeveleri ve bunların eklemenize nasıl yardımcı olabileceği videoları web sayfanıza ekleyebilirsiniz.