Dźwięk i obraz

Jak już wiesz z modułu Obrazy, HTML umożliwia osadzanie multimediów na stronie internetowej. W tej sekcji omówimy pliki audio i wideo, w tym sposób ich osadzania, elementy sterujące dla użytkowników, dodawanie statycznego obrazu jako symbolu zastępczego filmów oraz sprawdzone metody, w tym udostępnianie plików audio i wideo.

<audio> i <video>

Elementy <video> i <audio> mogą służyć do bezpośredniego osadzania odtwarzaczy multimediów za pomocą atrybutu src lub jako element kontenera dla serii elementów <source>, z których każdy zawiera sugestię pliku src. Do umieszczania plików audio można używać elementu <video>, ale do umieszczania plików dźwiękowych lepiej używać elementu <audio>.

Tagi otwierające <video> i <audio> mogą zawierać kilka innych atrybutów, w tym controls, autoplay, loop, mute, preload i atrybuty globalne. Element <video> obsługuje też atrybuty height, width i 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ład elementu <video> ma jedno źródło z atrybutem src, który prowadzi do źródła filmu. Atrybut poster zawiera obraz, który ma się wyświetlać podczas ładowania filmu. Na koniec atrybut controls udostępnia użytkownikowi elementy sterujące odtwarzaniem filmu.

