HTML5 “track” Elementine Toplu Bir Bakış

Günümüzde, HTML5 ile birlikte gelen video ve ses dosyalarında önemli bir sayıda artış mevcut. Google’a baktığımızda internet aramalarının yaklaşık %40‘ı gibi bir değere ulaşması da bunun bi’ göstergesi. Bu yazımda HTML5 ile birlikte gelen <track> elementi ile birlikte gelen, video dosyalarınıza altyazı ekleme gibi önemli bir işlevden bahsedeceğim. Önemli diyorum çünkü, video ile SEO konusunun yıldızları bu noktada barışıyor.

“<track>” Elementine Genel Bakış

<track> elementi, web sitenizde video dosyası oynatımı sırasında gösterilecek herhangi bir text / yazı’yı tanımlamamızı sağlıyor. Bu text / yazı; altyazı, içerik, açıklama, bölüm veya metadata bilgileri içeriyor olabilir. Bunları içerirken tahmin edersiniz ki <video> veya <audio> tag’leri arasında yer alıyor. Doğal olarak bu elementimizi </track> olarak kapatma ihtiyacımızın bulunmaması da genel özelliklerinden birisi. Kısa bir örnek verecek olursam:

[code lang=”html”]
<video width="640" height="320" controls="controls">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<track src="altyazi.srt" kind="subtitles" srclang="tr" label="Turkish_subs">
</video>
[/code]

“src” Attribute’u

Bu attribute tahmin edebileceğiniz üzere, video veya ses dosyalarınıza entegre etmek istediğiniz dosyanın yolunu belirteeceğiniz attribute ve doğal olarak da gerekli.

[code lang=”html”]
<track src="altyazi.srt">
[/code]

“srclang” Attribute’u

srclang, eklediğiniz altyazının dilini belirtebileceğiniz bi’ attribute. Eğer “kind” attribute’unda “subtitle” kullanılmışsa ( birazdan aşağıda değineceğiz ) kesinlikle doldurulması gereken alanlardan birisi. Eklediğiniz text / yazı dosyasının dili İngilizce ise “en”, Türkçe ise “tr” olarak kullanabilir. Diğer dilleri de kontrol edebilirsiniz.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr">
[/code]

“kind” Attribute’u

kind attribute’u ile eklediğimiz text / yazı dosyasının türünü belirtmeye yarıyor. Aşağıda bunları sıralayalım:

subtitles

Video veya ses dosyasında geçen konuşmaların çevirisini sunar. srclang attribute’u ile kullanılmalıdır.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr">
[/code]

captions

Video dosyasında bi’ brief verirken kullanılır.

[code lang=”html”]
<track src="video_captions.srt" kind="captions">
[/code]

descriptions

Video veya ses dosyası içeriğini açıklarken kullanılır. Video dosyasına erişilemediği zaman bu gösterilir.

[code lang=”html”]
<track src="video_descriptions.srt" kind="descriptions">
[/code]

metadata

[code lang=”html”]
<track src="video_metadata.srt" kind="metadata">
[/code]

chapters

Video veya ses dosyasında bölüm başlığı gibi durumları belirtirken kullanılır.

[code lang=”html”]
<track src="video_chapters.srt" kind="chapters">   
[/code]

“label” Attribute’u

Bu attribute video veya ses dosyanızda kullanmak istediğiniz text / dosya ‘nın başlığını belirler. “label” attribute’u kullandığınız zaman boş bırakmamanız gerekiyor, eğer ki bırakırsanız kod hatası almanız mümkün.

[code lang=”html”]
<track src="video_subtitles.srt" kind="subtitles" srclang="tr" label="Turkce_altyazi">
[/code]

“default” Attribute’u

Birden fazla <track> elementi kullanıldığında, default olarak neyi seçeceğimizi belirtiriz.

[code lang=”html”]
<track kind="subtitles" src="video_subtitles_tr.srt" srclang="tr" default>
<track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
<track kind="subtitles" src="video_subtitles_ja.srt" srclang="ja">
[/code]

Yukarıda bahsettimiz bütün attribute ve değerlerini tek bir örnek üzerinde toplamak istersek:

[code lang=”html”]
<video src="video.ogv">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
   <track kind="captions" src="video_captions.srt" srclang="tr">
   <track kind="descriptions" src="video_desciptions.srt" srclang="tr">
   <track kind="chapters" src="video_chapters.srt" srclang="tr">
   <track kind="subtitles" src="video_subtitles_tr.srt" srclang="tr" default>
   <track kind="subtitles" src="video_subtitles_en.srt" srclang="en">
   <track kind="metadata" src="video_metadata1.srt" srclang="tr" label="Metadata 1">
   <track kind="metadata" src="video_metadata2.srt" srclang="tr" label="Metadata 2">
</video>
[/code]

“<track>” Elementi ve SEO Değeri

Video ve ses dosyaları hakkında bilgi sahibi olamayan arama motorları artık <track> elementi sayesinde video veya ses dosyasının içeriğinin ne olduğunu görebiliyor duruma geçti. Bu da doğal olarak SEO konusunda önemli yerlere gelinebileceğinin kapısını araladı. Bunların yanında:

  • Video ve ses dosyalarındaki cümle ve kelimeleri örümcekler rahat rahat gezip video hakkında bilgi sahibi olacaklar.
  • Videonun spesifik bir yerinde linklemeyi okuyup algılayabilecekler.
  • Altyazı ve captionslar yardımıyla kullanıcı deneyimindeki artış.
  • Arama sonuçlarında video tumbnail’leri.

gibi bir çok artıyı da beraberinde getiriyor. Ek olarak video, altyazı ve SEO üçlüsü hakkında daha fazla bilgi sahibi olabilirsiniz.

 

“<track>” Elementi ve Browser Desteği

Hepinizin merak ettiği bu sorunun cevabı ise:

  • Chrome
  • Firefox 31+
  • IE10+
  • Safari 6+
  • Opera 15+

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yorum onaylama sistemi etkin; yorumunuzun yayınlanması biraz zaman alabilir.