Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Apache + HTML5 Video Tag - What could go wrong?

[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.
like image 504
Halsafar Avatar asked Jan 05 '12 05:01

Halsafar


People also ask

Why is my video not working in HTML5?

If your browser error "HTML5 video file not found", it means that your browser is not up to date or website pages does not have a suitable video codec. It would help if you communicated with the developer to solve the issue and install all the required codecs.

Why is my video tag in HTML not working?

There are 3 things to check: make sure your video files are properly encoded for web delivery. make sure the server where the videos are hosted is properly configured for web delivery. make sure your others scripts on the page do not interfere with video playback.

Which video formats is not allowed by HTML?

wmv" video files are not supported by any browser. That is the only way for WMV video files.


1 Answers

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">
like image 88
Ian Devlin Avatar answered Oct 30 '22 13:10

Ian Devlin