Ses ve video

Resimler modülünde öğrendiğiniz gibi HTML, medyanın web sayfasına yerleştirilmesini sağlar. Bu bölümde, ses ve video dosyalarını ele alıyoruz. Bu dosyaları nasıl yerleştireceğiniz, kullanıcı kontrolleri, videolarınız için statik bir resim yer tutucusu sağlama ve ses ile video dosyalarını erişilebilir hale getirme gibi en iyi uygulamalar hakkında bilgi veriyoruz.

<audio> ve <video>

<video> ve <audio> öğeleri, medya oynatıcıları doğrudan src özelliğiyle yerleştirmek için veya her biri src dosyası önerisi sağlayan bir dizi <source> öğesi için kapsayıcı öğe olarak kullanılabilir. Ses dosyası yerleştirmek için <video> kullanılabilir ancak ses dosyalarını yerleştirmek için <audio> öğesi tercih edilir.

Açılış <video> ve <audio> etiketleri; controls, autoplay, loop, mute, preload ve genel özellikler dahil olmak üzere başka özellikler de içerebilir. <video> öğesi height, width ve poster özelliklerini de destekler.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Bu <video> örneğinde, video kaynağına bağlantı veren src özelliğiyle tek bir kaynak vardır. poster özelliği, video yüklenirken gösterilecek bir resim sağlar. Son olarak, controls özelliği kullanıcı video kontrolleri sağlar.

Yedek içerik, açılış ve kapanış etiketleri arasına eklenir. Kullanıcı aracısı <video> (veya <audio>) desteklemiyorsa bu içerik gösterilir. İki etiket arasında içerik olmasa bile kapanış </video> etiketi gereklidir (ancak her zaman yedek içerik olmalıdır, değil mi?).

Açılış <video> veya <audio> etiketlerine src özelliği eklenmemişse her biri bir medya dosyasına src özelliği içeren bir veya daha fazla <source> öğesi ekleyin. Aşağıdaki örnekte üç medya dosyası seçeneği, yedek içerik, ve açılış ile kapanış etiketleri arasında İngilizce ve Fransızca altyazılar yer almaktadır.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Her <source> alt öğesi, kaynağı işaret eden bir src özelliği içerir. type özelliği ise tarayıcıyı bağlı dosyanın medya türü hakkında bilgilendirir. Bu, tarayıcının çözemeyeceği medya dosyalarını getirmesini engeller.

type özelliğinde, kaynağın tam olarak nasıl kodlandığını belirten bir codecs parametresi ekleyebilirsiniz. Codec'ler, medya optimizasyonlarını aşamalı geliştirmeler (tüm tarayıcılar tarafından desteklenmeyen öğeler) olarak eklemenize olanak tanır. Codec, medya türünden noktalı virgülle ayrılır. Örneğin, codec, WebM dosyalarının VP8 video ve Vorbis ses içerdiğini belirten <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> gibi sezgisel bir söz dizimiyle yazılabilir.

Codec'lerin çözülmesi de daha zor olabilir. Örneğin, <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> MP4 kodlamasının Advanced Video Coding Main Profile Level 4.2 olduğunu gösterir. Bu söz dizimini açıklamak bu dersin kapsamı dışındadır. Daha fazla bilgi için Jake Archibald'ın AV1 videosu için codec parametresinin nasıl belirleneceği hakkındaki gönderisini inceleyin.

Bir video gösterilirken varsayılan olarak, video kullanılabilir hale geldiğinde videonun ilk karesi sabit çekim olarak gösterilir. Bu durum kontrol edilebilir. poster özelliği, video indirilirken ve oynatılana kadar bir resmin kaynağının gösterilmesini sağlar. Video oynatılıp ardından duraklatılırsa poster tekrar gösterilmez.

Videonuzun en boy oranını tanımladığınızdan emin olun. Video yüklendiğinde poster ile video arasındaki boyut farkı yeniden akışa ve yeniden boyamaya neden olur.

Her zaman boole controls özelliğini ekleyin. Bu sayede kullanıcı kontrolleri görünür hale gelir ve kullanıcılara ses seviyelerini kontrol etme, sesi tamamen kapatma ve videoyu tam ekrana genişletme olanağı sunulur. controls öğesinin atlanması, özellikle de autoplay boole özelliği dahil edilmişse kötü bir kullanıcı deneyimine yol açar. Bir medya dosyasının otomatik olarak oynatılması, sessiz ve kontroller görünür olsa bile genellikle kötü bir kullanıcı deneyimi olduğundan bazı tarayıcıların, Boole muted özelliği atlandığında autoplay özelliği yönergesine uymayacağını unutmayın.

Parça sayısı

Hem ses hem de video için açılış ve kapanış etiketleri arasına, zamanlanmış metin parçalarını belirtmek üzere bir veya daha fazla <track> öğesi ekleyin. Aşağıdaki örnekte hem İngilizce hem de Fransızca olarak zamanlanmış metin altyazılar sağlayan iki <track> dosyası yer almaktadır.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

src özelliğinde belirtilen parça dosyaları WebVTT biçiminde (.vtt) olmalıdır. crossorigin özelliği eklenmediği sürece dosyalar, HTML belgesiyle aynı alanda olmalıdır.

Parça kind özelliği için beş numaralandırılmış değer vardır: subtitles, captions, descriptions, chapters ve diğer metadata.

Diyalog transkripsiyonu ve çevirileri için srclang özelliğiyle birlikte subtitles özelliğini ekleyin. Her label özelliğinin değeri, kullanıcıya seçenek olarak gösterilir. Seçilen VTT seçeneğinin içeriği videonun üzerinde gösterilir. Altyazıların görünümü, ::cue/ ::cue() hedefleyerek stillendirilebilir.

