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">——<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中使用