Dźwięk i filmy

Jak dowiedzieliśmy się z modułu obrazów, HTML umożliwia umieszczanie multimediów na stronie internetowej. W tej sekcji omawiamy pliki audio i wideo, m.in. sposoby ich umieszczania, elementy sterujące dla użytkowników, obiekty statyczne obrazu zastępczego dla filmów oraz sprawdzone metody, takie jak udostępnianie plików audio i wideo.

<audio> i <video>

Elementy <video> i <audio> mogą służyć do umieszczania odtwarzaczy multimedialnych bezpośrednio za pomocą atrybutu src lub jako kontener dla serii elementów <source>. Każdy z nich zawiera sugestię dotyczącą pliku src. Elementu <video> można używać do umieszczania plików audio, ale element <audio> jest preferowany do umieszczania plików dźwiękowych.

Otwierające tagi <video> i <audio> mogą zawierać inne atrybuty, 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>

W tym przykładzie <video> występuje jedno źródło z atrybutem src prowadzącym do źródła filmu. Atrybut poster umożliwia wyświetlanie obrazu, który będzie się wyświetlać podczas wczytywania filmu. Na koniec atrybut controls zapewnia elementy sterujące odtwarzaniem filmu.

Zawartość zastępcza jest między otwierającym a zamykającym tagiem. Jeśli klient użytkownika nie obsługuje <video> (lub <audio>, ta treść jest wyświetlana. Wymagany jest zamykający tag </video>, nawet jeśli między nimi nie ma żadnej treści (ale zawsze powinna być treść zastępcza , tak?).

Jeśli w otwierających tagach <video> lub <audio> nie ma atrybutu src, dodaj do pliku multimedialnego co najmniej 1 element <source>, każdy z atrybutem src. Poniższy przykład zawiera 3 opcje pliku multimedialnego, treść zastępczą oraz napisy w językach angielskim i francuskim między tagami otwierającymi i zamykającymi.

<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 nośnika linku. Uniemożliwia to przeglądarce pobieranie plików multimedialnych, których nie udałoby się zdekodować.

W atrybucie type możesz umieścić parametr codecs, który dokładnie określa 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że być napisany przy użyciu składni intuicyjnej, takiej jak <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, co oznacza, że pliki WebM zawierają wideo i vorbis z dźwiękiem VP8. Trudniej jest też rozszyfrować kodeki, na przykład kod <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">, który wskazuje, że kodowanie MP4 to Advanced Video Coding Main Profile Level, Level 4.2. Wyjaśnienie tej składni wykracza daleko poza zakres tej lekcji. Jake Archibald opublikował post, w którym wyjaśnia, jak określić parametr kodeka w filmie AV1.

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

Pamiętaj, by określić format obrazu, ponieważ po wczytaniu filmu różnica rozmiaru między plakatem a filmem spowoduje przeformatowanie i ponowne wyrenderowanie.

Zawsze dodawaj atrybut boolean controls (wartość logiczna). Dzięki temu elementy sterujące są widoczne, a użytkownicy mogą sterować poziomem dźwięku, całkowicie wyciszyć dźwięk i rozwinąć film do pełnego ekranu. Pominięcie controls źle wpływa na wrażenia użytkowników, zwłaszcza jeśli podany jest atrybut logiczny autoplay. Pamiętaj, że niektóre przeglądarki nie będą przestrzegać dyrektywy atrybutu autoplay, jeśli atrybut logiczny muted zostanie pominięty, ponieważ autoodtwarzanie pliku multimedialnego może negatywnie wpływać na wrażenia użytkownika, nawet jeśli urządzenie jest wyciszone i ma widoczne elementy sterujące.

Utwory

Między otwierającym i wymaganym tagiem zamykającym dźwięku i wideo umieść co najmniej 1 element <track>, aby określić ścieżki tekstowe z upływem czasu. Poniższy przykład zawiera 2 pliki <track> z podpisami z ustawionym czasem 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 zawiera się atrybut crossorigin.

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

Dołącz atrybut subtitles wraz z atrybutem srclang na potrzeby transkrypcji i tłumaczeń dialogów. 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żesz dostosować, używając ustawień kierowania ::cue/ ::cue().

Wartość kind="caption" powinna być zarezerwowana na potrzeby transkrypcji i tłumaczeń, które zawierają efekty dźwiękowe i inne istotne informacje audio. Ta opcja jest przeznaczona nie tylko dla niesłyszących widzów. Być może użytkownik nie mógł znaleźć słuchawek, więc włączył napisy. A może nie do końca rozumieli ostatnie tematy do omówienia z ulubionego podcastu, dlatego chcą przeczytać transkrypcję, aby potwierdzić, że je rozumie. Ważne i wygodne są też alternatywne sposoby dostępu do materiałów audio i wideo.

kind="description" służy do opisywania tekstowych treści wizualnych w filmie użytkownikom, którzy nie widzą filmu, niezależnie od tego, czy korzystają z systemu bez ekranu, np. Google Home czy Alexa, czy też są niewidomy.

Dodawanie napisów w formacie WebVTT sprawia, że film jest dostępny dla osób z wadą słuchu. Pamiętaj, że niepełnosprawność to niezgodność między osobą a otoczeniem. Uszkodzenie słuchu może wynikać z tego, że użytkownik przebywa w głośnym otoczeniu, ma wadliwe głośniki lub słuchawki, albo jest niesłyszący lub ma problemy ze słuchem. Dbanie o przystępność Twoich treści pomaga znacznie większej liczbie osób, niż Ci się wydaje, i wszystkim użytkownikom.

Uwagi na temat filmów w tle

Twój zespół marketingowy lub projektant może chcieć umieścić w witrynie film w tle. Zwykle oznacza to, że chce mieć wyciszony, odtwarzany automatycznie i zapętlony film, ale 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 nie są dostępne. Treści nie powinny być przekazywane za pomocą filmów w tle, chyba że użytkownicy mają pełną kontrolę nad odtwarzaniem i dostępem do wszystkich napisów. Ten film ma charakter czysto dekoracyjny, dlatego zawiera rolę ARIA parametru none i pomija wszystkie treści zastępcze. Aby poprawić wyniki zawsze wyciszonych filmów, usuń ścieżkę audio ze swoich źródeł multimediów.

Jeśli film jest odtwarzany przez maksymalnie 5 sekund, wskazówki dotyczące ułatwień dostępu nie wymagają mechanizmu wstrzymywania, ale wszystkie elementy z atrybutem logicznym loop będą domyślnie odtwarzane w pętli w nieskończoność, co spowoduje przekroczenie tego lub innego limitu czasu. Dla wygody użytkowników zawsze dodawaj metodę wstrzymywania filmu. Najłatwiej to zrobić, dodając do niego atrybut controls.

Niestandardowe opcje sterowania multimediami

Aby wyświetlać niestandardowe elementy sterujące obrazem lub dźwiękiem, a nie wbudowane elementy sterujące przeglądarki, dodaj atrybut controls. Następnie za pomocą JavaScriptu dodaj niestandardowe elementy sterujące multimediami i usuń atrybut elementy. Możesz na przykład dodać <button>, który będzie 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>

W tym przykładzie użyto przycisku z atrybutami dataset zawierającym tekst, który będzie aktualizowany, gdy użytkownik przełączy się między stanami odtwarzania i wstrzymywania. Atrybut aria-controls jest dołączony do elementu id elementu kontrolowanego przez przycisk; w tym przypadku z dźwiękiem. Każdy przycisk do sterowania dźwiękiem ma moduł obsługi zdarzeń.

Aby utworzyć niestandardowe ustawienia, użyj HTMLMediaElement.play() i HTMLMediaElement.pause(). Aby zmienić stan odtwarzania, zmień 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 zastosowaniu atrybutu controls użytkownik może kontrolować dźwięk (lub obraz), nawet jeśli JavaScript ulegnie awarii. Atrybut elementy sterujące należy usunąć dopiero po utworzeniu wystąpienia przycisku wymiany.

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

Gdy użytkownicy nie mają do nich dostępu, zawsze uwzględniaj zewnętrzne elementy sterujące, np. filmy w tle, których elementy sterujące są ukryte za zawartością witryny. Warto znać podstawowe wymagania dotyczące ułatwień dostępu w multimediach, aby dostosować się do potrzeb użytkowników o różnych potrzebach środowiskowych i sensorycznych, w tym milionów osób z wadami słuchu i wadami wzroku. Właśnie wspomnieliśmy o HTMLMediaElement, który udostępnia kilka właściwości, metod i zdarzeń dziedziczonych zarówno przez HTMLVideoElement, jak i HTMLAudioElement. W interfejsie HTMLMediaElement dodano kilka właściwości, metod i zdarzeń. Istnieje kilka innych interfejsów Media API, w tym TextTrack API. Za pomocą interfejsów API Media Capture i strumieni oraz MediaDevices możesz nagrywać dźwięk z mikrofonu użytkownika lub nagrywać ekran użytkownika. Interfejs Web Audio API umożliwia manipulację i strumieniowe przesyłanie dźwięku na żywo i nagranych wcześniej oraz zapisywanie i wysyłanie dźwięku do elementu <audio>.

Sprawdź swoją wiedzę

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