CODEWITHSUNDEEP
htmlvideostreamapache2
Halsafar
Halsafar

Reputation: 2640

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:

Update2:

Update3:

Update4:

Upvotes: 6

Views: 9449

Answers (2)

user2323896
user2323896

Reputation: 1

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>

Upvotes: 0

Ian Devlin
Ian Devlin

Reputation: 18880

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

Upvotes: 3

Related Questions