Treść zastępcza jest umieszczana między tagami otwierającym i zamykającym. Jeśli agent użytkownika nie obsługuje <video> (lub <audio>, wyświetlana jest ta treść. Tag zamykający </video> jest wymagany, nawet jeśli między tymi tagami nie ma treści (ale zawsze powinna być treść zastępcza , prawda?).

Jeśli na tagach otwierających <video> lub <audio> nie ma atrybutu src, dodaj co najmniej 1 element <source>, z którego każdy będzie zawierać atrybut src wskazujący plik multimedialny. Poniższy przykład zawiera 3 opcje plików multimedialnych, treści zastępcze oraz napisy w języku angielskim i francuskim między tagami otwierającym i zamykającym.

<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ę o typie multimediów połączonego pliku. Zapobiega to pobieraniu przez przeglądarkę plików multimedialnych, których nie można zdekodować.

W atrybucie type możesz uwzględnić parametr codecs, który określa dokładny sposób kodowania zasobu. Kodeki umożliwiają uwzględnianie optymalizacji multimediów jako ulepszeń progresywnych (elementów nieobsługiwanych przez wszystkie przeglądarki). Kodek jest oddzielony od typu multimediów średnikiem. Na przykład kodek można zapisać za pomocą intuicyjnej składni, takiej jak <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, która wskazuje, że pliki WebM zawierają wideo VP8 i dźwięk Vorbis.

Kodeki mogą być też trudniejsze do odczytania, np. <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">, co oznacza, że kodowanie MP4 to Advanced Video Coding Main Profile Level 4.2. Wyjaśnienie tej składni wykracza poza zakres tej lekcji. Więcej informacji znajdziesz w poście Jake'a Archibalda na temat określania parametru kodeka dla filmu AV1.

Podczas wyświetlania filmu domyślnie pierwsza klatka filmu jest wyświetlana jako zdjęcie, gdy tylko stanie się dostępna. Można to kontrolować. Atrybut poster umożliwia wyświetlanie źródła obrazu podczas pobierania filmu i do momentu jego odtworzenia. Jeśli film zostanie odtworzony, a następnie wstrzymany, plakat nie zostanie ponownie wyświetlony.

Pamiętaj, aby określić format obrazu filmu, ponieważ gdy film się załaduje, różnica w rozmiarze między plakatem a filmem spowoduje ponowne wczytanie i odmalowanie.

Zawsze uwzględniaj atrybut logiczny controls. Dzięki temu elementy sterujące są widoczne, a użytkownicy mogą kontrolować poziom dźwięku, całkowicie go wyciszyć i rozwinąć film na pełny ekran. Pominięcie controls pogarsza wygodę użytkowników, zwłaszcza jeśli uwzględniony jest atrybut logiczny autoplay. Pamiętaj, że niektóre przeglądarki nie będą uwzględniać dyrektywy atrybutu autoplay, jeśli atrybut logiczny muted zostanie pominięty, ponieważ automatyczne odtwarzanie pliku multimedialnego jest zwykle niekorzystne dla użytkownika, nawet jeśli dźwięk jest wyciszony, a elementy sterujące są widoczne.

Utwory

Między tagami otwierającym i zamykającym zarówno w przypadku dźwięku, jak i wideo umieść co najmniej 1 element <track> , aby określić ścieżki tekstowe z synchronizacją czasową. W tym przykładzie znajdują się 2 pliki <track>, które zawierają napisy 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 ścieżek określone w atrybucie src powinny być w formacie WebVTT (.vtt). Pliki powinny znajdować się w tej samej domenie co dokument HTML, chyba że uwzględniony jest atrybut crossorigin.

Atrybut kind ma 5 wartości wyliczeniowych: subtitles, captions, descriptions, chapters i inne metadata.

Do transkrypcji i tłumaczeń dialogów dodaj atrybut subtitles wraz z atrybutem srclang. Wartość każdego atrybutu label jest wyświetlana użytkownikowi jako opcja. Treść wybranej opcji VTT jest wyświetlana nad filmem. Wygląd napisów można dostosować, kierując styl na selektor ::cue/ ::cue().

Wartość kind="caption" powinna być zarezerwowana dla transkrypcji i tłumaczeń, które zawierają efekty dźwiękowe i inne istotne informacje audio. Nie są one przeznaczone tylko dla widzów niesłyszących. Użytkownik nie może znaleźć słuchawek, więc włączył napisy. Może też nie usłyszeli ostatnich kilku punktów ulubionego podcastu i chcą przeczytać transkrypcję, aby upewnić się, że dobrze zrozumieli. Dostęp do treści audio i wideo w alternatywny sposób jest ważny i wygodny.

kind="description" to tekstowe opisy treści wizualnych w filmie dla użytkowników, którzy nie mogą go zobaczyć, niezależnie od tego, czy korzystają z systemu bez ekranu, takiego jak Google Home lub Alexa, czy są osobami niewidomymi.

Dodanie napisów w formacie WebVTT sprawia, że film jest dostępny dla osób z wadą słuchu. Utrata słuchu może być spowodowana przebywaniem użytkownika w głośnym otoczeniu, wadliwymi głośnikami lub zepsutymi słuchawkami, a także niedosłuchem lub głuchotą. Zapewnienie dostępności treści pomaga wielu osobom, a nawet wszystkim.

Uwagi dotyczące filmów w tle

Twój zespół marketingowy lub projektowy może chcieć, aby w Twojej witrynie było wideo w tle. Zwykle oznacza to, że chcą wyciszonego, odtwarzanego automatycznie w pętli filmu bez elementów sterujących. Kod HTML może wyglądać mniej więcej tak:

<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>

Filmy w tle są niedostępne. Treści nie powinny być przekazywane za pomocą filmów w tle bez zapewnienia użytkownikom pełnej kontroli nad odtwarzaniem i dostępu do wszystkich napisów. Ten film ma charakter wyłącznie dekoracyjny, dlatego zawiera rolę ARIA none i nie zawiera żadnych treści zastępczych. Aby zwiększyć skuteczność filmów, które są zawsze wyciszone, usuń ścieżkę audio ze źródeł multimediów.

Jeśli film trwa 5 sekund lub krócej, wytyczne dotyczące ułatwień dostępu nie wymagają mechanizmu wstrzymywania, ale wszystko, co ma atrybut logiczny loop, będzie domyślnie odtwarzane w pętli, przekraczając 5-sekundowy lub inny limit czasu. Aby zapewnić użytkownikom wygodę, zawsze dodawaj możliwość wstrzymania filmu. Najłatwiej to zrobić, dodając controls.

Niestandardowe elementy sterujące multimediami

Aby wyświetlać niestandardowe elementy sterujące wideo lub audio zamiast wbudowanych elementów sterujących przeglądarki, dodaj atrybut controls. Następnie użyj JavaScriptu, aby dodać niestandardowe elementy sterujące multimediami i usunąć atrybut controls. Możesz na przykład dodać <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 zawiera przycisk z atrybutami dataset zawierającymi tekst, który zmienia się, gdy użytkownik przełącza się między stanami odtwarzania i wstrzymania. Atrybut aria-controls jest dołączony do atrybutu id elementu kontrolowanego przez przycisk, w tym przypadku dźwięku. Każdy przycisk sterujący dźwiękiem ma moduł obsługi zdarzeń.

Aby utworzyć niestandardowe elementy sterujące, użyj tagów HTMLMediaElement.play() i HTMLMediaElement.pause(). Podczas przełączania stanu odtwarzania przełączaj też 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 atrybutowi controls użytkownik może sterować dźwiękiem (lub obrazem), nawet jeśli JavaScript nie działa. Atrybut controls należy usunąć dopiero po utworzeniu przycisku zastępczego.

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

Zawsze uwzględniaj zewnętrzne elementy sterujące, gdy użytkownicy nie mają dostępu do elementów sterujących, np. w przypadku filmów w tle, których elementy sterujące są ukryte za treścią witryny. Aby uwzględnić potrzeby użytkowników z różnymi wymaganiami środowiskowymi i sensorycznymi, w tym milionów osób z ubytkiem słuchu i wadami wzroku, ważne jest, aby znać podstawowe wymagania dotyczące dostępności mediów. Wspomnieliśmy już o interfejsie HTMLMediaElement, który udostępnia kilka właściwości, metod i zdarzeń dziedziczonych przez interfejsy HTMLVideoElement i HTMLAudioElement. Interfejs HTMLMediaElement dodaje też kilka własnych właściwości, metod i zdarzeń. Istnieje kilka innych interfejsów Media API, w tym TextTrack API. Za pomocą interfejsów Media Capture and Streams i MediaDevices możesz nagrywać dźwięk z mikrofonu użytkownika lub nagrywać ekran użytkownika. Web Audio API umożliwia manipulowanie dźwiękiem na żywo i nagranym wcześniej oraz przesyłanie strumieniowe, zapisywanie lub wysyłanie dźwięku do elementu <audio>.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o dźwięku i obrazie.