Dallas Seminary has been doing video-based online education for about 5 years now. One of the initial goals was to replicate the classroom teaching experience as much as possible by including the video and the professor's illustrations (Powerpoint, Keynote, etc.). Beyond that, we also wanted to enhance the experience by adding things like a transcript and editing down the video to the most important segments.

Our initial player was created by Yahoo!'s Broadcast.com division and it used HTML frames and Windows media. This limited us to Internet Explorer, but there was no other option at the time. Then Flash 7 came out with video support and I custom built the player below. Since then, video on the web has come a long way, and the introduction of H.264 support means that we only need one format for playing on the web and on the desktop.

Here is the original design using 320x240 video and 480x360 slides:

Here are some changes we wanted to make:

• Move from Flash 8 to 9 - use AS3 and enable fullscreen support
• Use H.264 video - to simplify our workflow
• Increase the video size, quality, and availability
• Some users found the auto-scrolling transcript distracting and we need another option for them
• Many classes don't have slides, so we need to de-emphasize those, yet also provide a good slide navigation system.
• More narrow player - the current design is about 850px which makes it hard to have many more windows open at the same time.

Here are wireframe mockups of various design proposals

• First player (2003) using Yahoo!'s Broadcast.com using HTML/Frames/WMV
  Obviously, WMV is limited to really working in IE, and we were stuck with Yahoo!'s platform.
  
  
  
• Flash player with 320x240 video
  This player is wider since the slides are bigger, but the transcript is more narrow column which makes it easier to read.
   
  
  

New Designs

• Swapped video and slides sizes, controls at the bottom
  This swaps the video and slide sizes. It's nice, but the transcript is far away and the slides are hard to read. The player is also still very wide.
  
  
• Larger video size, small slides on the side
  To make the video even bigger, the transcript is now a single line like closed captioning on TV. Rather than give the slides their own dedicated space, the slides have a tray on the right and the full size slide appears over the video for a few seconds. The width is slightly smaller, but not much.
  
   
• Coverflow Style Player
  To make the player more narrow (for multi-tasking), we move the slides to the bottom and use the Apple CoverFlow to show a lot of them at once. This makes the player more narrow which is good, but also taller. To shorten it, we've moved all the controls on top of the video that appears/diasppears on mouse hover.
  
   
  
  Here is a screenshot of a fairly common desktop size (1680x1050) with MS Word and a preview version of this player open. (note: I've made sure the controls are visible for the screenshot, but they are hidden normally) 
  
  

This seems effective, but there is a possible drawback in that the Coverflow might be somewhat distracting to some students (it can be turned off). Also, some may prefer the older style transcript with more than one line visible at once.

Links to preview the players:

• Old Player: http://my.dts.edu/player/
• Coverflow: http://my.dts.edu/player2/

Another future goal is to build the player as an AIR application so that videos can be downloaded for offline use.

This week, we added a feature to our online education player that creates small thumbnails of upcoming slides (see sample class video).

To do this, I used a new feature in Flash 8 that allows copying a MovieClip as a bitmap in three simple lines:

The only problem is that if a SWFon domainA tries to copy a MovieClip loaded from domainB (source_mc) and source_mc has any content from another domain (domainB), BitmapData won't work. The online education player loads the slide images from different domain (domainB) than that which hosts the player (domainA), so initally the BitmapData code didn't work. If we were loading SWF files from domainB, we could add the following code to the domainA fla/swf:

But this doesn't work for JPGs, PNGs, etc. since you can't add this code to an image file. Macromedia suggested putting all the images inside SWFs, but that would not be feasible since we have 1000s of slides. Based on some code and a few emails from Frédéric v. Bochmann, we were able to get around this by creating a wrapper flash file that loads the images I wanted and then returns a BitmapData.

Instead of domainA.swf doing:

domainA now does this:

Then in domainB/loader.swf, the code looks like:

This is a simplified example, so you should add some code to check for the loaded state of the image01.jpg file (Frédéric v. Bochmann does this in his example). Also, when passing the filename=image01.jpg, you must use a fully qualified domain name (such as domainB/image01.jpg), or else the domainB.swf will try to load the file from domainA and Flash will throw error about cross-domain loading.

Try it out

I'm working on a project that uses Windows Media Player and Firefox is not playing along. We are creating a video player skin that has two IFRAMEs. WMP issue script commands at set times which load content in the IFRAMEs. This works pefectly in IE and Firefox in WMP 6, but in WMP 10, Firefox doesn't load the content into the frames. It just launches new windows everywhere.

Apparently it's a Gecko bug that no one wants to fix. I've asked about it in MS's WMP usenet group, but no one could produce any workaround code. There's a bunch of legacy/non-standard stuff that kind of works in NS 7.1 (here and here), but it's useless in Firefox.

If anyone knows how to fix this, I'd love to hear about it.