FireFox 和 html5 视频 - 带有 x 的灰色框答案

【问题标题】：FireFox and html5 video - grey box with xFireFox 和 html5 视频 - 带有 x 的灰色框
【发布时间】：2011-05-21 03:08:12
【问题描述】：

所以，我只是在重建时尝试在这个客户网站上放置一个简单的 html5 视频播放器。认为这将是一件直截了当的事情，但是当我在 FF 中检查它时，我看到的只是一个带有灰色“x”的暗盒。我正在使用最新的 FireFox 3.6.12。你可以自己看here。

这是我使用的代码 - 我认为它是有效的 html5 - 也许不是？

代码：

<!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.jpg" />
        <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>

* 编辑 2010 年 12 月 6 日 - 下午 3:00 * 在提示视频似乎不在我调查的服务器上之后；视频在服务器上，但只有在浏览器中输入 ftp 时才能访问 - 否则会生成 404 错误。不知道为什么会这样 - 如果有人知道如何解决这个问题，请告诉我！

感谢大家的大力帮助！

【问题讨论】：

问题已通过按照 Matti Virkkunen 的建议配置 IIS 得到解决。

标签： debugging firefox html5-video

【解决方案1】：

似乎在这三个中只有 .mp4 文件存在于服务器上。这是故意的吗？ Firefox 可能不支持 .mp4 文件中使用的编解码器，并尝试回退到您不存在的后备。

编辑：我可以看到您正在使用 IIS 作为您选择的 HTTP 服务器。我暂时避免讨论您选择的软件，但如果文件确实存在于服务器上，这很可能是由 IIS 的具有未知文件扩展名的策略引起的。 IIS 是为了拒绝向客户端发送任何具有未知扩展名的文件。如果扩展名未知，则返回 404 错误。 IIS 对此有一个子代码，它可能会显示在自己的错误页面上，但显然真正的 HTTP 错误代码始终是 404。“找不到文件”的代码是 404.0，而“未知文件扩展名”的代码是 404.3（这是错误代码的complete list）。

您需要使用正确的 MIME 类型将这些文件扩展名添加到您的 IIS 配置中。

【讨论】：

这真的很奇怪。我调查了一下，从 ftp 那里看到了其他视频，但是当您尝试直接访问它们时，它们似乎不存在……这怎么可能。重新上传它们并希望这可以解决问题。感谢您的快速响应！
好吧，在浏览了一下之后，视频已经在服务器上启动了，但是如果我通过将 url 中的 http 更改为 ftp 来登录页面，我只能在浏览器中看到它。
有人知道为什么会这样吗？我在这里不知所措。干杯！
@mattelliottIT：我想我知道出了什么问题，请查看我的编辑。
@Matti：哇！我创建了一个 web.config 文件并解决了这个问题。甚至不是 FireFox 的错——我想我应该向他们道歉：！非常感谢您发现这一点 - 我没想到要检查服务器是否允许文件。

【解决方案2】：

问题已通过按照 Matti Virkkunen 的建议配置 IIS 得到解决。 GoDaddy 托管的 IIS 默认不包括 theora（.ogg、.ogv、.oga）文件扩展名或 .webm 扩展名。这意味着如果您将带有任何这些扩展名的文件放到服务器上，它们将不会被识别，因此（为了保护用户）将不允许用户查看/交互。

解决这个问题的一种方法是创建一个 web.config（也就是一个带有配置扩展名的 xml 文件）来强制服务器接受某些 MIME 类型。然后将其上传到根托管文件夹。请注意不要覆盖现有的 web.config，因为它可能会导致您的站点崩溃。此外，告诉 IIS 允许它已经允许的文件类型（例如 .mp4）也会导致意外错误。在创建/编辑您的 web.config 文件之前，请务必使用 IIS 的默认权限签入。

这就是我的 web.config 文件修复 GoDaddy IIS 问题的样子：

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

【讨论】：

【解决方案3】：

据我所知，FF3.6.x 不支持 HTML5。它确实支持 HTML5 视频标签，但仅适用于特定的编解码器。

这是来自http://support.mozilla.com/en-US/kb/Youtube%20HTML5%20does%20not%20work%20in%20Firefox

Youtube 目前正在测试 HTML5，但并未将 Firefox 列为支持的浏览器。虽然 Firefox 可以显示 HTML5 视频，Youtube 使用对视频进行编码的专利编解码器，使其无法被开源使用 Firefox 等软件。

【讨论】：

所有浏览器都支持“仅用于特定编解码器”的视频元素。仅仅因为 Firefox 不支持您最喜欢的编解码器，就说 Firefox“不支持 HTML5”是不正确的。
@Matti 我说 FF 确实支持 HTML5 视频标签。然而，HTML5 不仅仅包含视频/音频支持，不是吗？而 FF3.6.x 不支持其中的大部分。
啊，一个有效的点。然而，单挑 Firefox 仍然没有意义，因为目前还没有完全支持该标准的东西（见鬼，它甚至还没有完成）。
@Matti：这是真的。我想我不得不为 webkit 和壁虎编写代码的挫败感让我变得更好...... :)
我完全感觉到你。众所周知，我时不时会激怒 FF。

【解决方案4】：

我在自己的视频中使用了您的代码，如果引用的视频文件存在并且格式正确，则一切正常。

【讨论】：