Wideo w WordPressie: MOV, MP4, WebM i Core Web Vitals

Typowy problem motion designerów i montażystów, którzy zaczynają pracę przy stronach: “Zrobiłem piękną animację w Adobe After Effects, wyrenderowałem do .mov (w najlepszej jakości!), wrzuciłem do WordPressa i nic. Czarny ekran, błąd albo plik waży 500 MB i ładuje się godzinę.”

Plik nie jest uszkodzony. Powstał z myślą o stanowisku montażowym, a przeglądarka nim nie jest.

#Dlaczego pliki MOV nie odtwarzają się w WordPressie

Format .mov (kontener QuickTime) to standard w pracy kreatywnej, zwłaszcza na Macach. .mov jest kontenerem, nie kodekiem. O tym, że nie nadaje się do sieci, zwykle decyduje to, co jest w środku: ProRes albo nieskompresowane klatki.

Rozmiary nie są kwestią opinii, bo Apple je publikuje. Dla 1920x1080 przy 29,97 kl./s dokument techniczny ProRes podaje docelowe przepływności: 45 Mb/s dla 422 Proxy, 102 Mb/s dla 422 LT, 147 Mb/s dla 422, 220 Mb/s dla 422 HQ, 330 Mb/s dla 4444 i 495 Mb/s dla 4444 XQ. Aneks tego samego dokumentu przelicza je na gigabajty na godzinę: 422 HQ to 99 GB na godzinę, czyli około 1,65 GB na jedną minutę materiału. Dwudziestosekundowa pętla do sekcji hero prosto z After Effects może więc ważyć więcej niż cała reszta strony.

Potem w WordPressie psują się dwie rzeczy, w tej kolejności.

Upload może w ogóle się nie zakończyć. wp_max_upload_size() odczytuje z PHP upload_max_filesize i post_max_size i zwraca mniejszą z tych wartości. Na hostingu współdzielonym często zostają one na skromnych ustawieniach domyślnych, a żądanie POST na kilkaset megabajtów pada, zanim biblioteka mediów w ogóle je zobaczy.

Jeśli się zakończy, plik i tak się nie odtworzy. WordPress przyjmuje plik, bo wp_get_mime_types() zawiera 'mov|qt' => 'video/quicktime'. Ale wp_get_video_extensions(), funkcja, która decyduje, co rdzeń uznaje za odtwarzalne źródło wideo, zwraca tylko mp4, m4v, webm, ogv i flv. MOV nie ma na tej liście. Załącznik leży więc w bibliotece, wygląda jak wideo, a zachowuje się jak plik do pobrania.

Ręczne wymuszenie znaczników też nie pomoże. Przewodnik MDN po kontenerach podaje, że QuickTime obsługują wyłącznie starsze wersje Safari oraz przeglądarki, które obsługiwały wtyczkę QuickTime od Apple, w tabeli QuickTime oznacza każdy kodek jako nieobsługiwany w Firefoksie i zaznacza, że od macOS 10.15 Catalina framework QuickTime w ogóle nie jest dostępny. ProRes nie występuje wśród kodeków, które przewodnik MDN po kodekach wideo opisuje dla przeglądarek.

#Dlaczego ProRes nie nadaje się do sieci

ProRes zaprojektowano do profesjonalnego montażu, gdzie priorytetem jest zachowanie maksymalnej jakości przez kolejne rundy korekcji barwnej i kompozycji. Każda klatka jest zapisywana z lekką kompresją wewnątrzklatkową, przez co pliki są ogromne, ale łatwo je przewijać i ciąć w postprodukcji.

Sieć ma inne priorytety. Odwiedzający oczekują, że wideo ruszy w ciągu kilku sekund. Połączenia mobilne mają ograniczoną przepustowość. Przeglądarki potrzebują kodeków zbudowanych pod wydajne dekodowanie, co MDN pisze wprost w swoim przewodniku po kodekach: żaden bezstratny ani prawie bezstratny kodek nie jest powszechnie dostępny w przeglądarkach, bo nieskompresowane 1080p z próbkowaniem 4:2:0 wymaga już co najmniej 1,5 Gb/s.

