Times are a changin’ and my department knew that we needed something more than the Flash based players we had been using for quite some time. One of the bigger forces that drove us to need an HTML 5 player was the rise in ‘iDevices’, such as the iPhone and iPad by Apple. The charge was given to me to create a player that would work nice with the existing infrastructure and able to deliver media in both video and audio formats.
I chose to use jPlayer, a jQuery plugin. The reasons that I chose it was because it could work with both video and audio, it is skinable, and had hooks that I could use to my advantage. I then wrote a wrapper around jPlayer that added the missing functionality that was necessary for my department, with included keyboard controls, links to transcripts, and captioning. To help keep things consistent, the HTML 5 player uses the same transcripts and captions that the Flash player does.
I first created created a mock-up of the controls bar in Photoshop. The player was inspired by a custom player audio skin at Premium Pixels. I then took the design and ran with it to make it work for our needs. Other than the play and speaker icons, the icons where created for this purpose.
The final results look like the following: