HTML5 Video problems

[76ShovelHead]

Okay, I am having a problem where locally, the video on the site I am making will load. However, when pushed to my school server, and accessed over the internet, the video will not play except in Safari??

Heres what it looks like.

<video controls width="350" autoplay="yes">  
<!-- if Firefox -->  
<source src="media/intro.theora.ovg" type="video/theora.ogv" />  
<!-- if Safari/Chrome--> 
<source src="media/intro.mp4" type="video/mp4" />  
<!-- Fallback -->  
<embed src="media/intro.flv" type="application/x-shockwave-flash" width="350" height="250" allowscriptaccess="always" allowfullscreen="true"></embed>  
</video

And just in case anyone is wondering, yes I have uploaded the videos to the server

It will just display an empty player in Safari/Chrome.

What am I doing wrong?

EDIT:
It wont even load in safari from the server.
It loads across all my browsers except Firefox locally, however.

 

[eddyg]

Consider using a js player like projekktor to make your life easier. Ensure that you have optimized your MP4 to have the metadata at the front of the file, else when viewed over a WAN it will appear to hang since it has the buffer the whole file prior to play.

Use the console on the browser to see what is going on, ensure that it is goin out to get the file.

Also, ensure you encoded the MP4 with settings that will work on all your target devices.

Cheers, Ed.

 

[ppc_michael]

Just to double-check: your media is all in the right place? It's in media/ and not /media/ or something?

Is your server definitely set up to serve the videos with the correct MIME types? I think I had to add video/mp4 to my .htaccess file before.

I had a problem recently where video would play everywhere but in Firefox, and it ended up being that the audio was 48kHz because I forgot to resample to 44.1. Once I fixed that it was fine.

 

[DrewQc]

You have to put in first place the Safari tag, it's a known bug with Safari.

<video controls width="350" autoplay="yes">
<!-- if Safari/Chrome-->
<source src="media/intro.mp4" type="video/mp4" />
<!-- if Firefox -->
<source src="media/intro.theora.ovg" type="video/theora.ogv" />
<!-- Fallback -->
<embed src="media/intro.flv" type="application/x-shockwave-flash" width="350" height="250" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>

 

[WesCole]

You probably have already fixed this, but I noticed this line:

<!-- if Firefox -->
<source src="media/intro.theora.ovg" type="video/theora.ogv" />

The first extension is "ovg" when it should be"ogv". Just thought that might help.

 

[morespce54]

...Is your server definitely set up to serve the videos with the correct MIME types? I think I had to add video/mp4 to my .htaccess file before.
...

You *will* need to have (or add, if it's not already there) the "video/mp4", "video/ogg" (theora) and "video/webm" (vp8) MIMEs in your ".htaccess" file for the server to be able to play it. That is why the videos play fine on your local computer but not on your server. Your server needs to know that such MIME types even exist!

Likely, you won't have access to that file on your school server (unless your a system admin and have a complete access to the whole server, not just the "html" folder).

You best luck is:
a) ask the sys admin if they can add those MIME types to that file (it's no big job but often, sys admins don't want to muck around this file for no "good" reason) or
b) use some other servers that can read those MIME types to store those videos and change the src to that server or
c) use a js player (here, here or here, or any other that fits you) since you already seems to rely on a Flash video fallback...