Potrzebowaliśmy filmu pokazującego, jak działa konfigurator baffli sufitowych w AxisMod. Klasyczna droga to nagranie ekranu, montaż, napisy i przy każdej zmianie w interfejsie wszystko od nowa. Zamiast tego zrobiliśmy to, co robimy z każdą powtarzalną robotą: napisaliśmy skrypt.
Założenia
- Film ma być krótki (poniżej minuty), z calloutami tłumaczącymi, co się dzieje, i z widocznym kursorem.
- Dwie wersje językowe, PL i EN, z tego samego skryptu.
- Plik na tyle mały, żeby dało się go wrzucić na stronę bez CDN wideo: docelowo poniżej 3 MB.
- Nagranie powtarzalne po każdej zmianie w UI jednym poleceniem.
Playwright jako kamera
Playwright ma wbudowane nagrywanie wideo z kontekstu przeglądarki. Ustawiamy viewport 1600×900, włączamy recordVideo i od tej pory wszystko, co dzieje się na stronie, ląduje w pliku WebM.
Sam skrypt to osiem kroków: otwarcie konfiguratora, wpisanie wymiarów pomieszczenia, wybór profilu baffla, zmiana rozstawu, podgląd 3D, przekrój, podsumowanie z BOM i listą cięć, lista plików wyjściowych. Na końcu end card z logo.
Dwie rzeczy, których Playwright nie daje z pudełka, trzeba wstrzyknąć samemu:
- Callouty. Krótkie etykiety w rogu modala, wstrzykiwane jako element DOM do
[role=dialog] > divz małym opóźnieniem, żeby zdążyły się pojawić przed akcją, którą opisują. - Sztuczny kursor. Headless nie rysuje kursora, więc dodajemy własny: okrągły element pozycjonowany absolutnie, animowany do współrzędnych kolejnego kliknięcia. Bez tego widz nie wie, gdzie patrzeć.
ffmpeg jako montażysta
Surowe nagranie ma około 86 sekund, bo skrypt czeka na loader 3D i na animacje. Pipeline w ffmpeg:
- przyspieszenie
setpts=PTS/1.7, z 86 s robi się około 51 s, a klikanie wygląda naturalnie, nie nerwowo, - kodowanie libx264 z
crf 25, wynik około 2,6 MB przy 1600×900, - poster do tagu
<video>wyciągnięty z 17. sekundy, gdzie widać już scenę 3D.
Dwa języki to dwa uruchomienia tego samego skryptu z innym locale. Zero ręcznej roboty między nimi.
Odtwarzacz na stronie
Wideo gra samo dopiero, gdy co najmniej 35 % ramki jest w widoku (IntersectionObserver), i pauzuje, gdy scrollujesz dalej. Przy włączonym prefers-reduced-motion pokazujemy poster z natywnymi kontrolkami zamiast autoplayu. Przycisk „Uruchom konfigurator” wylądował pod ramką wideo, bo na jasnych scenach ginął na tle.
Gotcha
Podczas nagrywania nie wolno edytować plików strony ani słowników i18n. Hot reload resetuje stan modala w połowie skryptu i nagranie sypie się w losowym miejscu. Zmiany w CSS są bezpieczne, bo nie przeładowują komponentu.
Kiedy to ma sens
Ten sposób opłaca się, gdy interfejs zmienia się częściej niż raz na kwartał albo gdy trzeba utrzymać kilka wersji językowych. Jednorazowy film do prezentacji szybciej nagrasz ręcznie. Ale jeśli po każdej zmianie UI film ma być aktualny tego samego dnia, skrypt wygrywa po drugim uruchomieniu.
Zobacz efekt na stronie AxisMod.
