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ı
birautoplay
muted
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.
<track>
öğesi ne için kullanılır?
poster
özelliği neyi kontrol eder?