Dźwięk i filmy

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.