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

You might want to try something like this:

<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4    with H.264.

More help here html5 video

Answer 2

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).

Answer 3

Different video types support different browsers. You can convert your videos in HTML5 format using some software like DVDVideoSoft Free HTML5 Video Player And Converter or any other. In second video you are using mov video which only playing audio.

Answer 4

Web video is complicated, most browsers support different video formats (codecs). To be compatible with all browsers you need every video in 3 different file formats: MP4, OGG, WEBM.

For maximum compatibility, here’s what your video workflow will look like:

• Make one version that uses WebM (VP8 + Vorbis).
• Make another version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container.
• Make another version that uses Theora video and Vorbis audio in an Ogg container.
• Link to all three video files from a single element, and fall back to a Flash-based video player.

<video width="320" height="240" controls>
    <source src="video.mp4"  type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogv"  type="video/ogg">
</video>

Source: http://diveintohtml5.info/video.html#what-works