#Czy eksport w maksymalnej jakości poprawia wideo w sieci

Wielu projektantów zakłada, że lepsza jakość oznacza lepsze wrażenia. Plik master, który dociera przez kilka minut, daje gorsze wrażenia niż skompresowana kopia, która startuje od razu i której zwykły widz na ekranie laptopa nie odróżni od mastera.

#Jakie formaty wideo obsługuje WordPress

Dwa formaty pokrywają całą sieć, a wybór między nimi jest mniej dramatyczny niż wtedy, gdy powstawał ten artykuł.

#1. MP4 z H.264 (AVC)

Bezpieczny wybór domyślny. caniuse podaje dla H.264 w MP4 97,26 procent globalnego wsparcia (dane sprawdzone 12 października 2026), aż do Chrome 4 i Safari 3.2. Jeśli wysyłasz jeden plik, wyślij ten.

O tym, czy eksport faktycznie działa, decydują dwa ustawienia, a oba są niewidoczne w odtwarzaczu podglądu.

Próbkowanie chrominancji. ProRes 422 to, jak sama nazwa mówi, 4:2:2, a rodzina 422 jest 10-bitowa. Przekaż to do libx264 bez dodatkowych instrukcji, a zakoduje strumień w profilu High 4:2:2, którego przeglądarki nie zdekodują. Sprawdziliśmy to na pliku testowym ProRes 422 HQ: bez flagi formatu pikseli ffprobe pokazał wynik jako High 4:2:2 z yuv422p10le. Wymuś 8-bitowe 4:2:0 przez -pix_fmt yuv420p.

Gdzie leży indeks. Dokumentacja muxerów FFmpeg opisuje -movflags +faststart jako opcję, która uruchamia drugi przebieg i przenosi indeks (atom moov) na początek pliku, i zaznacza, że domyślnie nie jest włączona. Bez niej przeglądarka nie zacznie odtwarzania, dopóki nie dotrze cały plik, a to dokładnie objaw “ładuje się godzinę”.

Jeśli eksportujesz z Adobe Media Encoder, a nie z wiersza poleceń, wybierz jako format H.264, nie QuickTime, a potem sprawdź oba ustawienia na gotowym pliku. Liczy się tylko lista formatów, bo nazwy presetów zmieniają się między wydaniami.

#Zalecane ustawienia eksportu H.264

Dla przewidywalnych wyników przy eksporcie do WordPressa:

• Rozdzielczość: 1920x1080 dla wideo z treścią, 1280x720 dla klipów pobocznych.
• Jakość: CRF między 23 a 28 w libx264, zamiast gonić za stałym bitrate’em.
• Liczba klatek: zostaw tę ze źródła (zwykle 24, 25 lub 30 kl./s).
• Dźwięk: AAC 128 do 192 kb/s stereo albo brak ścieżki audio, jeśli klip jest dekoracyjny.
• Format pikseli: yuv420p, sprawdzony przez ffprobe na wyeksportowanym pliku.
• Profil i poziom: przypnij je przez -profile:v high -level:v 4.0 dla 1080p, żeby plik zgadzał się z ciągiem codecs deklarowanym w znacznikach (więcej o tym niżej).

#2. WebM z VP9

Otwarty format rozwijany przez Google. Strona VP9 Google podaje, że kodek potrafi obniżyć przepływność wideo nawet o 50% w porównaniu z innymi znanymi kodekami. Traktuj to jako sufit osiągany na trudnym materiale, a nie liczbę, którą uzyskasz na każdym klipie, ale oszczędność na płaskiej grafice ruchomej jest realna.

Przestarzała rada w tym temacie brzmi, że WebM to format dla Chrome i Firefoksa. Od lat tak nie jest. caniuse notuje pełne wsparcie WebM w Safari na macOS od wersji 16 i w Safari na iOS od 17.4, a Safari od 14.1 do 15.6 odtwarzało go już na macOS 11.3 Big Sur lub nowszym. Daje to pełne wsparcie na poziomie 96,05 procent globalnie, nieco ponad punkt za H.264 w MP4.

#Wsparcie kodeka AV1 w przeglądarkach

