Apache + HTML5 Video Tag - What could go wrong?

6
votes

[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.
2
htmlvideostreamapache2
only thing i can see is a missing HTML-end tag, and the preload controls which does not seem to be in the spec. i.e. preload takes one in three arguments "auto|metadata|none" it seems. – bjarneh
I removed the preload command, no difference. It seems CHROME cannot stream the mp4 directly from the URL/test.mp4. However other browsers can, such as FireFox. So now I feel as if I'm right back to step one, the video tag is the issue. – Halsafar
ok, just copied your setup, and it plays well in all my browsers, with a webm clip that i downloaded from: camendesign.com/code/video_for_everybody/test.html. my apache setup is vanilla, installed through apt-get, never modified the global configuration files, no .htaccess inside public_html and so on. i added controls="controls" to the video tag. – bjarneh
Which browser did you test in? – Halsafar
chromium (and google-chrome), opera and firefox – bjarneh

2 Answers

3
votes

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">
0
votes

Here is my html code from my site www.pi-corp.net. This allows for playback on all commercial browsers with fallback to flash.

<div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' />
        <object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
        data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4
        ","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image"
          title="No video playback capabilities." /> </div> </object></video>