how to embed an .AVI in html?

Question

I've found some examples of .AVI in html on the web.
But my page http://pianocheater.com/VIDEO.html is problematic.

It's fine with chrome on my pc.
In IE, you get that dang bar at the top and then the videos are blank after that.
It works on my pc, but not others' so I figured it'd be codecs or something??

Here's the existing html... (sorry, note sure how to get pretty html in here)

<object width=288 height=512
  id      ="MediaPlayer"
  type    ="application/x-oleobject"
  standby ="Loading Windows Media Player components..."
  classid ="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
  codebase="http://activex.microsoft.com/activex/controls/mplayer/
            en/nsmp2inf.cab#Version=6,4,7,1112">
  <param name="showControls" value="true">
  <param name="autoStart"    value="false">
  <param name="filename"     value="img/adg.avi">
  <embed width=288 height=512  src="img/adg.avi"
         type="application/x-mplayer2" showControls=1 autoStart=0></embed>
 </object>

I know that .AVI will keep mac people from seeing em.
That's ok. My midi app doesn't have a mac version.
I also know that .AVIs don't stream well.
When I convert to .MOV or .WMV the audio lags terribly.
(And this is a midi app - sound is important.)

Any tips or ideas would be most appreciated :)

Answer 1

This is done a lot easier in flash.

Convert the video to FLV and use the open source JW player to play it. You can convert the video using the open source ffmpeg. (There are a lot of free GUI front-ends to ffmpeg)

Answer 2

Have you tried just using by itself?

<embed src="img/adg.avi"/>

…but you might be better off just using YouTube or something similar.