Last week, I turned a URL shortening website called bib.ly which is a play on the word “Bible” and the popular URL shortener bit.ly. It has two main functions: A Bible URL shortener and a Bible version popup detector for any website. Continue Reading…
I”ve posted before about HTML5 video and based on what I found I released an HTML5 <video> framework and player called MediaElement.js. But I never got around to explaining the logic behind the new library so here it goes:
The Problems with HTML5 <video>
(1) Codecs
It has been well documented that browsers supporting HTML5 <video> don’t support the same codecs. Here’s the current breakdown of proposed(*) codec support including mobile browsers and plugins.
| <IE9 | IE9 | Firefox | Safari | Chrome | Opera | Andriod | iOS | WP7 | Flash | Silverlight | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| H.264 | - | X | X | X | X | X | X | X | X | ||
| OGG | - | - | X | X | X | ||||||
| WebM | - | X* | X | X | X | X* |
At first glance, the promise of HTML5 <video> seems awesome. Just a simple
<video src="myvideo.mp4" controls></video>
and you’re done right? Not quite. In reality there are all kinds of browser inconsistence that make this impossible. Here’s a run down of the problems:
1. Older browsers don’t support <video>
Only the most recent versions of the big five (Firefox, Chrome, Safari, IE, Opera) support <video>, so you have to have a fallback solution of some kind if you want to use <video> and still support your audience. Continue Reading…
I am updating a tool that allows users to customize a large data table to their needs. It’s sort of like a progressive insurance for seminaries in that it helps students compare information on about 30 US seminaries so they can make an informed decision about where to go.
My initial approach when I built it 4-5 years ago was to embed JSON data in the HTML page and then use JavaScript to convert that JSON data into a table based on the user’s choices.
But there are a few problems with this approach.
- The data is not accessible to screen readers.
- The data is not accessible to those without JavaScript
- Embedding a lot of JSON data in an HTML page isn’t a very good idea. It should be a separate cached .js file, but I can’t do
that since the data often changes and it still wouldn’t address #1 and #2
So I’ve decided in the new version to start with a large <table> and then turn that table into JSON data using the <thead> region as the JSON labels. Then I can take that data and customize it based on the user’s choices. Interestingly the overall data size is a bit smaller since writing a <td> and </td> for each peice of information is actually smaller than writing the header name and quotes over and over.
Here’s the simple table to JSON code. It assumes the first row is has header names and removes spaces and lower cases it.
function tableToJson(table) {
var data = []; // first row needs to be headers var headers = [];
for (var i=0; i<table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
}
// go through cells
for (var i=1; i<table.rows.length; i++) {
var tableRow = table.rows[i]; var rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
} data.push(rowData);
}
return data;
}
Below are links to the two pages for comparison. Please note that the site where the “new” page is is still a work in progress and won’t be launched for a month or two.
A few weeks ago I created an HTML5 version of DTS’s online video player application. A few years ago, when Flash 9 enabled H.264 playback, we switched all of our video from the FLV format to MP4s encoded with the H.264 codec so that our videos could work on as many places as possible, especially Apple’s iPod and iPhone.
I didn’t initially plan to work the the HTML5 <video> tag because of all the browser support and formatting issues, but with the advent of the iPad and IE9′s support for H.264 it makes sense to start using it. I wish that Firefox would support H.264 as well or at least fall back helpfully, but until it does, we will only support Webkit and IE9.
The Player
The player begins in a landscape format with a small video frame and larger slides, but it can also switch to portrait mode and an alternate layout by clicking on the buttons in the lower right. On an iPad, it automatically sense the orientation and rotates accordingly.
Portrait Version
The Code
To code the player, I build a generic MediaPlayer JavaScript object which abstracts out several HTML5 JavaScript APi methods and events. Other than handling HTML5 Media Events, the main thing it does is store and fire Time Cue events much like Flash’s MediaPlayer API (see addASCuePoint). This allows me to add events for syncing the transcript and slides and also handling the UI for controls. On top of the core MediaPlayer object, I built a DtsController which handles choosing a class and building the visual environment for slides and transcript. The timing code looks like this:
player.addCuePoint(‘event-title’, 66); player.addEventListener(‘cuepoint’, function (e) { console.log(‘fired’, e.name, e.time); });
To keep it relatively lightweight, I didn’t use a library like jQuery, but instead used HTML5′s document.querySelector and some custom animation methods to achieve the scrolling and fading effects. I only wish it were as elegant as Thomas Fuch’s emile library.
Try it Out
If you’re interested in the player or the code head to (using a WebKit browser like Safari or Chrome)
http://my.dts.edu/player-html5
Hopefully, the next preview of IE9 will enable the HTML5 <video> tag and let me clean it up for the final version of IE9. Once that happens, we’ll abandon the Flash version of the player and go completely HTML5.
