Bu makalede, WebVTT (Web Videosu Metin Parçaları) biçimi hakkında bilgi edineceksiniz. Altyazı gibi zamanlanmış metin verilerini açıklamak için kullanılır kullanarak videolarınızı kitleniz için daha erişilebilir hâle getirebilirsiniz.
Erişilebilirlik, pasta kreması gibi değildir. Bu, hiçbir zaman bir liste oluşturacaksınız. Altyazılar ve ekran okuyucu Çoğu kullanıcının videolarınızı deneyimlemesinin tek yolu açıklamalardır ve yasalar veya yönetmeliklerin gerektirdiği şekilde hareket etmeniz gerekir.
<track> etiket ekle
Bir web videosuna altyazı veya ekran okuyucu açıklaması eklemek için <track> ekleyin.
etiketi için <video> etiketini kullanabilirsiniz. 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, arama motorlarının videonun içeriğini anlamasına da yardımcı olabilir.
Ancak bu özellikler bu makalenin kapsamında değildir.
<track> etiketi, her ikisinde de src bulunan <source> öğesine benzer
özelliğini gönderin. Bir <track> etiketi için bir
WebVTT dosyası. label özelliği, belirli bir parçanın nasıl görüneceğini belirtir.
tespit edebilirsiniz.
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> etiketine sahip bir <video> etiketi aşağıda gösterilmiştir. Bir de
Glitch'te görüntüleyebilirsiniz (kaynak).
<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>
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 metin dosyası. Her işaret, gösterilecek bir metin blokudur ve reklam gösterileceği zaman aralığını belirtir.
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 bir öğeye işaret adı verilir. Her işaretin bir başlangıç zamanı ve
okla ayrılmış bitiş zamanı ve alt satırda işaret metni var. İşaretler
isteğe bağlı olarak aşağıdaki örnekte railroad ve manuscript gibi kimlikler de bulunur.
İşaretler boş bir çizgiyle 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 katı.
Yani, gerekirse sayı, saat, dakika ve saniye şeklinde doldurulmamalıdır.
İki rakam (sıfır değeri için 00) ve milisaniye üç rakam içermelidir
(sıfır değeri için 000). Mükemmel bir WebVTT doğrulayıcısı vardır.
Zaman biçimlendirme hatalarını kontrol eden Canlı WebVTT Doğrulayıcı ve
sorunları çözebilir.
VTT dosyasını kendiniz oluşturabilirsiniz. Bu dosyayı, size yardımcı olabilecek birçok hizmet olduğunu düşünerek sizin için oluşturabilirsiniz.
Önceki örneklerimizde görebileceğiniz gibi WebVTT biçimi oldukça basittir. Bunun için zamanlamalarla birlikte metin verilerinizi eklemeniz yeterlidir.
Ancak altyazılarınızın farklı bir konumda oluşturulmasını
sola mı sağa mı hizalama? Altyazıları mevcut konuşmacıya göre ayarlayabilirsiniz.
kameraya bakan metnin önünden uzak durmasını sağlayın. 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.
Kullanışlı bir diğer özellik de CSS kullanarak işaretlerin stilini belirleme imkanıdır. Belki bu mesajı
arka plan olarak gri bir çizgisel gradyan kullanmak istiyor.
Tüm altyazılar ve peachpuff renkli tüm kalın metinler için papayawhip.
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
Tek tek kullanıcılar için stil ve etiketleme yöntemleri ile ilgili daha fazla bilgi almak 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? Bu özellik
belirli bir metin parçasının videoyla
ilişkisi olduğunu gösterir. İlgili içeriği oluşturmak için kullanılan
kind özelliğinin olası değerleri şunlardır:
captions: Transkriptlerdeki altyazılar ve muhtemelen çeviriler için devam ettirebilirsiniz. İşitme engelliler için ve videonun şu anda ses kapalı olarak oynatılıyor.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 engelli kişiler için uygundur.chapters: Kullanıcı belirli bir alan içinde gezinirken görüntülenmek üzere tasarlanmıştır. videosunu izleyin.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. Bir sonraki adımda, Medya çerçeveleri hakkında bilgi edinin ve bunların web sayfanıza ekleyebilirsiniz.