Can someone check my html5 Webpage. I'm having video issues

by **dweinin** » Wed Oct 13, 2010 3:48 pm

Hi Everyone.

First time poster here. I've been asking this question on Adobe's HTML5 forum but I'm getting no responses. I thought I would try somewhere else and found you all.

I have a website I created in XHTML using Dreamweaver CS4. My client wants to have video on the homepage and have it be viewable on macs, pcs, iphones, ipads and all mobile apps.

Here is the webpage.
www.ftworthfoundation.com/index2.html

Someone suggested I use HTML5 and use the fallback option in it for sourcing video. So I'm trying to do that.

I changed the doctype from the standard XHTML to:

<!DOCTYPE html>
<html>
<head>
<title>Excel Construction Foundation Repair</title>

Which I thought would make browsers read the homepage as HTML5. But converting XHTML to HTML5 is all new to me so any suggestions would be great.

My real dilemma is this-
The homepage loads great in every browser that I own, Safari, IE, Firefox, iPhone3G. But I CANNOT get the videos to load in Firefox. I am stumped. They play final locally but not remotely. This issue is only in Firefox. All video files have been properly formatted and uploaded to the same root file as the homepage.

As 1 suggestion for an answer I found- I read something about changing the htaccess.html file and adding in MIME types. But for some reason goDaddy will not let me alter the htaccess.html file, although I have all rights.

Also, the videos seem to load VERY slowly on my iPhone. Does anyone have any suggestions to help them load faster?

Here is my source code for the video

<div id=Video1>
<video controls width=448 poster="excel_Construction_Commercial.jpg">
<source src="excel_Construction_Commercial.m4v" type="video/m4v">
<source src="excel_Construction_Commercial.mp4" type="video/mp4">
<source src="excel_Construction_Commercial.ogv" type="video/ogg">
<source src="excel_Construction_Commercial.flv" type="video/flv">
</video>
</div>

<div id="VideoPlayer">
<video controls width="448" poster="Foundation_Repair.jpg">
<source src="Foundation_Repair.m4v" type="video/m4v">
<source src="Foundation_Repair.mp4" type="video/mp4">
<source src="Foundation_Repair.ogv" type="video/ogg">
<source src="Foundation_Repair.flv" type="video/flv">
</video>
</div>

I figure that firefox likes the .ogv video but with the fallback I figured if it wasn't able to play the .ogv that it would fallback to the .flv. I can't figure out why the fallback doesn't quite work.

Again, ANY help would be GREATLY appreciated as I'm tired of banging my head against the wall and want to finish this project.

-Drew

by **zcorpan** » Wed Oct 13, 2010 4:39 pm

Your video is served as text/plain. That's why Firefox doesn't play it (and Opera doesn't play it either). You need to add the following to .htaccess (not htaccess.html):

AddType video/ogg .ogv
AddType video/mp4 .m4v .mp4
AddType video/webm .webm

(The right MIME type for ".m4v" is video/mp4.)

I don't know what the right MIME type for .flv is (video/flv is not registered), although filext.com says video/x-flv. However Firefox doesn't support flv anyway so a more useful fallback would be to remove the video element if the last <source> gets an "error" event and replace it with a Flash <object> (which you could have nested inside the video to begin with so <video>-unaware browsers get that).

If goDaddy doesn't let you change your .htaccess then that's really weird, you should email them about it, and if they still don't let you then ask them to fix the default associations for media files. If that also fails then I guess you should go elsewhere.

by **lordofthefunk** » Sat Jan 15, 2011 2:45 am

Thanks for that, I was having the same problem of HTML5 .ogv videos not working remotely with Firefox. I added the mime types you suggested and it worked a treat. However I'm still getting the same problem with Chrome (v8) and Opera (v11) on Mac OS 10.6.6. Do you have any other suggestions?

Many thanks,
Simon

Can someone check my html5 Webpage. I'm having video issues

Can someone check my html5 Webpage. I'm having video issues

Great!

Who is online

Who is online