Ses ve Video

Görsel içerik yerleştirildi. Zamanda akan içerik ayrı sorunlar getirir. Bir görsel gösterildiğinde okuyucu ona istediği kadar bakar; bir video oynatıldığında ise akış kullanıcının denetiminde olmayabilir, sesi başka işleri bölebilir ve konuşulanın metin karşılığı yoksa içerik duyamayanlara kapalı kalır.

audio ve video ögeleri bu içeriği taşır. İkisi de aynı öznitelik kümesini paylaşır; video ayrıca görüntü boyutlarını ve kapak görselini bildirir.

Temel Yazım

<video controls preload="metadata" width="1280" height="720" poster="kapak.jpg">
  <source src="anlatim.webm" type="video/webm">
  <source src="anlatim.mp4" type="video/mp4">
  <track kind="captions" src="anlatim-tr.vtt" srclang="tr"
         label="Türkçe altyazı" default>
  <p>Video oynatılamıyor.
     <a href="anlatim.mp4">Dosyayı indirin</a>.</p>
</video>

controls özniteliği oynatma denetimlerini gösterir. Yazılmadığında kullanıcının içeriği durdurma, sesini kısma veya ileri sarma yolu kalmaz; bu nedenle kullanıcının denetlemesi gereken her medyada yazılır.

preload ne kadar verinin önceden indirileceğini bildirir: none hiçbir şey, metadata yalnızca süre ve boyut bilgisi, auto tarayıcının uygun gördüğü kadarı. Sayfada oynatılıp oynatılmayacağı belli olmayan bir medyada metadata değeri, süreyi gösterip veriyi indirmeden bekler.

Ögenin içindeki p bloğu, medya ögesini işlemeyen bir istemci için son çare içeriktir; source ve track ögelerinden sonra yazılır.

Kaynak Seçimi

source ögeleri sırayla denenir ve ilk desteklenen kaynak seçilir. type özniteliği kap biçimini ve kodek bilgisini taşır; bu bildirim sayesinde tarayıcı dosyayı indirmeden oynatıp oynatamayacağına karar verir.

// medya.mjs — source ogelerinin sirayla denenmesi
const kaynaklar = [
  { adres: "anlatim.av1.mp4", tur: 'video/mp4; codecs="av01.0.05M.08"' },
  { adres: "anlatim.vp9.webm", tur: 'video/webm; codecs="vp9"' },
  { adres: "anlatim.h264.mp4", tur: 'video/mp4; codecs="avc1.42E01E"' },
];

function sec(desteklenen) {
  for (const kaynak of kaynaklar) {
    const kod = kaynak.tur.match(/codecs="([^"]+)"/)?.[1] ?? "";
    const kap = kaynak.tur.split(";")[0].trim();
    if (desteklenen.kaplar.includes(kap) && desteklenen.kodekler.some((k) => kod.startsWith(k))) {
      return kaynak.adres;
    }
  }
  return null;
}

const istemciler = [
  { ad: "A", kaplar: ["video/mp4", "video/webm"], kodekler: ["av01", "vp9", "avc1"] },
  { ad: "B", kaplar: ["video/mp4"], kodekler: ["avc1"] },
  { ad: "C", kaplar: ["video/webm"], kodekler: ["vp9"] },
  { ad: "D", kaplar: ["video/ogg"], kodekler: ["theora"] },
];

for (const istemci of istemciler) {
  console.log("istemci " + istemci.ad + ":", sec(istemci) ?? "hicbir kaynak oynatilamaz");
}

console.log("--- altyazi parcalarinin kind degerleri ---");
const parcalar = [
  { kind: "captions", srclang: "tr", label: "Türkçe altyazı", default: true },
  { kind: "subtitles", srclang: "en", label: "English subtitles" },
  { kind: "descriptions", srclang: "tr", label: "Sesli betimleme" },
];
for (const parca of parcalar) {
  const satir = parca.kind.padEnd(14) + parca.srclang.padEnd(4)
    + parca.label.padEnd(20) + (parca.default ? "varsayilan" : "");
  console.log(satir.trimEnd());
}

istemci A: anlatim.av1.mp4
istemci B: anlatim.h264.mp4
istemci C: anlatim.vp9.webm
istemci D: hicbir kaynak oynatilamaz
--- altyazi parcalarinin kind degerleri ---
captions      tr  Türkçe altyazı      varsayilan
subtitles     en  English subtitles
descriptions  tr  Sesli betimleme

Çıktı üç şeyi gösterir. Sıra belirleyicidir: A istemcisi üç kaynağı da oynatabilir ve listedeki ilkini seçer; bu nedenle en verimli biçim başa yazılır. B ve C istemcileri listedeki ilk uygun kaynağa iner. D istemcisi hiçbirini oynatamaz ve son çare içeriği görür.

Kap biçimi ile kodek ayrı şeylerdir: aynı kap farklı kodekler taşıyabilir ve bir istemci kabı desteklerken içindeki kodeği desteklemeyebilir. type bildiriminde yalnızca kabı yazmak bu ayrımı gizler ve tarayıcının yanlış kaynağı seçip başarısız olmasına yol açar.

Metin Parçaları

track ögesi medyaya zamanlanmış metin bağlar. kind değeri parçanın işlevini bildirir ve işlevler birbirinin yerine geçmez.

captions konuşmanın yanı sıra anlamlı sesleri de yazar —kapı sesi, uyarı sinyali— ve duyamayan kullanıcı içindir. subtitles yalnızca konuşmayı başka bir dile çevirir; sesi duyan ama dili bilmeyen kullanıcı içindir. İkisi görsel olarak benzer görünse de içerikleri farklıdır ve biri diğerinin yerine kullanılamaz.

