HTML5 Canvas Animation Converted to Video

I was recently playing around with dat.gui and the cool FizzyText animation made me consider the concept of exporting HTML5 Canvas to video. I have previously covered canvas to video conversion but it was specific to making a photo slideshow. Today, I want to create a simple script in JavaScript that will grab any CANVAS element, on any website, retrieve the image frames, and compile them into a video file.
Read more

HTML5 Video Streaming with Blob Urls

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

Convert Images to Video with JavaScript

How do you make a video programmatically? Sending images to a server side program like FFmpeg is one option but how do you make a video from images in HTML5, all on the client side? In the past, I have converted html5 canvas frames into an animated GIF and now I am looking to do something similar but finish with a video file. You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder. It even comes with a demo which shows how CANVAS frames are encoded into a webm video file. So, today, I am going to create an online video creator that lets you upload some images which get converter into a picture slideshow in video format.

Here is the Online Image Slideshow to Video Converter
Read more

Make Animated GIFs from Videos with HTML5

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

Make Screenshots with HTML5 Video

Update:
Below I talk about how FileReader is used to read the user selected video but reading an entire video into memory is a bad idea and will not work with large videos. The updated links skip this step and construct a blob Url right away, and as a result, stream the video so that it can be used right away and you can load large files.

A while ago I have written about making screenshots with YouTube videos but today I want to approach this problem from another angle. The YouTube post mostly talked about the problems of pulling videos from YouTube and saving the video data from CANVAS to an image. Doing that purely on the client side is not easy, but today I want to leverage HTML5 Video, FileReader, Blob Urls, and CANVAS to show how to load local video files (perhaps ones you already downloaded from YouTube with various other solutions), slow down the video playback, and convert those video frames into an actual image so that you can make video screenshots with your browser.
Read more

Sample Files for Development

I have been getting a lot of traffic to my HTML5 sample video files post so I wanted to follow up with a general post that covers a multitude of sample files that are often needed in web development. I often also search for samples when testing and putting together different demos so I think this should be helpful to others. Below I will provide sample files for various image formats, video files, data structures, fonts, and even specific web development files.
Read more

Object Detection with HTML5 getUserMedia

Recently, I have seen a couple different JavaScript face detection demos based on the HTML5 getUserMedia API. I even made my own face detection demo based on the HTML5 video tag. Beyond human faces, we also have face detection for cats in JavaScript, nudity detection, and much more with js-objectdetect, a JavaScript library for real-time object detection.
Read more

Slow Motion in HTML5 video with CANVAS

I was reading an article about HTML5 video controls today and I noticed that they mention changing the video playbackrate attribute to control how fast a movie is playing. This is a great attribute but unfortunately, it is only currently supported by Chrome and Safari. But, messing around with CANVAS recently made me realize that this could easily be done with CANVAS. We are already grabbing each frame of the video so slowing down the drawing loop should give you slow motion.
Read more

Split Video into HTML5 Canvas Tiles with Drag and Drop

Last week, I wrote about making YouTube screenshots and creating video effects with HML5 canvas, and now I want to follow up and show how you can split a video into many draggable CANVAS objects. It is a bit similar to Craftymind’s video blow out demo and Matt Greer’s Movie Puzzle but with two major differences.

First of all, I wanted to keep the code small and simple, and secondly, I am building and drawing into many CANVAS elements instead of using one CANVAS. This is mostly to support the drag and drop functionality, allowing the end user to move the video tiles around the page. Draggable functionality is simply added with the jQuery UI draggable function applied on each CANVAS element. So, how does this all work?
Read more

HTML5 Video into Canvas with Filters

I have seen a lot of cool HTML5 demos lately and wanted to go over a simple example of leveraging the HTML5 Canvas tag to add filters to a video file. In other words, load a video into a video tag, draw each frame into a CANVAS element, loop through some pixel manipulation that changes each frame, and thus make video filters like shifting colors, tinting, or making the video grayscale.

If you are just starting with HTML5, the following links do a great job describing the basics of CANVAS and an overview of HTML5. You could also check out my recent demo of pulling YouTube videos into CANVAS in order to make video screenshots. This time around, I want to do something much more basic, work with a local video file, and do some simple pixel manipulation. So, how do we use the <video> and <canvas> elements together?
Read more