AV1 to kolejna generacja i kompresuje lepiej niż VP9, ale jego wdrożenie się opóźnia. caniuse daje mu 80,39 procent pełnego wsparcia, a 95,02 procent dopiero po doliczeniu wsparcia częściowego. Częściowe wsparcie to Safari: na macOS i iOS dekoduje AV1 tylko na urządzeniach ze sprzętowym dekoderem, takich jak iPhone 15 Pro czy MacBook Pro z M3.

Przewodnik MDN po kodekach wideo zaleca obecnie WebM z AV1 i Opus jako pierwszy wybór dla typowej strony, a MP4 z AVC i AAC jako szeroko kompatybilny drugi. AV1 to więc pierwszy <source>, nigdy jedyny. Kodowanie AV1 jest też dużo wolniejsze niż H.264 czy VP9, więc opłaca się przy materiale kodowanym raz i odtwarzanym wiele razy.

#Tag video w HTML5 ze źródłami WebM i MP4

Jeśli musisz hostować wideo u siebie, na przykład jako tło w sekcji hero, podaj źródła od najlepszego. Przeglądarka bierze pierwsze, które potrafi zdekodować, i na resztę już nie patrzy.

<video autoplay loop muted playsinline preload="none"
       poster="/media/hero-poster.avif"
       width="1920" height="1080">
  <source src="/media/hero.webm" type='video/webm; codecs="vp9, opus"'>
  <source src="/media/hero.mp4" type='video/mp4; codecs="avc1.640028, mp4a.40.2"'>
  Twoja przeglądarka nie obsługuje wideo.
</video>

Każdy atrybut ma tu konkretne zadanie:

• muted razem z playsinline: przeglądarki mobilne odmawiają autoodtwarzania bez obu. Bez playsinline iOS przełącza wideo na pełny ekran w chwili startu, co niszczy pętlę w tle.
• preload="none": nic nie jest pobierane, dopóki nie zażąda się odtwarzania, więc pierwsze malowanie niesie poster. Użyj metadata, jeśli potrzebujesz długości od razu, a auto prawie nigdy.
• poster: kadr w AVIF lub WebP waży ułamek wideo i to on jest tym, co odwiedzający faktycznie widzi przez pierwsze sekundy.
• część codecs= w ciągu type: pozwala przeglądarce odrzucić źródło bez pobrania z niego ani jednego bajtu.
• width i height: ustawiaj je zawsze, żeby miejsce było zarezerwowane przed załadowaniem wideo, co zapobiega Cumulative Layout Shift, jednemu ze wskaźników Core Web Vitals.

#Jak zapisać ciąg codecs dla MP4 i WebM

Wcześniejsze wersje tego artykułu deklarowały dla źródła MP4 avc1.42E01E. Ten ciąg oznacza profil Baseline (42) na poziomie 3.0, podczas gdy polecenie FFmpeg niżej tworzy plik w profilu High. Ciąg codecs opisujący inny strumień niż ten, który wysyłasz, to fałszywa deklaracja wobec przeglądarki.

Przewodnik MDN po parametrze codecs definiuje postać AVC jako avc1.PPCCLL: dwie cyfry szesnastkowe na profil, dwie na flagi ograniczeń, dwie na poziom. Profil High to 64 z ograniczeniami 00, a poziom 4.0 to dziesiętnie 40, szesnastkowo 28. High na poziomie 4.0 to więc avc1.640028. Dźwięk AAC-LC w MP4 to mp4a.40.2. Dla WebM MDN podaje krótkie formy vp9, vp8, opus i vorbis.

Odczytaj prawdziwe wartości z wyeksportowanego pliku, zamiast je zgadywać:

ffprobe -v error -select_streams v:0 \
  -show_entries stream=profile,level,pix_fmt -of csv=p=0 web.mp4

W naszym teście kodowanie 1080p z -preset slow bez flagi poziomu zwróciło High,50, czyli poziom 5.0, bo preset slow używa więcej klatek referencyjnych, niż poziom 4.0 dopuszcza przy tej rozdzielczości. Z -profile:v high -level:v 4.0 wynik to High,40, czyli dokładnie to, co deklaruje avc1.640028.

