Video-záznam obrazovky do GIFu

Pro tvorbu návodů nebo ukázek na webových stránkách se kromě prostého textu a obrázků může hodit i něco pohyblivého.

Jelikož vložení videa funkčního napříč prohlížeči není úplně bezproblémové. A u služeb třetích stran, jako je například YouTube, nemáme nad obsahem plnou kontrolu, může být použití GIFu rozumný kompromis.

Jak vytvořit GIF

Osvědčil se mi nástroj ScreenToGif (pro Windows), s kterým je tvorba „video-GIFu“ celkem snadná.

Stránka programu

K disposici po nahrání výřezu obrazovky je možné procházet jednotlivé snímky (počet zaznamenaných snímků závisí na nastavení FPS) a nepotřebné vymazat, přidat vlastní text a podobně.

Program nicméně není úplně spolehlivý a občas padá. Rovněž nepotěší nemožnost zkusit si vyexportovat záznam s různými nastaveními pro optimální poměr kvalita/velikost. Nezbývá než si video natočit znovu.

Vložení na stránku

Pohyblivý obrázek se vloží běžnou značkou <img>:

<img src="video.gif">

Přehrávání

Výsledný pohyblivý obrázek není možné po vložení na web nějak standardně přehrávat, ale existují jisté možnosti.

1. GIF vytvořit s nekonečnou smyčkou. Obrázek/video se tedy bude donekonečna opakovat. U krátké sekvence to většinou nevadí. U delšího videa může být pro uživatele nepohodlné čekat na druhé opakování, když mu uteče začátek.

   Obvykle prohlížeče začínají GIF přehrávat, když se dostane do viewportu.

2. Obrázek „spustit“ na vyžádání. Ve skutečnosti tedy JavaScriptem přidat do stránky obrázek s adresou GIFu, co se má přehrát. Tím se video načte a spustí.

   Pozastavení řešit nejspíš nelze. Opakované přehrávání jde teoreticky simulovat tak, že se GIFu nastaví přehrát pouze jednou a obrázek se přehraje opětovným nastavením téhož src obrázku.

Ukázka přehrání GIFu na požádání

Hezké může být z prvního snímku videa udělat statický obrázek, který se GIFem nahradí až po kliknutí na tlačítko. Na témže principu jde vytvořit i zastavení.

▶ Přehrát ◼ Stop

Samostatná živá ukázka

Pozor na datovou velikost

Při nahrávání velké často se měnící plochy s obrázkem po dlouho dobu a s vysokým počtem snímků za vteřinu snadno vznikne datově obrovský soubor. Nízké desítky vteřin záznamu můžou vytvořit několika-megabytový GIF soubor.

Projekt <x-gif>

Ve Firefoxu a Chrome je možné použít skript.

Web <x-gif>

Ten AJAXem načte GIF, rozseká ho na jednotlivé snímky a ty potom standardní JS animací přehraje. Dá se díky tomu měnit rychlost, volit počet opakování, přehrávat odkonce a podobně.