Which has very limited support (for example, Firefox doesn't support it.) Without any `pix_fmt` argument, FFMPEG defaults to 4:4:4 instead of typical 4:2:0. Just leave a few notes here if anyone want to use that. This seemingly easy task is actually pretty hard to get right with FFMPEG. Java is a registered trademark of Oracle and/or its affiliates.I just noticed you have one for "Create single-image video with audio". For details, see the Google Developers Site Policies. You should see that the "Use video formats for animated content" audit is nowĮxcept as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. If you prefer a WebM be used first, specify it first! Preview For example, if you specify an MP4 video first and the browser supports WebM, browsers will skip the WebM and use the MPEG-4 instead. Note: Browsers don't speculate about which is optimal, so the order of s matters. Update the with elements that link to your cat-herd videos: One or more child elements pointing to different video files theīrowser can choose from, depending on format support. In the index.html file, replace the line with the with:Ī element using these attributes will play automatically, loopĮndlessly, play no audio, and play inline (that is, not fullscreen), all theīehaviors expected of animated GIFs! □ Specify your sourcesĪll that's left to do is specify your video sources.Luckily, you can recreate these behaviors using the element.
They loop continuously (usually, but it is possible to prevent looping).That's a huge savings! Update HTML to recreate GIF effectĪnimated GIFs have three key traits that videos need to replicate: Notice that the original GIF is 3.7M, whereas the MP4 version is 551K, and the You should have one GIF, and two videos: $ ls -lh Thankfully the element will let youĪdd multiple sources, so if a browser doesn't support WebM, it can fallback toįfmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm WebM videos can be much smaller than MP4 videos, so While MP4 has been around since 1999, WebM is a relative newcomer having been When the command finishes, you should be able to type ls again This tells FFmpeg to take the input, signified by the -i flag, ofĬat-herd.gif and convert it to a video called cat-herd.mp4. In the console, run cd images to enter the images directory.įfmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4.You should get a file path back: /usr/bin/ffmpeg
Click Terminal (note: if the Terminal button does not show you may need to use the Fullscreen option).Click Remix to Edit to make the project editable.It's already installed in the Glitch VM,Īnd, if you want, you can follow these instructions to install it on yourĭouble-check that FFmpeg is installed and working: There are a number of ways you can convert GIFs to video this guide usesįFmpeg. Issue in its "Use video formats for animated content" audit. When you're finished, you should see that Lighthouse has flagged the GIF as an Make sure the Performance checkbox is selected in the Categories list.Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.In this codelab, improve performance by replacing an animated GIF with a Download Chrome if you don't already have it.
X GitHub Glitch Homepage To follow this codelab, open this Glitch in a second tab.