#Atrybuty bloku Wideo w edytorze blokowym

W edytorze blokowym nie musisz pisać tagu ręcznie. block.json rdzennego bloku Wideo ma atrybuty autoplay, controls, loop, muted, playsInline, poster, preload, src i tracks, przy czym preload domyślnie ma wartość metadata, a playsInline ma własny przełącznik na pasku bocznym. Blok Okładka (Cover) takiego atrybutu nie ma: jego block.json nie deklaruje klucza playsInline, a zapisany kod na sztywno ustawia autoPlay, muted, loop i playsInline na wideo w tle, więc pętla wideo w Okładce zawsze odtwarza się w linii i nie ma czego zaznaczać. Żaden z tych bloków nie zapisuje w znacznikach parametru codecs.

#Jak shortcode video wybiera źródła

Klasyczna treść i wiele page builderów wciąż przechodzi przez shortcode [video], który rdzeń renderuje funkcją wp_video_shortcode(). Jej kod w wp-includes/media.php wyjaśnia kilka rzeczy, które ludzie zgłaszają jako błędy.

• MOV zamienia się w link. Gdy src wskazuje plik z rozszerzeniem spoza wp_get_video_extensions(), funkcja zwraca zwykły link <a class="wp-embedded-video"> do pliku zamiast odtwarzacza.
• Kolejność źródeł jest stała. Możesz przekazać po jednym atrybucie na rozszerzenie (mp4, m4v, webm, ogv, flv), a funkcja wypisuje elementy <source> w kolejności z tej listy. [video webm="a.webm" mp4="a.mp4"] stawia więc MP4 na pierwszym miejscu i wybiera je każda przeglądarka, która dekoduje H.264.
• Typ nie zawiera codecs. Każdy <source> dostaje sam typ MIME z wp_check_filetype(), na przykład video/mp4.
• Wartości domyślne. preload to metadata, muted to false, a odtwarzacz ma 640x360, chyba że przekażesz width i height; większa szerokość jest zmniejszana do $content_width motywu.
• Biblioteka odtwarzacza. Wynik jest domyślnie opakowywany dla MediaElement.js; zmienia to filtr wp_video_shortcode_library.

Dodanie mov przez filtr wp_video_extensions sprawi, że shortcode wyrenderuje dla niego odtwarzacz, ale nie da Chrome ani Firefoksowi dekodera, więc rozwiązaniem nadal jest ponowne kodowanie.

#Typy MIME na serwerze dla MP4 i WebM

Plik może być zakodowany idealnie, a mimo to serwowany ze złym Content-Type. Sprawdź nagłówek odpowiedzi w zakładce Sieć w przeglądarce. Domyślny plik mime.types w nginx mapuje już mp4 na video/mp4, webm na video/webm i mov na video/quicktime. Na Apache, jeśli nagłówek wraca jako text/plain albo application/octet-stream, dodaj mapowanie w .htaccess:

AddType video/mp4 .mp4
AddType video/webm .webm

#Optymalizacja rozmiaru pliku wideo

Rozmiar pliku ma znaczenie dla wygody użytkownika i dla SEO. Wideo, które ładuje się zbyt długo, podnosi współczynnik odrzuceń i pogarsza Core Web Vitals.

Nie ma uniwersalnej tabeli docelowych rozmiarów: ta sama sekunda materiału waży zupełnie inaczej w statycznym ujęciu i w ziarnistej panoramie. Ustal jakość przez CRF, zmierz powstały plik i decyduj na podstawie tej liczby.

#Darmowe narzędzia do kompresji

1. HandBrake: darmowy i open source. Jego lista funkcji wymienia jako kodery wideo AV1, H.265, H.264, MPEG-4, MPEG-2, VP8 i VP9, a jako kontenery MP4, MKV i WebM.
2. FFmpeg: narzędzie wiersza poleceń, na którym opiera się większość pozostałych, i to ono jest używane we wszystkich przykładach tutaj.
3. Shutter Encoder: graficzny interfejs do FFmpeg, łatwiejszy na start.

#Jak skompresować wideo w FFmpeg

