For Your Reading Pleasure: EasyCaptions

Introducing EasyCaptions: A simple system for adding captions and an interactive transcript to online videos. EasyCaptions uses progressive enhancement to provide the best possible experience for all visitors, regardless of their browser’s JavaScript, HTML5 or Flash support. Demonstration Background I don’t produce much video these days, but as a web surfer I often encounter other people’s videos, and was recently impressed by two video implementations: a TED Talks video page, and an HTML5 video demo produced by Bruce Lawson. The TED Talks page had a great feature I’d never really seen anywhere else: an interactive transcript of the video that …

For Your Reading Pleasure: EasyCaptions Read More »

HTML5 Video, minus Ogg

Mozilla, the makers of Firefox, refuse to support the MP4/H.264 standard because it isn’t open-source and free from licensing constraints. Without Ogg, Firefox’s HTML5 video is rendered useless and requires a Flash-based fallback system. However, Firefox’s handling of the video element breaks the fallback mechanism. A scripted solution is required.

Here’s a simple script that will detect whether HTML 5 video is supported in the browser, and if it is, will check to see if this is Firefox. If yes, it deletes the specified video element but leaves the Flash fallback in its place.

Lazy loading excanvas.js

I started by developing an HTML example page that used the canvas element and had the excanvas.js file hard-coded. Everything worked as planned. I then took out the hard-coded excanvas.js file and replaced it with a JavaScript-based lazy loader. Guess what? It didn’t work. A simple modification to the excanvas.js file fixed the problem.

Image-Free Progress Bar using MooTools and Canvas

As part of my ongoing experiments with <canvas>, I decided to convert an image-based progress bar to an image-free canvas-based system. I just finished whipping up a proof-of-concept; it uses MooTools to generate the canvas and CSS code. No images were harmed in the making of this progress bar. More info later (time permitting)

Modal.js updated

My Modal.js class is still a work-in-progress. Today I made a few updates, most notably to some CSS handling and to the styling of the ‘close’ button (looks much more sophisticated now). Check it out.

Scroll to Top