Link to home
Start Free TrialLog in
Avatar of sffc
sffcFlag for United States of America

asked on

Why is my HTML5 video not playing on my production server in Safari and Opera?

I have the following code:
<video width="640" height="360" controls autoplay>
	<source src="/_media/tcb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
	<source src="/_media/tcb.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

Open in new window

On my local testing server, the video plays correctly in Firefox, Chrome, Safari, and Opera.  However, on my production server, the video plays in Firefox and Chrome, but not in Safari or Opera.

I have read that it is important to specify the correct MIME types in the .htaccess file on the server.  I already have that in place:
AddType video/ogg .ogv
AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType audio/ogg .ogg .oga
AddType audio/x-wav .wav

Open in new window


Safari and Opera don't give me many clues as to why the video isn't loading.  What's my problem?
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Check your headers to see if the server is actually setting the correct content type.  In Firefox you can use the 'LiveHTTP Headers' addon to view the headers that are exchanged.
Avatar of sffc

ASKER

Thanks for the response!  On the video page, Live HTTP Headers says that tcb.ogv is in fact being transferred with "Content-Type: video/ogg".  When I open up the H.264 media file directly, it is also being loaded with "Content-Type: video/mp4".

One reason why my situation seems peculiar to me is the fact that Chrome and Firefox both work, but Chrome uses the MP4, and Firefox uses the OGV.  This means that each of those files are working.  But nonetheless, Safari, which uses the MP4, and Opera, which uses the OGV, still don't work.
SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sffc

ASKER

Are you seeing the same headers on both the test and production servers?
I tested the OGV video on both testing and production.  Here are the headers according to Live HTTP Headers, testing on top and production on bottom:
HTTP/1.1 206 Partial Content
Date: Sun, 26 Dec 2010 01:38:40 GMT
Server: Apache/2.2.15 (Unix) mod_ssl/2.2.15 OpenSSL/0.9.8l DAV/2 PHP/5.3.3
Last-Modified: Mon, 04 Oct 2010 01:53:09 GMT
Etag: "6466bd-1f3a342-491c0ce602b40"
Accept-Ranges: bytes
Content-Length: 32744258
Content-Range: bytes 0-32744257/32744258
Keep-Alive: timeout=5, max=96
Connection: Keep-Alive
Content-Type: video/ogg

HTTP/1.1 206 Partial Content
Date: Sun, 26 Dec 2010 01:39:43 GMT
Server: Apache/2.2.3 (Linux/SUSE)
Last-Modified: Mon, 04 Oct 2010 02:14:18 GMT
Etag: "2d1c8-1f3a342-1a039280"
Accept-Ranges: bytes
Content-Length: 4930
Content-Range: bytes 32739328-32744257/32744258
Keep-Alive: timeout=15, max=63
Connection: Keep-Alive
Content-Type: video/ogg

Open in new window



Do you have the HTML5 doctype in the HTML file so it will recognize the 'video' tag?
Yes.

Do Safari and Opera play the files if you load them directly from the production server?
Safari plays the video; it seems to use the QuickTime plug-in to play the OGV, but it plays the MP4 using an HTML5-style skin.  Opera treats the OGV like a file to be downloaded (it asks you whether to save it, etc), but it plays the MP4 in the browser window using the QuickTime plugin.

If it matters, I'm running Mac OS X 10.6.
Avatar of sffc

ASKER

Okay,I just tried opening up the videos on a different computer, and it works in both Safari and Opera.  It must just be my computer that's screwing up.  Maybe some extensions I have installed?  I dunno.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You would think that the extensions would act the same on both servers.  The 'test' server isn't 'localhost' is it?  If it is then it would be a different security context but I don't know what the difference would be on your Mac.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sffc

ASKER

I'll close the question because it seems that there's no intuitive reason for the problems I was facing.