# MOV do webowego MP4 (H.264, profil High, poziom 4.0)
ffmpeg -i input.mov -c:v libx264 -preset slow -crf 23 \
  -profile:v high -level:v 4.0 -pix_fmt yuv420p \
  -c:a aac -b:a 128k -movflags +faststart output.mp4

# MOV do WebM z VP9 i Opus
ffmpeg -i input.mov -c:v libvpx-vp9 -crf 33 -b:v 0 -row-mt 1 \
  -pix_fmt yuv420p -c:a libopus -b:a 96k output.webm

# Wersja 720p na urządzenia mobilne
ffmpeg -i input.mov -vf scale=1280:720 -c:v libx264 -preset slow -crf 23 \
  -pix_fmt yuv420p -movflags +faststart output-mobile.mp4

Wartość -crf steruje jakością: niższe wartości oznaczają wyższą jakość i większy plik. Dla sieci CRF od 23 do 28 dla H.264 albo od 30 do 35 dla VP9 to rozsądny zakres, od którego warto zacząć pomiary.

Sprawdź eksport, zamiast zakładać, że jest dobry, bo brak +faststart niczego nie sygnalizuje:

grep -abo -m2 -e moov -e mdat output.mp4

Polecenie wypisuje przesunięcie w bajtach pierwszego moov i pierwszego mdat. Przesunięcie moov powinno być mniejsze. W naszym pliku testowym bez flagi mdat był pierwszy, na bajcie 44, a moov leżał na końcu pliku; z flagą moov był na bajcie 36.

#Jak opublikować wideo z przezroczystością (kanał alfa)

VP9 w WebM przenosi kanał alfa, jeśli kodujesz do yuva420p. Przewodnik MDN po kodekach wymienia VP9 we wszystkich aktualnych wersjach Chrome, Edge, Firefoksa, Opery i Safari, z adnotacją, że Safari nie obsługuje w nim przezroczystości alfa; caniuse ma tę samą adnotację dla WebM w Safari. Droga Apple to HEVC z alfą, opisana w dokumencie HEVC Video with Alpha Interoperability Profile. Jeśli kompozycja z After Effects potrzebuje w sieci prawdziwego kanału alfa, wysyłasz dwa pliki i jednolity kolor jako rozwiązanie awaryjne.

#Wideo na własnym serwerze czy YouTube lub Vimeo

Własny hosting daje jeden plik o jednej przepływności, dostarczany progresywnym pobieraniem HTTP. Nie ma drabinki adaptacyjnej. WordPress przy uploadzie tworzy przeskalowane wersje obrazów, a dla wideo nie robi nic podobnego, bo rdzeń nie zawiera transkodera. Odwiedzający na słabym połączeniu mobilnym dostaje twój plik 1080p albo nic, i czeka, aż się zbuforuje.

Reguła dotyczy więc tego, czym jest wideo, a nie tego, ile waży.

#Kiedy hostować wideo na własnym serwerze

• Wideo w tle: krótkie, nieme animacje za nagłówkiem sekcji hero.
• Wideo prywatne: treść, która nie może trafić na publiczną platformę.
• Wymagania marki: gdy odtwarzacz ma być w pełni twój, bez logotypów stron trzecich.
• Waga strony: przy bardzo krótkich klipach osadzenie YouTube wciąga zewnętrzny odtwarzacz i jego ciasteczka dla czegoś, co jest bliższe ruchomemu obrazkowi w tle.

#Kiedy użyć YouTube lub Vimeo

• Każde wideo z dźwiękiem dłuższe niż około 30 sekund, które odwiedzający przyszedł obejrzeć: wywiad, tutorial, omówienie case study.
• Treści edukacyjne lub marketingowe, które zyskują na wyszukiwarce YouTube.
• Wideo, które ma być udostępniane w mediach społecznościowych.
• Strony z ograniczonym transferem, gdzie liczy się streaming adaptacyjny.

Transfer to druga połowa tej decyzji. Pętla 10 MB na stronie, która ma pięćdziesiąt tysięcy odsłon miesięcznie, to pół terabajta ruchu wychodzącego, a na podstawowym hostingu oznacza to rozmowę z dostawcą.

