Video tags play audio but not video

Question

If you look at my web page you'll see that the top video (medieval guy with red nose) plays perfectly, both video and audio.

But if you look at the bottom (2nd) video, when you play it, there is only audio. The "video image" you see is actually not the video itself, but a png utilizing the "poster" html tag.

Here is the html for both videos:

<video src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v" poster="http://shapeshed.com/examples/HTML5-video-element/images/posters/les.jpg" controls="true" width="320" height="240">
        Your browser doesn't support the video tag. You can <a href="/video/your_video.ogg">download the video here.</a>
</video>

<video src="videos/Play.mov" poster="videos/Play.png" controls="true" width="800" height="600">
        Your browser doesn't support the video tag. You can <a href="videos/Play.mov">download the video here.</a>
</video>

The 2nd video is the one I care about, but I cannot get the video to work in Chrome -- it only plays the audio. But on Mac Safari the video works fine. Am I doing something wrong? It seems I'm implementing my 2nd video exactly the the 1st video. Why does 1 work and 2 doesn't?

EDIT: I got further along, but now in iPad only (Chrome works, iphone works) I get video but no audio. Any ideas?

EDIT #2: I need my 2 videos to play correctly on Apple Safari -- nothing else matters, because all users besides Apple devices will be seeing Youtube-embedded videos. Can anyone tell me exact steps to convert AVI to a video format guaranteed to work in Apple Safari?

Answer 1

Your video is encoded with MPEG-4 Part 2 video and AAC audio. MPEG-4 Part 2 video is not supported by Google Chrome. Unless you manually install additional codecs, the only video codec supported by both Safari and Chrome is H.264 (also known as MPEG-4 Part 10, or MPEG-4 AVC). If you re-encode as H.264 it should be placed in a MP4 container with AAC audio and a .mp4 file extension (not .mov).