HTML video ve audio Etiketi: Kaynaklar, Otomatik Oynatma ve Altyazı

İlk video

En basit kullanımda src ile dosyayı, controls ile tarayıcının oynatma denetimlerini verirsiniz. MDN'nin tek kaynaklı örneği bir poster görseli ve öğeyi desteklemeyen tarayıcılar için indirme bağlantısı da ekler:

<video
  controls
  src="tanitim.mp4"
  poster="tanitim-kapak.jpg"
  width="640"
  height="360">
  Tarayıcınız gömülü videoları desteklemiyor.
  <a href="tanitim.mp4">Videoyu indirip</a> kendi oynatıcınızla izleyebilirsiniz.
</video>

controls yazılmazsa tarayıcı varsayılan denetimleri göstermez; bu durumda oynatma, duraklatma ve ses düzeyi için kendi denetimlerinizi JavaScript ve HTMLMediaElement arabirimiyle yazmanız gerekir. width ve height videonun görüntü alanını CSS pikseli cinsinden verir; yalnızca mutlak değerler kabul edilir, yüzde yazılamaz. poster verilmezse ilk kare hazır olana kadar hiçbir şey görünmez, ardından ilk kare poster karesi olarak gösterilir.

<video> varsayılan olarak satır içi (inline) görüntülenen, yerine konan (replaced) bir öğedir. Kategori olarak akış, metin düzeyi ve gömülü içeriktir; controls taşıdığında etkileşimli içerik de olur. Görünüm ayarları CSS ile yapılır.

Birden fazla kaynak ve type

MDN, tarayıcıların aynı video biçimlerini desteklemediğini hatırlatır. Çözüm, aynı videoyu farklı biçimlerde iç içe <source> öğeleriyle sunmaktır; tarayıcı anladığı ilk kaynağı kullanır:

<video controls width="640" height="360">
  <source src="tanitim.webm" type="video/webm" />
  <source src="tanitim.mp4" type="video/mp4" />
  <p>
    Tarayıcınız HTML videoyu desteklemiyor. Bunun yerine
    <a href="tanitim.mp4" download="tanitim.mp4">videoyu indirebilirsiniz</a>.
  </p>
</video>

<source> içindeki type özniteliği belirtilmezse tarayıcı medyanın türünü sunucudan öğrenir ve oynatıp oynatamayacağına bakar; belirtilirse kendi desteklediği türlerle hemen karşılaştırır ve desteklemiyorsa sunucuya hiç sormadan bir sonraki kaynağa geçer. Bazı biçimlerde türe bir codecs parametresi eklenerek daha ayrıntılı bilgi verilebilir; MDN'nin örneği video/webm; codecs="vp8, vorbis" değeridir. Bu değer, WebM kapsayıcısındaki dosyanın görüntü için VP8, ses için Vorbis kodeği kullandığını söyler.

Kaynaklar yazılış sırasıyla denenir. Bir kaynak geçersiz adres ya da desteklenmeyen biçim nedeniyle başarısız olursa sıradakine geçilir. error olayı her <source> için ayrı ayrı değil, tüm kaynaklar başarısız olduktan sonra <video> öğesinin kendisinde tetiklenir.

<source> öğesinde media özniteliği de kullanılabilir. MDN'nin örneğinde geniş görüntü alanları için ayrı bir dosya, koşulsuz ikinci kaynak da diğer tüm durumlar için sunulur. Aynı <source> öğesinin görsellerdeki kullanımı ve iki bağlam arasındaki öznitelik farkları picture ve source yazısında anlatılıyor.

İzin verilen içerik ve sıra

MDN'nin teknik özeti içeriğin sırasını kesin biçimde tanımlar. src özniteliği varsa: sıfır veya daha fazla <track>, ardından medya öğesi içermeyen saydam (transparent) içerik. src yoksa: sıfır veya daha fazla <source>, ardından sıfır veya daha fazla <track>, ardından yine medya öğesi içermeyen saydam içerik. Yani sıra her zaman kaynaklar, altyazılar ve en sonda yedek içeriktir; yedek içeriğin içinde başka bir <video> ya da <audio> bulunamaz.

