Yayınlanma tarihi: 20 Ağustos 2020
Birçok kullanıcının videolarınızı deneyimlemesinin tek yolu altyazılar ve ekran okuyucu açıklamalarıdır. Bazı yargı alanlarında yasalar veya yönetmelikler tarafından zorunlu tutuluyor bile. WebVTT (Web Video Metin Parçaları) biçimi, videolarınızı daha erişilebilir hale getirmek için altyazılar veya altyazılar gibi zamanlanmış metin verilerini tanımlamak için kullanılır.
<track>
etiket ekle
Web videosuna altyazı veya ekran okuyucu açıklamaları eklemek için <video>
etiketi içine bir <track>
etiketi ekleyin. Altyazılar ve ekran okuyucu açıklamalarına ek olarak <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 dil için parça sağlamak istiyorsanız sağladığınız her WebVTT dosyası için ayrı bir <track>
etiketi ekleyin ve srclang
özelliğini kullanarak dili belirtin.
İ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>
Ayrıca Glitch'te görüntüleyebileceğiniz bir örnek de vardır.
WebVTT dosya yapısı
Demo için varsayımsal bir WebVTT dosyası aşağıda verilmiştir. Bu, bir dizi işaret içeren metin dosyasıdır. Her işaret, ekranda gösterilecek bir metin bloğu ve bu metnin 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 öğ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. İşaretçilerde railroad
ve manuscript
gibi kimlikler de 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 zamanları hours:minutes:seconds.milliseconds
biçimindedir. Ayrıştırma işlemi katı kurallara tabidir.
Yani, gerekirse sayılar sıfırla doldurulmalıdır: saat, dakika ve saniye değerleri iki basamaklı (sıfır değer için 00), milisaniye değerleri ise üç basamaklı (sıfır değer için 000) olmalıdır. Live WebVTT Validator'da, zaman biçimlendirmesindeki hataları ve sıralı olmayan saatler gibi sorunları kontrol eden mükemmel bir WebVTT doğrulayıcısı vardır.
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ı konumuna göre hizalamak veya
kameraya bakan metinden uzak durmak için de kullanılabilir. WebVTT, bu ve daha fazlasını yapmak için ayarları doğrudan .vtt
dosyasında tanımlar. Altyazı yerleşiminin, zaman aralığı tanımlarından sonra ayarlar eklenerek nasıl tanımlandığını unutmayın.
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şaretlerin stilini belirleme ö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 işaretlerin stili ve etiketlenmesi hakkında daha fazla bilgi edinmek istiyorsanız 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 videonun ana dilinden farklı bir dildeki konuşma ve metin çevirileridir.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.
Bir videoyu web sayfanızda kullanıma sunma ve erişilebilir hale getirmeyle ilgili temel bilgileri anladığınıza göre daha karmaşık kullanım alanlarını merak ediyor olabilirsiniz. Medya çerçeveleri ve bu çerçevelerin, gelişmiş özellikler sunarken web sayfanıza video eklemenize nasıl yardımcı olabileceği hakkında bilgi edinin.