İşitsel ve Video

images modülünde öğrendiğiniz gibi HTML, bir web sayfasına medya yerleştirmeyi sağlar. Bu bölümde nasıl yerleştirileceği, kullanıcı denetimleri, videolarınız için statik bir resim yer tutucusu sağlama ve buna ek olarak, ses ve video dosyalarını inceleriz. ve en iyi uygulamaları ele alacağız. Buna ses ve video dosyalarını erişilebilir hale getirmek de dahildir.

<audio> ve <video>

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

<video> ve <audio> açılış etiketleri, aşağıdakiler dahil olmak üzere bazı başka özellikler içerebilir: controls, autoplay, loop, mute, preload ve genel özellikler. <video> öğesi ayrıca height, width ve poster özellikleri.

<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ğlanan src özelliğine sahip tek bir kaynak bulunuyor. poster özelliği video yüklenirken görüntülenecek bir resim sağlar. Son olarak, controls özelliği, kullanıcı videosu kontrollerini sağlar.

Yedek içerik, açılış ve kapanış etiketlerinin arasına eklenir. Kullanıcı aracısı <video> (veya <audio>) özelliğini desteklemiyorsa bu içerik gösterilir. </video> kapanış etiketi, ikisi arasında içerik olmasa bile gereklidir (ama her zaman yedek içerik bulunmalıdır , değil mi?).

<video> veya <audio> açılış etiketlerine src özelliği eklenmezse bir veya daha fazla <source> öğesi ekleyin, her biri bir medya dosyasına src özelliğine sahip. Aşağıdaki örnekte üç medya dosyası seçeneği bulunmaktadır: yedek içerik, İngilizce ve Fransızca altyazılar için açılış ve kapanış etiketleri arasında olmalıdı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 ve type özelliği tarayıcıyı bilgilendirir bağlı dosyanın medya türüne ait olmalıdır. Bu işlem, tarayıcının kodunu çözemediği medya dosyalarını getirmesini engeller.

