Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Results for tag: gif

HTML5 Video Streaming with Blob Urls

HTML5 Video Streaming

I have written a few demos on using the HTML5 video tag, showing how you can make screenshots from movies or create animated GIFs, but last night I noticed some major issues with loading a large local video file. It basically crashed my Chrome tab and after looking at my code again, this makes sense. When the user dropped or selected a local video file, I read that entire file using the FileReader API and then created a Blob URL out of it so that it can be used in the HTML5 video tag. But, reading the entire file is not necessary as both the video and audio tag support a file stream.
Read more

Make Animated GIFs from Videos with HTML5

Make animated GIF from HTML5 video

HTML5 Animated GIF Creator

Last time, I showed how to make screenshots of videos with HTML5 and now I will take that concept further by showing how to make animated GIFs from videos. You could send video frames to the server and use something like FFmpeg or ImageMagick to create the animated GIF but since I have recently stumbled upon this port of as3gif GIFPlayer to JS, I wanted to make this work completely on the client side. I will try to improve some processing with Web Workers but this will still be very CPU intensive.
Read more