Results for tag: html5
Sometimes you have to parse and search through some really large files and this is where bash tools and scripts work best. A little perl script, grep, awk, or sed can help you quickly read a portion of a file, do a search and replace, etc. Since I often code on a Mac, I have covered some simple OSX command-line one liners that I find helpful. But what about managing huge files in the browser? I noticed that Ace Editor can handle a file of few megabytes without any issues in a browser, and it comes with Regex search. It actually works faster on big files that my SublimeText for some strange reason.
Read more
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
There are a lot of online code editors out there and I have aggregated 30 Code Playgrounds in the past. There are also mini code editors, all kinds of browser editors, and some cool ways to write, save, and preview code with developer tools. Since HTML, CSS, and JS is all processed on the client side it makes sense to bring code editing to the browser. Today, I am going to take a look at two JavaScript libraries that enable online code playgrounds with all kinds of code editing features: CodeMirror and Ace Editor. I am also going to create my own mini code playground with these tools to see which one I like more.
Read more
Here is the HTML5 Online Archive Viewer
A while ago, I blogged about using the Imgur API to upload images via file, directory, or zip archive. Today, I want to dig a little deeper into processing archive files with JavaScript and reading their contents, the files inside the archive, on the client side. I will explore zip and rar archive files and leverage the HTML5 FileReader API and Blob objects to read the files inside the archives. This will allow you to not only see what is inside these archive files but you can actually read and view the data inside, all within a browser.
Read more
Here is an update to the 1000 D3 examples compilation and in addition to many more d3 examples, the list is now sorted alphabetically. Most of the D3 examples in this list come from this excel list but I also added some updates and my examples to push the list over 2K. Examples are really helpful when doing any kind of development so I am hoping that this big list of D3 examples will be a valuable resource. Bookmark and share with others. Here is the huge list of D3 demos:
Read more
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
I was looking at my clipping map tiles example where I clipped some imagery behind a word created with GeoJSON paths and wondered if I could just use a normal font which would clip a photo using css background URL attribute. It would be cool to see how map tiles can be rendered as CANVAS tiles, combined into a single canvas, converted into an image, and then applied in a CSS background attribute to clip imagery behind text. Instead of converting text to GeoJSON paths, I want to make an online tool that does all the magic for me with regular text, CSS, and CANVAS.
Read more
SVG is awesome but sometimes you want to convert it into an image format like a JPG or PNG. If you created some chart or graph with D3.js, you might want to offer the option of saving that graph in an image format. Looking around, I landed on this Save SVG as PNG article and while it provides a good solutions to the problem, I wanted to expand on it and provide some other options. First of all, I want to go through an example where you are creating something in D3 and then want to make this conversion using a button and a JavaScript function. I think you could provide 3 types of image files: an SVG converted to a dataurl and inserted into an image tag (this is still technically SVG), a SVG converted into a PNG using HTML5 CANVAS and inserting that base64 data into an IMG tag, and finally, converting the SVG into a PNG binary data and loading that into a blob url so that you can provide an actual filename inside of an IMG tag.
Read more
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
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