"Saydam içerik", yedek içeriğin izin verilen türünü üst öğenin belirlediği anlamına gelir. Bir <video>'yu bir <p> içine koyarsanız, yedek içerik de paragrafın kabul ettiği metin düzeyi içerik olmalıdır; içine bir <div> ya da başka bir paragraf yazamazsınız. Kurallar için iç içe kullanım kuralları yazısına bakabilirsiniz.

Öznitelikler ve aralarındaki etkileşimler

Mantıksal öznitelik tuzağı

autoplay, muted, loop, controls ve playsinline mantıksal (Boolean) özniteliklerdir: öğede bulunmaları "açık" anlamına gelir. MDN iki örnekle uyarır: autoplay="false" otomatik oynatmayı kapatmaz, öznitelik etikette bulunduğu sürece video kendiliğinden başlar; muted="false" de sesi açmaz. Bir davranışı kapatmanın tek yolu özniteliği tamamen kaldırmaktır.

autoplay ve muted

MDN'ye göre güncel tarayıcılar sesin (ya da sesi kapatılmamış bir video kanalının) otomatik oynatılmasını engeller, çünkü kendiliğinden ses çalan siteler kullanıcılar için rahatsız edicidir. <audio> sayfası bir adım daha ileri gider: otomatik oynatmadan mümkünse kaçınılmasını, şart olduğunda da kullanıcının açıkça etkinleştirdiği bir seçenek olarak sunulmasını önerir. Arka planda dönen sessiz bir tanıtım videosu gibi senaryolarda autoplay ile birlikte muted kullanılır:

<video autoplay muted loop playsinline width="1280" height="720" poster="arka-plan.jpg">
  <source src="arka-plan.webm" type="video/webm" />
  <source src="arka-plan.mp4" type="video/mp4" />
</video>

playsinline burada videonun öğenin kendi alanında oynatılmasını belirtir. MDN önemli bir ayrıntıyı not eder: bu özniteliğin yokluğu videonun her zaman tam ekran oynatılacağı anlamına gelmez.

preload ve loading

preload, oynatmadan önce ne kadar verinin yüklenmesinin iyi olacağına dair yazarın ipucudur: none hiç ön yükleme yapılmamasını, metadata yalnızca süre gibi üst verilerin alınmasını, auto kullanıcı izlemeyecek olsa bile dosyanın tamamının indirilebileceğini söyler; boş değer auto ile aynıdır. Varsayılan değer tarayıcıdan tarayıcıya değişir, belirtim metadata önerir. Bu yalnızca bir ipucudur ve autoplay varsa ona üstünlük sağlayamaz: oynatma başlayacaksa indirme de başlar.

loading="lazy" ise yüklemeyi öğe görünür alana yaklaşana dek erteler; görsellerdeki gibi yalnızca JavaScript etkinken uygulanır ve Window load olayı tembel medyayı beklemez. Tembel bir video, görünür alana yaklaşmadan poster görselini indirmez, preload davranışını uygulamaz ve otomatik oynatmaya başlamaz. Yüklenmemiş videonun boyutu 0 olduğu için width ve height burada özellikle önemlidir. Ses öğesinde durum farklıdır: <audio> ancak controls taşıyorsa görünür olur, bu yüzden controls olmadan tembel yüklenen ses hiç yüklenmez ve otomatik oynamaz. Medya öğelerinde loading ve controlslist için tarayıcı desteğini MDN uyumluluk tablosundan kontrol edin.

<!-- Sayfanın alt kısmındaki uzun bir kayıt -->
<video controls preload="metadata" loading="lazy" width="640" height="360" poster="seminer-kapak.jpg">
  <source src="seminer.mp4" type="video/mp4" />
  <a href="seminer.mp4">Semineri indirin</a>
</video>

audio öğesi

<audio>, <video> ile aynı kaynak ve yedek mantığını kullanır; görsel bir alanı olmadığı için poster, width, height ve playsinline almaz. MDN'nin örneği MP3 ve OGG kaynakları ile her ikisi için indirme bağlantısı sunar:

