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+

CSS ile Dikey Ortalama

3 satır CSS kodu ile herhangi bir elementi dikey alan içerisinde ortalamak kim istemez ki ? Yüksekliği belirlenmemiş herhagi bir alan içerisine, herhangi bir nesneyi “transform: translateY” yardımıyla ortalayabiliyoruz. “Transform” CSS değeri her ne kadar bir elementin rotasyonunu değiştirmek veya scale etmek için kullanılsa da “translateY” ile elementlerin dikey değerini düzenleyebiliyoruz.

Aşağıdaki kod bloğu yardımıyla dikey ortalamayı yapabilir, hatta IE9’da bile çalıştırabilirsiniz:

[code lang=”css”]
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
[/code]

Kurcalamak isteyenler için de :

See the Pen Vertical center with only 3 lines of CSS by Ibrahim Nergiz (@PhyesiX) on CodePen.