Html5 videos not displaying

Question

I have a couple of videos uploaded to Hostgator (my hosting service), and I'm displaying them on a page with the HTML5 video player. The video is there (I know because I can hear the audio,) but in Chrome all I see is a black screen, and in Firefox it won't play at all, just says "No video with supported format and MIME type found."

The video files are both ones I had to convert from a .mov to a .mp4. But they are all mp4 files.

When I download the videos again from Hostgator, they are normal, so I don't think anything is wrong strictly with the files themselves.

What could be going wrong here? Thank in advance.

Answer 1

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

Answer 2

I suppose the issue is in wrong codec. It should be h.264 for MP4 file. Source with instruction http://www.freemake.com/how_to/how_to_create_and_embed_html5_video