Jak wiesz z modułu Obrazy, HTML umożliwia umieszczanie multimediów na stronie internetowej. W tej sekcji analizujemy pliki audio i wideo, w tym sposób ich umieszczania, ustawienia użytkownika oraz możliwość umieszczenia obrazu statycznego w filmach. i sprawdzonych metod, w tym dotyczących udostępniania plików audio i wideo.
<audio>
i <video>
<video>
i <audio>
można ich użyć do umieszczania odtwarzaczy multimedialnych bezpośrednio z atrybutem src
lub użyć ich jako kontenera dla serii elementów <source>
,
każdy z sugestii dotyczących pliku src
. Element <video>
może być używany do umieszczania pliku audio, ale do umieszczania na stronie lepiej jest element <audio>
.
plików dźwiękowych.
Otwierające tagi <video>
i <audio>
mogą zawierać kilka innych atrybutów, w tym
controls
, autoplay
, loop
, mute
, preload
i atrybuty globalne. Element <video>
obsługuje też właściwości height
, width
oraz
poster
.
<video src="videos/machines.webm" poster="images/machine.jpg" controls>
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
Ten przykładowy film <video>
zawiera jedno źródło z atrybutem src
prowadzącym do źródła filmu. Atrybut poster
zawiera obraz, który wyświetla się podczas wczytywania filmu. Atrybut controls
udostępnia też elementy sterujące odtwarzaniem filmu użytkownika.
Między tagiem otwierającym a zamykającym znajduje się treść zastępcza. Jeśli klient użytkownika nie obsługuje <video>
(lub <audio>
, ta treść jest wyświetlana. Zamykający tag </video>
jest wymagany, nawet jeśli nie ma między nimi treści
(ale zawsze powinny być też treści zastępcze , prawda?).
Jeśli w otwierającym tagu <video>
lub <audio>
nie ma atrybutu src
, dodaj co najmniej 1 element <source>
.
każdy z atrybutem src
do pliku multimedialnego. W przykładzie poniżej uwzględniliśmy 3 opcje plików multimedialnych: treść zastępczą,
oraz angielskie i francuskie napisy między otwierającym i zamykającym tagiem.
<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>
Każdy element podrzędny <source>
zawiera atrybut src
wskazujący zasób, a atrybut type
informuje przeglądarkę
typu multimediów połączonego pliku. Spowoduje to zablokowanie przeglądarki
pobierania plików multimedialnych, których nie uda się zdekodować.
W atrybucie type
możesz umieścić parametr codecs
,
, który określa dokładnie sposób kodowania zasobu. Kodeki umożliwiają uwzględnianie optymalizacji multimediów, które nie są jeszcze obsługiwane
we wszystkich przeglądarkach. Kodek jest oddzielony od typu nośnika średnikiem. Na przykład kodek można napisać za pomocą
intuicyjną składnię, np. <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">
, która wskazuje, że
Pliki WebM zawierają filmy w formacie VP8 i dźwięk vorbis. Kodeki mogą być też trudniejsze do rozszyfrowania, np. <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">
który oznacza, że kodowanie MP4 to Advanced Video Coding Main Profile Level 4.2. Objaśnienie tej składni jest znacznie szersze
na temat zakresu omawianego w tej lekcji. Jake Archibald opublikował post, w którym wyjaśnia, jak określić parametr kodeka w przypadku filmu w formacie AV1.
znajdziesz więcej informacji.
Podczas wyświetlania filmu domyślnie wyświetlana jest pierwsza klatka filmu, gdy tylko stanie się dostępna.
Nad tym można czuć. Atrybut poster
umożliwia wyświetlenie źródła obrazu podczas pobierania filmu.
aż do momentu
odtworzenia go. Jeśli film odtwarza się, a następnie zostaje wstrzymany, plakat nie jest ponownie widoczny.
Pamiętaj, aby określić współczynnik proporcji swojego filmu, ponieważ po wczytaniu filmu pojawia się różnica między plakatem a filmem spowoduje zmianę układu strony i jej odświeżenie.
Zawsze podawaj atrybut boolean controls
(wartość logiczna). Dzięki temu użytkownik ma kontrolę nad tym,
są widoczne, więc użytkownicy mogą regulować poziom głośności, całkowicie wyciszać dźwięk i rozwijać film do pełnego ekranu.
Pominięcie wartości controls
źle wpływa na wygodę użytkowników, zwłaszcza gdy dodany jest atrybut logiczny autoplay
. Pamiętaj, że niektóre
przeglądarki nie rozpoznają dyrektywy atrybutu autoplay
, jeśli atrybut logiczny muted
zostanie pominięty, ponieważ autoodtwarzanie
nawet jeśli są wyciszone i widoczne elementy sterujące, powodują złe wrażenia użytkownika.
Utwory
Pomiędzy otwierającym i wymaganym tagiem zamykającym zarówno dźwięk, jak i film umieść co najmniej 1 <track>
elementów, które pozwalają
określić ścieżki tekstowe ograniczone czasowo. Przykład poniżej zawiera 2 pliki <track>
, w których napisy wyświetlają się z opóźnieniem w języku angielskim i francuskim.
<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" />
Pliki śledzenia określone w atrybucie src
powinny być w formacie WebVTT (.vtt).
Pliki powinny znajdować się w tej samej domenie co dokument HTML, chyba że rozszerzenie crossorigin
.
Atrybut utworu kind
ma 5 wartości wyliczanych: subtitles
, captions
, descriptions
, chapters
i inny metadata
.
Dodaj subtitles
wraz z atrybutem srclang
do transkrypcji dialogów i tłumaczeń. Wartość każdego atrybutu label
jest wyświetlana jako opcja. Zawartość wybranej opcji VTT jest wyświetlana nad filmem. Wygląd
Styl napisów można dostosować, określając kierowanie za pomocą parametru ::cue/ ::cue().
Wartość kind="caption"
powinna być zarezerwowana dla transkrypcji i tłumaczeń, które zawierają efekty dźwiękowe i inne istotne informacje dźwiękowe.
Nie jest to przeznaczone tylko dla niesłyszących widzów. Być może użytkownik nie może znaleźć swoich słuchawek, więc włączył napisy. A może nie
zauważyli już kilka ostatnich tematów do poruszenia z ulubionego podcastu, dlatego muszą przeczytać transkrypcję, aby potwierdzić, że dobrze rozumieją swoje wypowiedzi.
Alternatywne sposoby dostępu do treści audio i wideo są ważne i wygodne.
kind="description"
służy do tworzenia tekstowych opisów treści wizualnych w filmie dla użytkowników, którzy nie mogą go obejrzeć, niezależnie od tego,
korzystają z systemu bez ekranu takiego jak Google Home czy Alexa, albo są niewidomi.
Przesyłanie napisów w formacie WebVTT sprawia, że film jest dostępny dla osób, wada słuchu. Pamiętaj, że niepełnosprawność to niedopasowanie danej osoby do jej środowiska. Wada słuchu może być spowodowany gdy użytkownik przebywa w głośnym otoczeniu, ma uszkodzone głośniki lub słuchawki albo ma problemy ze słuchem jest głuch. Zapewnienie dostępności treści może pomóc znacznie większej liczbie osób, niż Ci się wydaje. pomaga wszystkim.
Uwagi na temat filmów w tle
Twój zespół marketingowy lub projektowy może chcieć umieścić w witrynie film tła. Ogólnie oznacza to, że ci chcieliby, żeby dźwięk był wyciszony, z automatycznym odtwarzaniem wideo w pętli, bez elementów sterujących. Kod HTML może wyglądać mniej więcej tak:
<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>
Filmy w tle są niedostępne. Treści nie powinny być przekazywane w tle filmów bez zapewnienia użytkownikom
kontrolę nad odtwarzaniem i dostęp do wszystkich napisów. Ten film ma charakter czysto dekoracyjny, dlatego zawiera rolę ARIA.
none
z pominięciem treści zastępczych.
Aby poprawić działanie filmów, które zawsze są wyciszone, usuń ścieżkę audio ze źródeł multimediów.
Jeśli film odtwarza się przez maksymalnie 5 sekund, wskazówki dotyczące ułatwień dostępu nie wymagają mechanizmu wstrzymywania, ale wszystko
z atrybutem logicznym loop
, spowoduje to domyślnie pętlę wykonywaną w nieskończoność przez przekroczenie tego 5-sekundowego lub innego limitu czasu. Na dobre
należy uwzględniać metodę wstrzymywania filmu. Najłatwiej to zrobić, dodając controls
.
Niestandardowe elementy sterujące multimediami
Aby wyświetlać niestandardowe elementy sterujące dźwiękiem i obrazem, a nie wbudowane elementy przeglądarki, dodaj atrybut controls
. Następnie użyj
JavaScriptu, by dodać niestandardowe elementy sterujące multimediami i usunąć ich atrybut. Możesz na przykład dodać element <button>
, który przełącza
stan odtwarzania pliku audio.
<button id="playPause" aria-controls="idOfAudio"
data-pause-text="Pause audio"
data-play-text="Play audio">Pause audio</button>
Ten przykład obejmuje przycisk z atrybutami dataset
zawierający tekst, który będzie aktualizowany, gdy użytkownik przełączy się na inną stronę
między odtworzeniem a odtwarzaniem. Atrybut aria-controls
jest zawarty w elemencie id
elementu kontrolowanego przez przycisk.
w tym przypadku chodzi o dźwięk. Każdy przycisk do sterowania dźwiękiem ma moduł obsługi zdarzeń.
Aby utworzyć własne elementy sterujące, użyj aplikacji HTMLMediaElement.play()
oraz
HTMLMediaElement.pause()
Po przełączeniu stanu odtwarzania
możesz też zmienić tekst przycisku:
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;
}
}
Dzięki dodaniu atrybutu controls
użytkownik może kontrolować dźwięk (lub obraz), nawet jeśli w jego przypadku wystąpi błąd.
Usuń atrybut ustawień tylko po utworzeniu wystąpienia przycisku zastąpienia.
document.querySelector('[aria-controls]').removeAttribute('controls');
Zawsze uwzględniaj zewnętrzne elementy sterujące, gdy użytkownicy nie mogą uzyskać dostępu do elementów sterujących, na przykład przy filmach w tle, które mają ukryte elementy sterujące.
za treścią witryny. Zrozumienie podstawowych wymagań dotyczących ułatwień dostępu w mediach pozwoli Ci dostosować się do potrzeb użytkowników
różnych potrzeb środowiskowych i zmysłowych, w tym milionów ludzi niedosłyszących i niedowidzących.
Przed chwilą omówiliśmy funkcję HTMLMediaElement
, która zawiera kilka właściwości, metod i zdarzeń dziedziczonych przez
HTMLVideoElement oraz
HTMLAudioElement z HTMLMediaElement
dodanymi kilkoma właściwościami,
metod i zdarzeń. Istnieje kilka innych interfejsów Media API.
np. TextTrack API. Możesz skorzystać z funkcji Przechwytywanie multimediów i strumienie
interfejsów API i MediaDevices do nagrywania dźwięku z mikrofonu użytkownika
lub nagrać ekran użytkownika. Interfejs Web Audio API
umożliwia manipulowanie dźwiękiem nagranym na żywo i nagranym oraz strumieniowaniem, zapisywaniem i wysyłaniem dźwięku do elementu <audio>
.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat dźwięku i obrazu.
Do czego służy element <track>
?
Co kontroluje atrybut poster
?