HTML5 Video Player with Slides and Transcript

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.

5 thoughts on “HTML5 Video Player with Slides and Transcript

  1. Hey John, how are you?
    I loved the work that you made in this player and slides.
    I would love to buy a full working copy from this player in a standalone version (with no bd) and just some vĂ­deos and slides like example to me use in some another projects.
    Do you can selll this player in this conditions for me? Another question, is possible to not use cue points? Maybe using xml or something else?
    Thank you so much and ill be waiting your reply
    Best Regards
    Cesar

  2. John,
    I would love to be able to buy this from you for courses I run. This is a great tool to help engage students after training. Can you get in touch with me so that we could arrange this.
    brilliant work
    best regards
    Gary Fox

  3. Hello, I am in desperate need of a system like this. I need to create a webcast and found nothing about it ina web. You have to download this code? Thank you.

  4. Hi,
    Great job, We are looking to develop exactly what you have already done. Do you provide the source code with commercials involved if yes please reply to us.
    regards,
    Faraz Ahmed

  5. You can shoot me an email at jdyer [at] dts [dot] edu and we can talk about the player.

Comments are closed.