I have been using FlowPlayer for delivering web video in FLV for the last couple of years. And lately, I have switched from flv to mp4/H.264 videos. As there is the demand for supporting iPad, I started looking at libraries such as MediaElement.js and VideoJS for their support for HTML5 video.

And in the past two weeks, I have had a chance to actually use them.

I started with MediaElement.js, and I decided to try something else mainly for one reason – that the page did not display very nicely. Another minor thing that I didn’t like about it was that the mark-up is very clunky. What I liked about it was the fact that if the browser neither supports Flash or HTML5 video, it could simply display a link to the video for the user to download and try to play it locally using some player.

Next, I tried using VideoJS, and got it almost working – except that there were still some problems:

  • video element initially appears on the left, and then gets moved to the center later – an annoyance;
  • video sometimes on first attempt (with un-primed cache) plays shrunk to the top-left corner of the video div, or only plays half of it; and this appears to happen on computers that have Google Toolbar installed;
  • video does not play on first attempt, and leaving just a white rectangle where the video should be;

And because of these unsolved problems, I looked back at the FlowPlayer that I have used for many years without those annoying problems. And yes, it would support iPad with a plugin. And, based on its claim, it already supports iPad even without the iPad plugin; and that the iPad plugin only made it a lot better. I used the standalone demo page as a start point, and created my own video delivery page, and all worked. And yes, I tested it on iPad and it worked like a charm.

So I am back to using FlowPlayer, plus the ipad plugin and the mp4/H.264 video format. I also developed a way to detect the end user’s bandwidth and deliver the video of a proper bit-rate accordingly.

  • Digg
  • del.icio.us
  • StumbleUpon
  • Sphinn
  • Facebook
  • Mixx
  • Google Bookmarks
  • Haohao
  • LinkedIn
  • Live
  • MyShare
  • MySpace
  • Reddit
  • Technorati
  • TwitThis

Related posts:

  1. Video Formats for the Web – F4V, MOV, or MP4?
  2. Turning a DVD into a Web-based Video Resource
  3. Update: Turning a DVD into Short Video Clips
  4. Update: Turning a DVD into a Web-based Course
  5. Update: Turning a DVD into a Web-based Course

Tags: , , , , , ,

One Response to “Web Video for Flash-enabled Browsers and Ipad – from MediaElement.js, and videojs back to FlowPlayer”

  1. William Lin says:

    Hi Peng,

    I am working on a cloud video solution for ASCO.org. It needs to support iOS / PC / MAC / Android with bandwidth detection.
    I see from your post, you have something that can really help us.
    Can you please show me some sample codes and how you handle bandwidth detection?

    Thank you very much for your time.
    William.

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">