Resimler modülünde öğrendiğiniz gibi HTML, bir web sayfasına medya yerleştirilmesini sağlar. Bu bölümde, ses ve video dosyalarının nasıl yerleştirileceği, kullanıcı denetimleri, videolarınız için statik resim yer tutucusu sağlanması ve ses ve video dosyalarını erişilebilir hale getirme de dahil en iyi uygulamalar gibi konuları ele alacağız.
<audio> ve <video>
<video> ve <audio> öğeleri, medya oynatıcıları doğrudan src özelliğiyle yerleştirmek için veya her biri birer src dosya ö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 de dahil olmak üzere birçok başka özellik içerebilir. <video> öğesi ayrıca 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ğin, video kaynağına bağlantı veren src özelliğine sahip tek bir kaynak vardır. poster özelliği, video yüklenirken görüntülenecek bir resim sağlar. Son olarak controls özelliği, kullanıcı videosu kontrolleri sağlar.
Yedek içerik, açılış ve kapanış etiketleri arasına eklenir. Kullanıcı aracısı <video> özelliğini (veya <audio>) desteklemiyorsa bu içerik gösterilir. </video> kapanış etiketi, ikisi arasında içerik olmasa bile zorunludur (ancak her zaman yedek içerik olmalıdır , değil mi?).
Açılış <video> veya <audio> etiketlerinde src özelliği yoksa her biri medya dosyasında src özelliğine sahip bir veya daha fazla <source> öğesi ekleyin. Aşağıdaki örnekte, açılış ve kapanış etiketleri arasında üç medya dosyası seçeneği, yedek içerik, İngilizce ve Fransızca altyazılar bulunmaktadı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ğa işaret eden bir src özelliği içerir ve type özelliği, tarayıcıyı bağlı dosyanın medya türü hakkında bilgilendirir. Bu, tarayıcının şifresini çözemeyeceği medya dosyalarını getirmesini engeller.
type özelliğine, kaynağın tam olarak nasıl kodlandığını belirten bir codecs parametresi ekleyebilirsiniz. Codec'ler, henüz tüm tarayıcılarda desteklenmeyen medya optimizasyonlarını dahil etmenize 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 pratik bir söz dizimi kullanılarak yazılabilir. Ayrıca, MP4 kodlamasının Gelişmiş Video Kodlama Ana Profili Düzey 4.2 olduğunu belirten <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> gibi Codec'lerin anlaşılması daha zor olabilir. Söz diziminin açıklanması bu dersin
kapsamı dışındadır. Jake Archibald'ın daha fazla bilgi için AV1 videoları için codec parametresinin nasıl belirlendiğini açıklayan bir yayını var.
Bir video görüntülerken varsayılan olarak videonun ilk karesi, kullanılabilir duruma geldiğinde sabit çekim olarak gösterilir.
Bu, kontrol edilebilen bir şeydir. poster özelliği, video indirilirken ve oynatılana kadar bir resmin kaynağının gösterilmesini sağlar. Video oynatılır ve ardından duraklatılırsa poster yeniden gösterilmez.
Videonuzun en boy oranını tanımlamayı unutmayın. Video yüklendiğinde poster ve video arasındaki boyut farkı, yeniden düzenleme ve yeniden boyama neden olur.
Her zaman boolean controls özelliğini ekleyin. Bu, kullanıcı denetimlerini görünür hale getirerek kullanıcılara ses seviyelerini kontrol etme, sesi tamamen kapatma ve videoyu tam ekrana genişletme imkanı sağlar.
controls öğesinin atlanması, özellikle boole autoplay özelliği dahilse kötü bir kullanıcı deneyimi oluşturur. Bir medya dosyasının otomatik oynatılması, sessize alındığında ve görünür kontrollerle bile genellikle kötü bir kullanıcı deneyimi oluşturur. Bu nedenle, muted boole özelliği atlanırsa bazı tarayıcıların autoplay özellik yönergesini dikkate almayacağını unutmayın.
Parça sayısı
Zamanlanmış metin parçalarını belirtmek için ses ve videonun açılış ve gerekli kapanış etiketlerinin arasına bir veya daha fazla <track> öğesi ekleyin. Aşağıdaki örnek, hem İngilizce hem de Fransızca dillerinde zamanlanmış metin altyazıları sağlayan iki <track> dosyası içermektedir.
<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 eklenmemişse dosyalar, HTML belgesiyle aynı alanda olmalıdır.
Parça kind özelliği için beş tane numaralandırılmış değer vardır: subtitles, captions, descriptions, chapters ve diğer metadata.
Diyalog konuşma metni ve çeviriler için srclang özelliğiyle birlikte subtitles özelliğini 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österilir. Altyazıların görünümüne ::cue/ ::cue() hedeflenerek stil eklenebilir.
kind="caption" değeri, ses efektleri ve diğer ilgili ses bilgilerini içeren konuşma metni ve çeviriler için ayrılmalıdır.
Bu sadece işitme engelli görüntüleyenler için değildir. Bir kullanıcı, kulaklığını bulamadığından altyazıları açmış olabilir. Belki de favori bir podcast'teki son birkaç konuşmayı yakalayamadılar ve
anladıklarını doğrulamak için konuşma metnini okumak istiyorlar.
Ses ve video içeriğine alternatif yöntemlere sahip olmak hem önemli hem de pratiktir.
kind="description", Google Home veya Alexa gibi ekranı olmayan bir sistem kullanan ya da görme engelli kullanıcılar için videoyu göremeyen kullanıcılara yönelik videodaki görsel içeriğin metin açıklamaları içindir.
WebVTT biçimini kullanarak altyazı sağlamak, videoyu işitme engelli kişiler için erişilebilir hale getirir. Engelliliğin insan ile içinde bulunduğu çevre arasındaki uyumsuzluk olduğunu unutmayın. İşitme bozukluğunun nedeni, kullanıcının gürültülü bir ortamda bulunması, hoparlörün veya kulaklığın bozuk olması ya da işitme kaybı olması veya işitme engelli olması olabilir. İçeriğinizin erişilebilir olmasını sağlamak düşündüğünüzden çok daha fazla kişiye yardımcı olur; herkese yardımcı olur.
Arka plan videoları konusunda dikkat edilmesi gereken noktalar
Pazarlama veya tasarım ekibiniz, sitenizde arka plan videosu olmasını isteyebilir. Genellikle bu, kısık, otomatik oynatılan, döngülü, kontrolsüz bir video istedikleri anlamına gelir. 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 oynatma ve tüm altyazılara erişim konusunda tam kontrol sağlamadan arka plan videoları aracılığıyla aktarılmamalıdır. Bu video tamamen dekoratif olduğu için none ARIA rolünü içeriyor ve tüm yedek içerikleri çıkarıyor.
Her zaman sessize alınmış 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ürerse erişilebilirlik kuralları için duraklatma mekanizması gerekmese de boole loop özelliğine sahip her şey varsayılan olarak sonsuz döngüye girer ve bu beş saniye ya da başka herhangi bir süre sınırını aşar. İyi bir kullanıcı deneyimi için her zaman videoyu duraklatma yöntemini ekleyin. Bu işlemi en kolay şekilde controls öğesi ekleyerek yapabilirsiniz.
Özel medya denetimleri
Tarayıcının yerleşik kontrolleri yerine özel video veya ses kontrollerini görüntülemek için controls özelliğini ekleyin. Ardından, özel medya denetimleri eklemek ve kontroller özelliğini kaldırmak için JavaScript'i kullanın. Örneğin, bir ses dosyasının çalma durumunu açıp kapatan 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ığında güncellenecek metni içeren dataset özelliklerine sahip bir düğme bulunmaktadır. aria-controls özelliği, düğme tarafından kontrol edilen öğenin id özelliğine 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 durumunu açıp kapatırken
düğme metnini de açıp kapatın:
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 dahil edildiğinde, JavaScript başarısız olsa bile kullanıcının sesi (veya videoyu) kontrol edebileceği bir yöntem olur.
Kontroller özelliğini yalnızca değiştirme düğmesi örneklendikten sonra kaldırın.
document.querySelector('[aria-controls]').removeAttribute('controls');
Kullanıcılar denetimlere erişemediğinde her zaman harici denetimleri ekleyin (ör. denetimleri site içeriğinin arkasında gizlenmiş arka plan videoları). İşitme kaybı ve görme bozukluğu olan milyonlarca kişi dahil olmak üzere, farklı çevre ve duyusal ihtiyaçları olan kullanıcıları karşılamak için medya erişilebilirlik gereksinimlerinin temellerini anlamak önemlidir.
Az önce hem HTMLVideoElement hem de HTMLAudioElement tarafından devralınan çeşitli özellikler, yöntemler ve etkinlikler sunan HTMLMediaElement'a değindik. HTMLMediaElement ise kendi başına birkaç özellik, yöntem ve etkinlik eklemiştir. TextTrack API'si de dahil olmak üzere başka birkaç Medya API'si daha vardır. Bir kullanıcının mikrofonundan ses kaydetmek veya kullanıcının ekranını kaydetmek için Media Capture and Streams
ve MediaDevices API'lerini kullanabilirsiniz. Web Audio API, canlı ve önceden kaydedilmiş ses ve akışta değişiklik yapılmasını, sesin kaydedilmesini veya <audio> öğesine gönderilmesini sağlar.
Öğrendiklerinizi sınayın
Ses ve video bilginizi test edin.
<track> öğesi ne için kullanılır?
poster özelliği neyi kontrol eder?