HTML5 Video Player with Slides and Transcript

April 26, 2010 | HTML/CSS, JavaScript, Video | 7 Comments

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.

7 Responses to “HTML5 Video Player with Slides and Transcript”

  1. Cesar says:

    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. gary fox says:

    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. Chinmay says:

    Hi…
    U have posted very nice example.
    But i need help in simple slide sync with video.

    But i have used your example with some modification.But no success,Can u help me doing some simple slide sync with video.

    U can mail me the example on..
    chinu.mhashelkar@gmail.com

    Please its very urgent

  4. Diego says:

    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.

  5. Faraz Ahmed says:

    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

  6. Hi,

    I love what you made with this player and slides and, like Cesar, 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 for me to use in another projects. Is it possible? I need to do something similar to what you did…

    I used to do something similar in ActionScript, delivered in an off-line DVD-ROM… But now, my client asked me to do it but online. I did this (http://apresentacoes.admedic.pt/) but, it doesn’t work, because Flash is Dead…

    I’ve already did some research and tried to do it on my own but, I’m running out of time and I’m just a webdesigner, not a developer.

    So, I need to develop something like you did, otherwise I will loose my client… Can you help me?

    Thank you,

    Norma Carvalho

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.