--- title: 'Ses ve Video' source: 'https://academia.sh/tr/kurslar/web-temelleri-ve-html/ses-ve-video' course: "Web'in Temelleri ve HTML" language: tr updated: '2026-08-17T18:09:32+00:00' license: 'CC BY-SA 4.0' --- # Ses ve Video Zamanda akan içeriğin denetimleri, kaynak seçim kuralı, altyazı ve betimleme parçaları ile otomatik oynatma kısıtının gerekçesi. 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 ```html ``` `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. ```js // 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. ```html

Sökme adımı 90. saniyede başlar; 90–145 saniye aralığı yalnızca o adımı gösterir.

``` 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 ```html
Şekil 2. Nem sensörünün yerinden sökülmeden okunması.
``` 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.