<audio controls>
  <source src="bolum-12.mp3" type="audio/mpeg" />
  <source src="bolum-12.ogg" type="audio/ogg" />
  <p>
    <a href="bolum-12.mp3" download="bolum-12.mp3">MP3</a> veya
    <a href="bolum-12.ogg" download="bolum-12.ogg">OGG</a> olarak indirin.
  </p>
</audio>

Ses kaynağı herhangi bir geçerli adres olabilir: HTTP(S) adresleri ya da veriyi doğrudan HTML'e gömen data URL'leri. MDN, data URL'lerin küçük dosyalar için kullanışlı olabileceğini, ama HTML dosyasını büyüttüğü için büyük dosyalarda önerilmediğini belirtir. controls olmadan <audio> sayfada hiçbir şey göstermez. Önemli bir sınır daha var: <audio> öğesi WebVTT altyazılarını doğrudan desteklemez. MDN, sesli içeriğe altyazı göstermek gerektiğinde sesi bir <video> öğesiyle oynatmayı seçeneklerden biri olarak sunar, çünkü altyazılar videonun görüntü alanında gösterilir.

track ile altyazı eklemek

<track>, medya öğesine zamanlanmış bir metin parçası ekler. Altyazı dosyaları WebVTT biçimindedir (.vtt). Öğe boştur, kapanış etiketi yazılmaz ve yalnızca bir <audio> ya da <video> içinde, kaynaklardan sonra ve yedek içerikten önce yer alır.

kind yazılmazsa değer subtitles olur; geçersiz bir değer yazılırsa metadata kullanılır. srclang metnin dilini geçerli bir BCP 47 dil etiketiyle verir (Türkçe için tr) ve kind değeri subtitles ise zorunludur. label, tarayıcının altyazı listesinde göstereceği addır. default, kullanıcının tercihleri başka bir parçayı daha uygun kılmadıkça bu parçanın etkin olacağını belirtir ve bir medya öğesinde yalnızca bir <track> üzerinde kullanılabilir.

<video controls width="640" height="360">
  <source src="egitim.webm" type="video/webm" />
  <source src="egitim.mp4" type="video/mp4" />
  <track default kind="captions" srclang="tr" label="Türkçe (işitme engelliler için)" src="egitim-tr.vtt" />
  <track kind="subtitles" srclang="en" label="English" src="egitim-en.vtt" />
  <track kind="chapters" srclang="tr" src="egitim-bolumler.vtt" />
  <a href="egitim.mp4">Videoyu</a> ve <a href="egitim-tr.vtt">altyazıyı</a> indirin.
</video>

İki kural daha: src geçerli bir adres olmalı ve medya öğesinde crossorigin özniteliği yoksa belgeyle aynı kökenden gelmelidir. Ayrıca bir medya öğesinde aynı kind, srclang ve label üçlüsüne sahip iki <track> bulunamaz. Dil kodlarının genel kullanımı için lang ve dir yazısına bakabilirsiniz.

WebVTT dosyasının kendisi, her biri bir zaman aralığı ve o aralıkta gösterilecek metinden oluşan "cue" adlı parçalardan oluşur. MDN'nin erişilebilirlik örneklerinde müzik ve ses efektleri köşeli parantez içinde yazılır; örneğin bir aralıkta yalnızca "[Hareketli müzik]", bir sonrakinde "[fısıldayarak]" ön ekiyle başlayan bir cümle bulunur. Bu yaklaşım, ses duyulamadığında duygu ve tonun da aktarılmasını sağlar.

Erişilebilirlik

MDN, videoların içeriği doğru anlatan hem altyazılara hem de metin dökümlerine (transcript) sahip olmasını önerir. Altyazılar işitme kaybı yaşayan kişilerin video oynarken sesi anlamasını sağlar; metin dökümü ise içeriği kendi hızında ve kendine uygun bir biçimde gözden geçirmek isteyenler içindir. Otomatik altyazı hizmeti kullanıyorsanız üretilen metni kaynağa uygunluk açısından mutlaka gözden geçirin. Altyazılar videonun ana öznesini kapatmamalıdır; konumları WebVTT cue ayarlarıyla düzenlenebilir.

