Html – Apache + HTML5 Video Tag – What could go wrong

Apache2htmlstreamvideo

[See the updates! – Works on Android/IOS browsers but no where else. FireFox, Chrome, Opera, Safari all fail. Even though they are definitely HTML5 video tag ready]

Simply trying to stream a video using html5 tag. All I get is the video player controls and nothing else. This is so simple I assumed it should just work:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie title</title>
</head>
<body>
<video id="movie" preload controls>
  <source src="test.mp4" />
</video>
</body>

So where could I be going wrong? I've tried a lot more than this small snippet. I've tried other peoples example snippets. I've tried many videos, many formats (mp4, flv, ogg). I've tried viewing it in Chrome, Firefox, Android Embedded browser, Opera, IE9.

I can stream the file from the URL in programs like VLC without any issues.

I am beginning to think Apache2 might be the issue here although I figure the fact I can stream the URL from VLC without issue would suggest Apache2 is not the problem.

Any help appreciated. I'm pulling on hair here.

Update:

  • Whenever I try and access the URL of the video directory from within Chrome it seems to give me this error: Resource interpreted as Other but transferred with MIME type undefined

  • That error is definitely a server side problem, apache2 must not be configured properly somewhere?

  • If I access even a FLV file directory from the URL within my Apache2 server it gives this MIME type undefined error. It the video controls. Whenever I click play it spams the MIME type undefined a few times.

Update2:

  • Verified my .htaccess is being read

  • Added the following to my .htaccess:

    AddType video/ogg .ogv

    AddType video/ogg .ogg

    AddType video/mp4 .mp4

  • Still not working, still see the MIME TYPE UNDEFINED in Chrome.

Update3:

  • Firefox and others can view the URL/test.mp4 without issue but NONE can get the video tag to work properly.

Update4:

  • Android can get the video tag to work now. The .htaccess change seemed to fix that. However not one single desktop browser can for whatever reason.

Best Answer

Firefox and Opera don't support MP4, and Chrome will drop support for it soon. It's a good idea to also add a WebM source.

Try adding the type attribute to the source declaration:

<source src="test.mp4" type="video/mp4">
Related Topic