#Jak Google indeksuje wideo z własnego serwera

Sprawdzone metody SEO dla wideo od Google dodają do pytania o format trzecią perspektywę, która nie pokrywa się z perspektywą przeglądarki.

Google potrafi przetworzyć MOV, przeglądarki nie potrafią go odtworzyć. Lista obsługiwanych przez Google typów plików wideo obejmuje MOV, MP4, M4V, WebM, OGV i inne. MOV jest więc w zasadzie indeksowalny, a mimo to bezużyteczny dla odwiedzającego, więc to nie jest argument za jego publikacją.

Pełny zestaw funkcji wideo dostaje tylko strona odtwarzania. Google definiuje stronę odtwarzania jako taką, której głównym celem jest pokazanie jednego wideo. Wpis na blogu recenzujący osadzone wideo albo strona produktu z wideo 360 wprost nie są stronami odtwarzania; takie strony mogą nadal pojawiać się jako wyniki tekstowe i w Grafice Google z oznaczeniem wideo. Dekoracyjna pętla w sekcji hero nigdy nie będzie wynikiem wideo i nie musi nim być.

Poster służy też jako miniatura. Jeśli używasz elementu <video>, Google odczytuje atrybut poster jako preferowaną miniaturę. Obsługiwane formaty miniatur to BMP, GIF, JPEG, PNG, WebP, SVG i AVIF, co najmniej 60x30 pikseli, pod stabilnym adresem URL, który Googlebot może pobrać.

Nie chowaj wideo za interakcją. Google prosi, żeby wideo nie wymagało do załadowania przesunięcia, kliknięcia ani wpisania czegokolwiek, a wideo wstawiane przez JavaScript było widoczne w wyrenderowanym HTML pokazywanym przez narzędzie do sprawdzania adresów URL. Ma to znaczenie dla wzorca leniwego ładowania opisanego niżej: w porządku dla dekoracyjnej pętli, ryzykowne dla wideo, które ma być zaindeksowane.

Dane strukturalne. Dokumentacja VideoObject wymienia trzy wymagane właściwości: name, thumbnailUrl i uploadDate (ISO 8601, ze strefą czasową). contentUrl powinien wskazywać sam plik wideo i jest preferowany; embedUrl wskazuje odtwarzacz i jest alternatywą, gdy adres pliku nie jest dostępny. Dla MP4 na własnym serwerze contentUrl to po prostu adres pliku w wp-content/uploads.

#Jak zrobić responsywne wideo w WordPressie

WordPress sam nie dopasowuje wideo z własnego serwera do rozmiaru ekranu, więc tę część piszesz sam.

#CSS dla responsywnego wideo

/* Responsywny kontener na wideo */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* proporcje 16:9 */
    height: 0;
    overflow: hidden;
}

.video-container video,
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#Różne rozdzielczości dla różnych urządzeń

<video autoplay loop muted playsinline>
  <!-- Mobile: 720p -->
  <source
    src="video-720p.webm"
    type="video/webm"
    media="(max-width: 768px)"
  >
  <!-- Desktop: 1080p -->
  <source src="video-1080p.webm" type="video/webm">
  <source src="video-1080p.mp4" type="video/mp4">
</video>

Atrybut media na elemencie <source> w wideo to stara funkcja z luką w środku: według danych o kompatybilności z MDN Firefox od 53 do 119 respektował go tylko wewnątrz <picture>, a wsparcie dla <audio> i <video> wróciło w Firefoksie 120.

#Jak zapewnić dostępność wideo w WordPressie

Dostępne wideo jest wymagane w europejskim sektorze publicznym na mocy dyrektywy w sprawie dostępności stron internetowych, a poza nim po prostu sprawia, że treść rozumie więcej osób. Odpowiednie kryteria sukcesu WCAG 2.2 są krótkie i konkretne:

