1

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.

Joie
  • 141
  • 1
  • 12
  • The server must be configured to provide correct mime-type in the response header for the files. Check with your provider how you can do this. –  Jun 12 '15 at 03:09
  • I was able to add the video/mp4 MIME to the .mp4 extension, but it still doesn't work. I went over to w3schools (because they have a preview page where you can edit there code) with a video using an mp4 in an HTML5 player and replaced their video link with mine. I got the same results there; audio and no video. This makes me think it might not just be a problem with the MIME? – Joie Jun 12 '15 at 04:51
  • Since you are using a MP4 container, make sure you are using H.264 video with 4:2:0 color subsampling and 8 bits per sample. – mark4o Jun 12 '15 at 08:17
  • How can I tell and how can I change it if its wrong? – Joie Jun 12 '15 at 20:40

2 Answers2

0

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

David Wolf
  • 1,400
  • 1
  • 9
  • 18
Mike
  • 164
  • 3
  • 11
0

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

Terry Smith
  • 26
  • 3