MDN'nin WCAG rehberinde zamana bağlı medya için yönerge 1.2 yer alır. A düzeyinde önceden kaydedilmiş yalnızca ses içeriğine metin dökümü, web videolarına altyazı ve videolar için metin dökümü ya da sesli betimleme beklenir; AA düzeyinde canlı sesli içerik için eşzamanlı altyazı ve önceden kaydedilmiş videolar için sesli betimleme eklenir. Genel çerçeve WCAG temelleri yazısında.

Bir ayrıntı: <video> ve <audio> öğelerinin örtük ARIA rolü yoktur; izin verilen tek rol application'dır.

Sunucu tarafı: doğru MIME türü

Video kodu kusursuz olsa bile sunucu dosyayı yanlış MIME türüyle gönderiyorsa video görünmeyebilir ya da JavaScript etkinse içinde çarpı işareti olan gri bir kutu belirebilir. MDN'nin örneği Apache sunucusudur: WebM videolar için mime.types dosyasında ya da httpd.conf içinde AddType video/webm .webm yönergesiyle .webm uzantısı video/webm türüne bağlanır. MDN, barındırma sağlayıcınızın MIME türü değişiklikleri için kolay bir arayüz sunabileceğini de ekler; video eklediğiniz bir sitede bu ayarı kontrol etmek ilk adımlardan biridir.

Sık yapılan hatalar

• autoplay="false" yazmak: Mantıksal öznitelik var olduğu sürece etkindir; kaldırın.
• Sesli otomatik oynatma beklemek: Güncel tarayıcılar sesli otomatik oynatmayı engeller; gerekiyorsa muted ekleyin.
• Yedek içeriğin her hatada görüneceğini sanmak: Yalnızca öğe desteklenmiyorsa görünür; kaynaklar başarısızsa görünmez.
• Sırayı bozmak: <source> önce, <track> sonra, yedek içerik en sonda gelir.
• subtitles için srclang yazmamak: Bu durumda srclang zorunludur.
• Birden çok track'e default vermek: default tek bir parçada olabilir.
• Başka kökenden altyazı çekmek: Medya öğesinde crossorigin yoksa .vtt aynı kökenden gelmelidir.
• width'e yüzde yazmak: Video boyutları yalnızca mutlak CSS pikseli kabul eder.
• audio'ya altyazı track'i eklemek: <audio> WebVTT'yi doğrudan göstermez.
• Sunucu MIME türünü kontrol etmemek: Yanlış tür, kodu doğru olan videoyu bile oynatılamaz yapabilir.

Sık Sorulan Sorular

Video otomatik başlasın istiyorum, neden başlamıyor?

MDN'ye göre güncel tarayıcılar sesli otomatik oynatmayı engeller. autoplay ile birlikte muted kullanın; yine de otomatik oynatmanın kullanıcı deneyimine etkisini düşünün.

Sesli içeriğe altyazı nasıl eklenir?

<audio> WebVTT altyazılarını doğrudan göstermez. MDN, sesi bir <video> öğesiyle oynatıp <track> eklemeyi ya da bir kütüphane kullanmayı önerir; ayrıca metin dökümü sunun.

captions ile subtitles arasındaki fark nedir?

subtitles, ses duyulduğu ama anlaşılmadığı durumlar için konuşmanın dökümü veya çevirisidir. captions ise ses duyulamadığında kullanılır ve konuşmaya ek olarak ses efektlerini, müziği ve konuşanı da aktarır.

preload="none" mı, metadata mı?

Belirtim metadata önerir; bu, süre gibi bilgilerin önceden alınmasını sağlar. none hiç ön yükleme yapılmamasını ister. İkisi de yalnızca ipucudur ve autoplay varsa geçersiz kalır.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · picture ve source etiketi · iframe etiketi · WCAG temelleri · lang ve dir özniteliği · img etiketi · JavaScript öğrenme rehberi