matt hackmann - web developer - artist - nerd

It's that time of week again! Now, last week I made an allusion that there wouldn't be many more new or non-VB projects. Well, this is week defies that in both that this is something pretty recent (this year) and not VB (JavaScript, in this case).

You are certainly well aware of the so-called Music Page. What most people are not aware of is that there has been a video counterpart to it for almost as long, though its development has been far slower. In its original incarnations, the video page was a way for my bros and I to watch shows across the interwebs while I was in college. Now-a-days, it acts as simple front-end for VLC running on my server. But, streaming is certainly in the plans for it yet.

That in mind, I had begun playing around with the webm codec when it was released for this purpose. However, one naggling issue was that a good chunk of my content is in foreign language (I'll let you guess which one) and ffmpeg is not capable of burning on subtitles. I did a little research around, but ultimately decided that I would just write my own subtitle parser on the front end player - i.e. parsing and displaying SRT formatted subtitles with JavaScript using HTML.

This is arguably pretty easy (the basics of the format are very human readable) and I had a working implementation within about a day. The largest hurdle was getting the timing correct and finding a display format for the font that would allow it to be readable without going old school closed captions style and blocking out the video behind (I settled on a soft yellow with a CSS3 drop shadow). There is some rudimentary support for subtitle position animation, but little else. I would love to get some of the fancier animation stuff implemented as there are many anime that script the karaoke portion of the OP/ED to nice effect.

You can check the subtitles test page here: [ JavaScript Subtitles ].

You'll need an HTML5 compliant browser that supports h.264 (Chrome, Safari or IE9 at this point). Also, all the source is in the one file, so just do "view source" in your browser and there it is.

Next week I promise there will be VB goodness!

As I'd briefly touched upon in an earlier post, my place of employ is currently having a little fitness competition: can you walk 10,000 steps a day for 75 days? If you reach the grand and glorious total of 750,000, you are awarded two free days of vacation. Everybody was provided with company branded pedometers to keep track of our steppings and left to our devices.

Now, I'm never one to turn down an opportunity to make money for nothing, so I'm doing my best to make a firm effort and accomplish this goal. If you take a look at the blog main page, you'll see that there is a graph with my current progress on this mission (assuming you're using an HTML5 compliant browser). As you may well notice, I'm a few thousand steps shy of my quota for this week (shame on myself).

Now, that's the boring part. The cool part (and the reason I'm posting) is the really the graph itself. Back in December I switched the site codebase over to HTML5. Now, this was mostly a change in semantics, using new tags such as <article> and <section>. I'd not done anything special with CSS3 or some of the newer, funner tags such as <video> or <audio>. One major thing I'd really not looked too much into was the new <canvas> tag, with the ability to draw images in the browser on the fly.

That all said, I needed some place to test this exciting new functionality, and making the graph was just the place. To update update said graph, all I do is modify a JSON data file with my step information, and HTML5/JS takes care of the rest. Of course, this leaves people using IE in the dust, but this site was never designed for them anyways.

So, there you have it. A fitness contest spurned my thirst for learning. Now, if IE9 could speed along and summarily obliterate the install base of all previous versions before it, life would be a joy of canvasy win!