I tried to convert GIF to video in a blog post. It did not go well.
The video files were created thusly:
- In mobile Safari, the videos have artifacts (old conversion).
- In mobile Safari, videos won’t load at all, when you visit the direct link (ffmpeg conversion).
- In Chrome, frames are missing (old version).
- In Chrome and desktop Safari, the fallback doesn’t work, when only an unsupported video type is available.
- In Chrome, the MP4 is not shown, and the browser skips to the next format; both files are loaded, though.
- In Chrome, the latter video (
without-foit.webm) is missing the last of the three frames of the GIF.
So for now, the MP4 file is somehow bugged; could be that the offender is
Add to this that the Skeleton CSS framework does not seem to support
<video> tags, which break the layout.
Baaack to images
Since the reason I converted the GIFs in the first place was to save bandwidth, I ended up going with a simple PNG thumbnail linking to the GIFs.
Where the videos were 1/5 the size of the GIFs, the thumbnails were 1/10.
I still need to figure out how the hell you’re supposed to make this work, though.