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

Posted

技术标签:

【中文标题】FireFox 和 html5 视频 - 带有 x 的灰色框【英文标题】:FireFox and html5 video - grey box with 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   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 得到解决。 【参考方案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】:

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

【讨论】:

以上是关于FireFox 和 html5 视频 - 带有 x 的灰色框的主要内容,如果未能解决你的问题,请参考以下文章

带有 HTML5 视频 (javascript/jQuery) 的 Firefox/Gecko 全屏 API

带有video.js的HTML5视频无法在Safari中使用

无法在 Firefox 中静音 HTML5 视频标签

HTML5 video视频字幕的使用和制作

带有自定义按钮的 HTML5 视频播放器无法在全屏模式下工作

Firefox 特定的 html5 视频错误