FireFox and html5 video - grey box with x_问答_开发者

So, I'm just trying to put a simple html5 video player on this clients website while I do the rebuild. Thought it would have been a straight forward thing to do but when I checked it in FF all I see is a dark box with a grey "x" in it. I am using the latest FireFox 3.6.12. You can see for yourselves here.

This is the code Im using - I thought it was valid html5 - maybe not?

CODE :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="reel2.css" type="text/css" media="screen" />
<title>Christopher Stewart - Theatrical and Commercial Reels</title>
</head>

<body>

<div class="main">

    <div class="header">

      <div class="back">
        <img src="http://thechristopherstewart.com/REEL_files/ChrisStewart_Website.j开发者_高级运维pg" />
        <span class="backbtn">&mdash;&mdash;<a href="Home.html" target="_self">back</a></span>
      </div>

        <span class="page_title">Christopher Stewart: Video Reel</span>

        <div class="theatrical">
         <span class="title">Theatrical Reel</span><br><br>
   <video width="640" height="480" preload controls> 
    <source src="reelvids/120610-reel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="reelvids/120610-reel.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="reelvids/120610-reel.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
   </video>
        </div>
    </div>

</div>
</body>
</html>

* EDIT 12/6/10 - 3:00pm * After following a a tip that the video did not seem to be on the server I investigated; the video is on the server but is only accessible if ftp is entered into the browser - otherwise a 404 error is generated. Not sure why this is happening - if anyone out there knows how to fix this please let me know!

Thanks for all the great help!

It seems that out of those three only the .mp4 file exists on the server. Is that on purpose? Firefox probably doesn't support the codec used in the .mp4 file, and tries to fall back to your fallbacks which don't exist.

Edit: I can see that you're using IIS as your HTTP server of choice. I'll avoid going into your choice of software for now, but if the files actually exist on the server, this is likely caused by IIS's policy with unknown file extensions. IIS is made so that it refuses to send any files with unknown extensions to the client. If the extension is unknown, it returns a 404 error. IIS has a subcode of sorts for this, which it may show on its own error pages, but obviously the true HTTP error code is always 404. The code for "file not found" is 404.0, while the code for "unknown file extension" is 404.3 (here's a complete list of error codes).

You need to add those file extensions into your IIS configuration with the correct MIME types.

The problem was fixed by configuring the IIS as Matti Virkkunen suggested. The IIS for GoDaddy's hosting does not include the theora (.ogg, .ogv, .oga) file extensions or the .webm extension by default. This means that if you put a file with any of these extensions onto the server they won't be recognized and thus (in an effort to protect the user) will not be allowed to be viewed/interacted with by the user.

One way to solve this is to create a web.config (aka an xml file with a config extension on it) to force the server to accept certain MIME types. Then upload it onto the root hosting folder. Be careful you do not overwrite an existing web.config as it could cause your site to crash. Also, telling the IIS to allow a file type that it already allows (.mp4 for instance) will also cause unexpected errors. Before creating/editing your web.config file be sure to check in with the IIS's default permissions.

This is what my web.config file looks like to fix the GoDaddy IIS problem :

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
            <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
            <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
            <mimeMap fileExtension=".webm" mimeType="video/webm"/>
        </staticContent>
    </system.webServer>
</configuration>

As far as I know FF3.6.x does not have HTML5 support. It does support HTML5 video tag, but only for specific codecs.

This is from http://support.mozilla.com/en-US/kb/Youtube%20HTML5%20does%20not%20work%20in%20Firefox

Youtube is currently testing HTML5, but does not list Firefox as a supported browser. While Firefox can display HTML5 video, Youtube uses a patented codec to encode the videos, making it unusable by open-source software like Firefox.

I used your code with my own videos, and if the referenced video files exist and are of the proper format, everything works.