• 1.2.2 Napisy rozszerzone (nagranie), poziom A: napisy dla całego nagranego dźwięku w multimediach zsynchronizowanych.
• 1.2.5 Audiodeskrypcja (nagranie), poziom AA: audiodeskrypcja dla nagranych treści wideo.
• 1.4.2 Kontrola odtwarzania dźwięku, poziom A: każdy dźwięk odtwarzany automatycznie dłużej niż 3 sekundy wymaga sposobu na wstrzymanie lub zatrzymanie go albo regulacji głośności niezależnej od głośności systemu.
• 2.2.2 Pauza, zatrzymanie, ukrycie, poziom A: ruchoma treść, która startuje automatycznie, trwa dłużej niż pięć sekund i jest wyświetlana obok innej treści, wymaga sposobu na wstrzymanie, zatrzymanie lub ukrycie.

To ostatnie kryterium łamią pętle w sekcjach hero. Wyciszone wideo w tle z loop i bez kontrolek działa w nieskończoność, więc potrzebuje widocznego przycisku pauzy albo powinno zatrzymać się po kilku sekundach.

#Jak dodać napisy elementem track

Napisy do wideo z własnego serwera to plik WebVTT wskazany elementem <track>. caniuse podaje dla WebVTT 97,26 procent wsparcia, tyle samo co dla samego elementu <video>.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="pl" label="Polski" default>
  <track kind="descriptions" src="descriptions.vtt" srclang="pl" label="Audiodeskrypcja">
</video>

Minimalny plik WebVTT wygląda tak:

WEBVTT

00:00:00.000 --> 00:00:04.000
Witaj w tym filmie.

00:00:04.000 --> 00:00:08.000
[Cicha muzyka w tle]

Rdzenny blok Wideo przechowuje to samo w atrybucie tracks, więc napisy dodane w edytorze trafiają do zapisanych znaczników jako elementy <track>.

#Minimalna lista kontrolna dostępności wideo

1. Napisy rozszerzone: dla osób głuchych i słabosłyszących, jako plik WebVTT w elemencie <track>.
2. Audiodeskrypcja: dla osób niewidomych, opisująca to, co jest tylko widoczne.
3. Obsługa z klawiatury: odtwarzacz musi działać bez myszy.
4. Alternatywa tekstowa: poster lub miniatura potrzebuje sensownego opisu, jeśli niesie informację.
5. Bez autoodtwarzania z dźwiękiem: wideo z dźwiękiem nigdy nie powinno startować samo.

#Jak opóźnić ładowanie wideo z własnego serwera

Obsługa loading="lazy" w rdzeniu WordPressa dotyczy obrazów i ramek iframe, a nie elementu <video>, który tego atrybutu nie obsługuje. Dla wideo z własnego serwera pobieranie opóźnia preload="none" razem z poster. Jeśli potrzebujesz więcej, ładuj źródło z JavaScriptu przez IntersectionObserver, gdy element wchodzi w obszar widoczny, pamiętając o opisanej wyżej uwadze Google dla każdego wideo, które ma być zaindeksowane.

#Jak przekonwertować MOV do MP4 dla WordPressa

1. Montuj i przygotowuj master w After Effects albo Premiere na .mov i ProRes. Ta część nigdy nie była błędem.
2. Eksportuj do sieci jako H.264 w MP4, wymuszając -pix_fmt yuv420p, -movflags +faststart oraz profil i poziom, które potem zadeklarujesz w codecs.
3. Sprawdź eksport: moov na niższym przesunięciu w bajtach niż mdat, a ffprobe pokazuje yuv420p i High,40, nie yuv422p10le.
4. Dodaj kopię WebM w VP9 i umieść ją przed MP4 w elemencie <video>. Dodaj AV1 nad oboma, jeśli walczysz o ostatnie kilkaset kilobajtów.
5. Daj elementowi obraz posteru i preload="none", zostaw muted i playsinline na każdej autoodtwarzanej pętli, a do tego kontrolkę pauzy, jeśli trwa dłużej niż pięć sekund.
6. Zawsze ustawiaj width i height, żeby uniknąć przesunięć układu.
7. Jeśli klip ma dźwięk i ktoś ma usiąść i go obejrzeć, wrzuć go na YouTube albo Vimeo i osadź.

Jeśli to część projektu, który utrzymujemy, raz konfigurujemy krok kodowania w pipeline wdrożeniowym, żeby nikt nie musiał pamiętać o flagach. To element naszych usług programisty WordPress.