kind="caption" değeri, ses efektleri ve diğer alakalı ses bilgilerini içeren transkriptler ve çeviriler için ayrılmalıdır. Bu özellik yalnızca işitme engelli izleyiciler için değildir. Kullanıcılar kulaklıklarını bulamadıkları için altyazıları açmış olabilir. Belki de en sevdikleri podcast'in son birkaç önemli noktasını tam olarak anlayamadıkları için transkripti okuyarak anladıklarını doğrulamak istiyorlardır. Ses ve video içeriklerine erişmek için alternatif yöntemler hem önemlidir hem de kolaylık sağlar.

kind="description", videoyu göremeyen kullanıcılar için videodaki görsel içeriğin metin açıklamalarını gösterir. Bu kullanıcılar, Google Home veya Alexa gibi ekransız bir sistem kullanıyor ya da görme engelli olabilir.

WebVTT biçimini kullanarak altyazı eklemek, videoyu işitme engelli kullanıcılar için erişilebilir hâle getirir. İşitme bozukluğu; kullanıcının gürültülü bir ortamda bulunması, hoparlörlerinin arızalı olması veya kulaklıklarının bozuk olması ya da işitme kaybı yaşaması veya kendisini işitme engelli olarak tanımlaması nedeniyle oluşabilir. İçeriğinizin erişilebilir olmasını sağlamak, düşündüğünüzden çok daha fazla kişiye, hatta herkese yardımcı olur.

Arka plan videosuyla ilgili dikkat edilmesi gerekenler

Pazarlama veya tasarım ekibiniz, sitenizin arka planında video olmasını isteyebilir. Genellikle bu, sessiz, otomatik oynatılan ve döngüye alınmış bir video istedikleri anlamına gelir. Bu videoda kontrol bulunmaz. HTML kodu aşağıdaki gibi görünebilir:

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

Arka plan videolarına erişilemiyor. İçerik, kullanıcılara oynatma üzerinde tam kontrol ve tüm altyazılara erişim imkanı sunulmadan arka plan videoları aracılığıyla aktarılmamalıdır. Bu video tamamen dekoratif amaçlı olduğundan ARIA rolü olarak none kullanılıyor ve herhangi bir yedek içerik içermiyor. Her zaman sessize alınan videoların performansını artırmak için medya kaynaklarınızdan ses parçasını kaldırın.

Videonuz beş saniye veya daha kısa süre oynatılıyorsa erişilebilirlik kuralları, duraklatma mekanizması gerektirmez. Ancak loop boolean özelliğine sahip tüm öğeler varsayılan olarak süresiz döngüye girer ve bu beş saniyelik veya diğer tüm zaman sınırlarını aşar. İyi bir kullanıcı deneyimi için videoyu duraklatma yöntemini her zaman ekleyin. Bu işlem en kolay şekilde controls eklenerek yapılır.

Özel medya kontrolleri

Tarayıcıda yerleşik kontroller yerine özel video veya ses kontrolleri görüntülemek için controls özniteliğini ekleyin. Ardından, özel medya kontrolleri eklemek ve kontroller özelliğini kaldırmak için JavaScript'i kullanın. Örneğin, bir ses dosyasının oynatma durumunu değiştiren bir <button> ekleyebilirsiniz.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

Bu örnekte, ziyaretçi oynatma ve duraklatma durumları arasında geçiş yaptıkça güncellenen metni içeren dataset özelliklerine sahip bir düğme yer almaktadır. aria-controls özniteliği, düğmeyle kontrol edilen öğenin id ile birlikte eklenir. Bu örnekte, ses. Sesi kontrol eden her düğmenin bir etkinlik işleyicisi vardır.

Özelleştirilmiş kontroller oluşturmak için HTMLMediaElement.play() ve HTMLMediaElement.pause() kullanın. Oynatma durumu değiştirildiğinde düğmenin metnini de değiştirin:

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

controls özelliği eklendiğinde, JavaScript başarısız olsa bile kullanıcı sesi (veya videoyu) kontrol edebilir. Yalnızca bir yedek düğme oluşturulduktan sonra controls özelliğini kaldırın.

document.querySelector('[aria-controls]').removeAttribute('controls');

Kullanıcıların denetimlere erişemediği durumlarda (ör. denetimleri site içeriğinin arkasında gizlenmiş arka plan videoları) her zaman harici denetimler ekleyin. İşitme kaybı ve görme bozukluğu olan milyonlarca kişi de dahil olmak üzere farklı çevresel ve duyusal ihtiyaçları olan kullanıcılara hitap etmek için medya erişilebilirlik şartlarının temel bilgilerini anlamak önemlidir. HTMLMediaElement, hem HTMLVideoElement hem de HTMLAudioElement tarafından devralınan çeşitli özellikler, yöntemler ve etkinlikler sağlar. HTMLMediaElement ise kendi özelliklerini, yöntemlerini ve etkinliklerini ekler. TextTrack API de dahil olmak üzere başka Media API'leri de vardır. Media Capture and Streams ve MediaDevices API'lerini kullanarak kullanıcının mikrofonundan ses kaydedebilir veya kullanıcının ekranını kaydedebilirsiniz. Web Audio API, canlı ve önceden kaydedilmiş sesleri düzenlemenin yanı sıra ses akışı, kaydetme veya sesi <audio> öğesine gönderme işlemlerini yapmanızı sağlar.

Anlayıp anlamadığınızı kontrol etme

Ses ve video bilginizi test edin.