descriptions görüntüdeki, konuşmada geçmeyen bilgiyi anlatır ve görmeyen kullanıcı içindir. chapters medyayı bölümlere ayırır; kullanıcı bölüm listesinden atlayabilir.

default özniteliği, kullanıcı başka bir seçim yapmamışsa açık başlayacak parçayı bildirir. srclang parçanın dilidir, label ise kullanıcıya gösterilen addır.

Altyazı, medyaya sonradan eklenen bir iyileştirme değildir. Sesli bir içeriğin metin karşılığı yoksa, o içerik duyamayan kullanıcılar için hiç yok demektir; bu, alternatif metni olmayan bir görselle aynı durumdur.

Kapak Görseli ve Ayrılan Yer

poster özniteliği, video oynatılmadan önce gösterilecek görseli bildirir. Yazılmadığında tarayıcı medyanın ilk karesini bekler; preload="none" ile birlikte hiçbir kare inmeyeceği için alan boş kalır.

width ve height öznitelikleri burada da görsellerdeki işi görür: Görseller dersinde kurulduğu gibi, en boy oranını bildirerek medya inmeden yer ayrılmasını ve altındaki içeriğin kaymamasını sağlar. Kapak görselinin oranı videonun oranıyla aynı tutulur; farklıysa oynatma başladığında bir sıçrama görülür.

Zaman Aralığına Bağlanmak

Medyanın belirli bir anına, adresin parça bölümüyle bağlanılabilir. Bağlantılar dersinde görüldüğü gibi parça bölümü sunucuya gitmez; burada oynatıcı tarafından yorumlanır.

<p>Sökme adımı <a href="bakim.mp4#t=90">90. saniyede</a> başlar;
   <a href="bakim.mp4#t=90,145">90–145 saniye aralığı</a> yalnızca o adımı gösterir.</p>

Değer saniye cinsindendir; iki değer virgülle yazıldığında başlangıç ve bitiş belirtilir. Bu yazım, uzun bir kaydın belirli bir bölümüne metinden başvurmayı olanaklı kılar ve kullanıcıyı elle sarmaktan kurtarır. Desteklenmediğinde bağlantı medyayı baştan açar; başarısızlığın bedeli düşüktür.

Otomatik Oynatma

autoplay özniteliği medyanın kullanıcı istemeden başlamasını ister. Bu isteğin yerine getirilmesi tarayıcılarca kısıtlanmıştır ve kısıtın gerekçesi kullanıcıdır: beklenmedik ses, ekran okuyucu çıktısını bastırır, ortak alanlarda rahatsızlık verir ve ölçülü veri bağlantısında maliyet doğurur.

Kısıtın biçimi tarayıcıya göre değişir; ortak nokta, sesi açık başlayan bir medyanın kullanıcı etkileşimi olmadan oynamamasıdır. Sessiz başlayan medyalar için kısıt daha gevşektir. Bu davranış özellik saptamayla sınanmaz; başlatma isteği bir söz döndürür ve reddedilebilir.

Uygulamada iki sonuç çıkar. Otomatik oynatmanın çalışacağı varsayılmaz; medyanın kendisi kullanıcı başlatmadığında da anlamlı bir durumda görünmelidir. muted yazılmadan autoplay yazmak, çoğu bağlamda hiçbir şey yapmaz.

loop özniteliği medyayı yineler. Süre sınırı olmayan yinelemeli hareket, hareket duyarlılığı olan kullanıcılar için sorun oluşturur; beş saniyeyi aşan yinelemeli içeriklerde durdurma yolu bulunmalıdır.

İstasyon Belgesinde

<figure>
  <video controls preload="metadata" width="1280" height="720" poster="bakim-kapak.jpg">
    <source src="bakim.webm" type='video/webm; codecs="vp9"'>
    <source src="bakim.mp4" type='video/mp4; codecs="avc1.42E01E"'>
    <track kind="captions" src="bakim-tr.vtt" srclang="tr" label="Türkçe altyazı" default>
    <track kind="descriptions" src="bakim-betim.vtt" srclang="tr" label="Sesli betimleme">
    <p>Video oynatılamıyor. <a href="bakim.mp4">Dosyayı indirin</a>.</p>
  </video>
  <figcaption>Şekil 2. Nem sensörünün yerinden sökülmeden okunması.</figcaption>
</figure>

Video bir şekildir: metnin akışından kopabilir ve akışta anılır. Denetimler açıktır, altyazı ve betimleme parçaları bildirilmiştir, otomatik oynatma istenmemiştir.

Özet

• controls yazılmadığında kullanıcının medyayı durdurma yolu kalmaz; denetim gerektiren her medyada yazılır.
• source ögeleri sırayla denenir ve ilk desteklenen seçilir; type bildirimi kap ve kodek bilgisini birlikte taşır.
• captions duyamayan, subtitles dili bilmeyen, descriptions görmeyen kullanıcı içindir; biri diğerinin yerine geçmez.
• Metin karşılığı olmayan sesli içerik, duyamayan kullanıcılar için yok sayılır.
• Otomatik oynatma isteği reddedilebilir; sesli otomatik oynatma çoğu bağlamda gerçekleşmez ve belge bunun olmadığı duruma göre yazılır.

Sonraki Adım

Ses ve video belgenin kendi kaynaklarıydı. Bazı içerikler ise başka bir belgenin tamamıdır: bir harita, bir oynatıcı, başka bir siteden gelen bir bölüm. Bunları belgeye gömmek, denetimi kısmen dışarıya vermek demektir. Sonraki ders çerçeve gömmeyi ve gömülen belgenin yeteneklerini kısıtlayan yalıtım özniteliklerini ele alır.