type özelliğine bir codecs parametresi ekleyebilirsiniz. Bu kod, kaynağın tam olarak nasıl kodlandığını belirtir. Codec'ler, henüz desteklenmeyen medya optimizasyonlarını dahil etmeniz için bir yol sunar izin verir. Codec, medya türünden noktalı virgül ile ayrılır. Örneğin, codec bileşeni kullanımı kolay söz dizimidir. Örneğin <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, WebM dosyaları, VP8 video ve vorbis sesi içerir. Codec'lerin anlaşılması daha zor olabilir (ör. <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">) Bu değer, MP4 kodlamasının Gelişmiş Video Kodlama Ana Profili Düzeyi 4.2 olduğunu gösterir. Bu söz dizimini açıklamak, ele alacağız. Jake Archibald, AV1 videoları için codec parametresinin nasıl belirlendiğini açıklayan bir gönderi yayınladı. daha fazla bilgi için.

Bir video gösterilirken varsayılan olarak ilk karesi kullanılabilir olduğunda hareketsiz çekim olarak gösterilir. Bu, kontrol edilebilen bir şeydir. poster özelliği, video indirilirken resmin kaynağının gösterilmesini sağlar devam eder. Video oynatılırsa ve ardından duraklatılırsa poster yeniden gösterilmez.

Videonuzun en boy oranını tanımladığınızdan emin olun çünkü video yüklendiğinde boyut farkı afiş ile video arasında yeniden düzenleme ve yeniden boyamaya neden olur.

boole controls özelliğini her zaman ekleyin. Bu sayede kullanıcı, kontrol sürecinde Görünür olarak, kullanıcılara ses seviyelerini kontrol etme, sesi tamamen kapatma ve videoyu tam ekrana genişletme imkanı tanır. controls öğesinin atlanması, özellikle de boole autoplay özelliği dahil edildiğinde kötü bir kullanıcı deneyimine neden olur. Bazı birautoplaymuted medya dosyası, sessiz ve görünür kontrollere sahip olsa bile genellikle kötü bir kullanıcı deneyimidir.

Parça sayısı

Hem ses hem de videonun açılış ve gerekli kapanış etiketleri arasına bir veya daha fazla <track> ekleyin. öğelerini kullanabilirsiniz. Aşağıdaki örnekte hem İngilizce hem de Fransızca olarak zamanlanmış metin altyazılar sağlayan iki <track> dosyası bulunmaktadı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 dışında dosyalar, HTML belgesiyle aynı alanda olmalıdır. özelliği yer alıyor.

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

Diyalog metni ve çeviriler için srclang özelliğiyle birlikte subtitles ekleyin. Her label özelliğinin değeri kullanıcıya bir seçenek olarak gösterilir. Belirlenen VTT seçeneğinin içeriği videonun üzerinde görüntülenir. altyazıların stili ::cue/ ::cue() hedeflenerek ayarlanabilir.

kind="caption" değeri, ses efektleri ve diğer alakalı ses bilgilerini içeren transkriptler ve çeviriler için kullanılmalıdır. Bu, yalnızca işitme engelli izleyicilere yönelik değildir. Belki de kullanıcı kulaklığını bulamadığından altyazıları açmış olabilir. Belki de hiç sevdiği bir podcast'in son birkaç örneğini yakalıyor, anladıklarını doğrulamak için konuşmanın dökümünü okumak istiyorlar. İşitsel ve video içeriğine erişmek için alternatif yöntemlerin olması hem önemli hem de uygundur.

kind="description", videoyu göremeyen kullanıcılara yönelik olarak videodaki görsel içeriğin metin açıklamaları içindir. Google Home veya Alexa gibi ekranı olmayan bir sistem kullanıyorlar ya da görme engelliler.

Altyazı sağlama WebVTT biçimini kullanmak, videoya erişimi olan kullanıcılar için işitme sorunları. Engelliliğin bir kişi ile içinde bulunduğu ortam arasında uyumsuzluk olduğunu unutmayın. İşitme engeli olabilir kullanıcının gürültülü bir ortamda bulunması, bozuk hoparlörleri veya bozuk kulaklıkları olması ya da kullanıcının işitme kaybı veya işitme engellidir. İçeriğinizin erişilebilir olmasını sağlamak, düşündüğünüzden çok daha fazla kişiye yardımcı olur. herkese fayda sağlar.

Arka plan videosuyla ilgili dikkat edilmesi gereken noktalar

Pazarlama veya tasarım ekibiniz sitenizin bir arka plan videosu içermesini isteyebilir. Bu, genellikle sesin kapalı kalmasını Kontrol içermeyen, otomatik oynatılan, döngülü video. HTML aşağıdaki gibi görünebilir:

<video 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 tüm özellikleri sunmadan arka plan videoları aracılığıyla oynatma üzerinde kontrol ve tüm altyazılara erişim. Bu video tamamen dekoratif olduğundan ARIA rolünü içeriyor. none ile belirtilir ve yedek içerik atlanır. Her zaman sesi kapalı 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ürüyorsa erişilebilirlik kurallarında duraklatma mekanizması gerekmez boole loop özelliğini kullandığınızda varsayılan olarak sonsuz döngüye girer ve beş saniyeyi veya diğer herhangi bir zaman sınırını aşarsınız. İyilik her zaman videoyu duraklatmaya yönelik bir yöntem ekleyin. Bunu yapmanın en kolay yolu, controls eklemektir.

Özel medya kontrolleri

Tarayıcının yerleşik kontrolleri yerine özel video veya ses kontrollerini görüntülemek için controls özelliğini ekleyin. Daha sonra Özel medya kontrolleri eklemek ve kontroller özelliğini kaldırmak için JavaScript. Örneğin, bir <button> ekleyebilirsiniz. oynatma durumunu gösterir.

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

Bu örnekte, ziyaretçi geçiş yaptıkça güncellenecek metni içeren dataset özelliklerine sahip bir düğme bulunmaktadır. oynatma ve duraklatma durumları arasında geçiş yapar. aria-controls özelliği, düğme tarafından kontrol edilen öğenin id ile birlikte eklenir; Bu örnekte sesi kullanır. Sesi kontrol eden her düğmenin bir etkinlik işleyicisi vardır.

Özelleştirilmiş denetimler oluşturmak için HTMLMediaElement.play() ve HTMLMediaElement.pause(). Oynatma durumunu açıp kapatırken düğme metnini de aç/kapat:

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. Kontroller özelliğini yalnızca bir değiştirme düğmesi örneklendirildikten sonra kaldırın.

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

Harici kontrolleri, kullanıcıların kontrollere erişemediği durumlarda (ör. denetimleri gizli olan arka plan videoları) her zaman dahil edin geri bildirim vermemiz gerekir. Kullanıcıları etkileşime geçirmek için medya erişilebilirlik şartlarıyla ilgili temel bilgileri anlamak önemlidir. işitme kaybı ve görme bozukluğu olan milyonlarca insan da dahil olmak üzere farklı çevresel ve duyusal ihtiyaçlar. HemHTMLMediaElement HTMLVideoElement ve HTMLMediaElement birkaç özellik ekleyerek HTMLAudioElement ve olaylarını yaşayabilir. Birkaç medya API'si daha vardır. TextTrack API dahil. Medya Yakalama ve Akışları ve kullanıcının mikrofonundan ses kaydetmek için MediaDevices API'lerini kullanabilirsiniz. veya kullanıcının ekranını kaydedin. Web Audio API canlı ve önceden kaydedilmiş seslerin değiştirilmesini ve sesin akış olarak kaydedilmesini, kaydedilmesini veya <audio> öğesine gönderilmesini sağlar.

Öğrendiklerinizi sınayın

Ses ve görüntü bilginizi test edin.