Częsty problem motion designerów i montażystów wideo zaczynających przygodę ze stronami WWW: “Zrobiłem piękną animację w Adobe After Effects, wyrenderowałem do .mov (w najlepszej jakości!), wrzuciłem na WordPressa… i nic. Czarny ekran, błąd, albo plik waży 500 MB i ładuje się godzinę.”

Dlaczego tak się dzieje? Bo internet rządzi się innymi prawami niż postprodukcja filmowa.

Problem z plikiem .MOV

Format .mov (kontener QuickTime) to standard w pracy kreatywnej, szczególnie na Macach. Często używa kodeka ProRes lub nieskompresowanego wideo. To świetne do archiwizacji i dalszej edycji, ale tragiczne dla przeglądarek internetowych.

Brak wsparcia: Nie wszystkie przeglądarki (szczególnie na Windows/Android) natywnie odtwarzają kodeki QuickTime.
Rozmiar: Plik ProRes może ważyć 1 GB za minutę. W internecie celujemy w 5-10 MB.

Standard HTML5: MP4 (H.264) i WebM

Aby wideo działało na 99.9% urządzeń (od iPhone’a po lodówkę z Androidem), musisz użyć standardów webowych.

1. MP4 z kodekiem H.264 (AVC)

To “złoty standard”. Najbezpieczniejszy wybór.

Działa wszędzie.
Dobra jakość przy małym rozmiarze.
Jak to zrobić: W Adobe Media Encoder wybierz format H.264 (nie QuickTime!). Preset “YouTube 1080p Full HD” lub “Match Source - High Bitrate” to dobry start.

2. WebM z kodekiem VP9 (lub AV1)

Otwarty format rozwijany przez Google.

Często 30-50% mniejszy niż MP4 przy tej samej jakości.
Idealny do nowoczesnych przeglądarek (Chrome, Firefox).

Strategia “Video Tag” w HTML5

Najlepszą praktyką (jeśli musisz hostować wideo u siebie, np. jako tło sekcji Hero) jest dostarczenie obu formatów. Przeglądarka wybierze sobie ten, który bardziej lubi.

<video autoplay loop muted playsinline poster="klatka-tytulowa.jpg">
  <source src="animacja.webm" type="video/webm">
  <source src="animacja.mp4" type="video/mp4">
  Twoja przeglądarka nie obsługuje wideo.
</video>

Zwróć uwagę na atrybuty:

muted: Przeglądarki mobilne wymagają wyciszenia, aby pozwolić na autoodtwarzanie.
playsinline: Wymagane na iOS (iPhone), aby wideo nie otwierało się od razu na pełnym ekranie.

A może YouTube / Vimeo?

Jeśli Twoje wideo ma dźwięk, trwa dłużej niż 30 sekund i jest to treść (np. vlog, wywiad), nie wgrywaj go do WordPressa. Użyj YouTube lub Vimeo.

Oszczędzasz transfer serwera.
Platformy te automatycznie dostosowują jakość do łącza użytkownika (streaming adaptacyjny). WordPress tego nie potrafi – będzie próbował pobrać cały duży plik, zacinając przy słabym LTE.

Podsumowanie Workflow

Pracuj w After Effects/Premiere na plikach wysokiej jakości (.mov).
Eksportuj do internetu przez Adobe Media Encoder jako H.264 (.mp4).
Jeśli chcesz być pro: przekonwertuj kopię do WebM (np. darmowym programem HandBrake).
Wgrywając do biblioteki mediów WordPress, upewnij się, że plik ma poniżej 10-20 MB. Jeśli więcej -> YouTube.

'Formaty Wideo w WordPress: MOV, MP4 czy WebM? (Adobe Effects & Web)'