Question

我发现HTML5视频标签存在这个问题，让我非常困惑。如果我在段落标记中嵌入视频标记，它会在某些浏览器中停止正常工作。

有人可以对此嗤之以鼻吗？

视频标签有点棘手，所以问题需要一些解释。为了说明这一点，这是一个可以运行的HTML5页面。它使用来自Microsoft网站的方便的.mp4测试视频：

<!DOCTYPE html>
<html>
  <head><title>video with no para</title></head>
  <body>
    <video controls>
    <source src="http://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4"
        type='video/mp4'/>
      These words and the button below should not be visible
      in an HTML5 browser
      <form method='get' action='www.microft.com'>
          <input type='submit' value='MS Home'</form>
    </video>
  </body>
</html>

HTML5视频代码可以包含一个或多个源代码，每个代码都以某种格式提供视频。浏览器将显示一个可以处理的视频。为了应对不了解HTML5的浏览器，视频标记可以包含源标记之外的额外内容。 HTML5浏览器应该忽略这些额外的东西。非HTML5浏览器应该忽略它不理解的任何标签（在这种情况下是视频和源），因此它将忽略视频并仅渲染其他内容。在现实世界中，其他东西通常会提供一些下载和播放视频的方式。在这个例子中，其他东西是一些文本和一个显示按钮的表单。

因此，不同的浏览器会以不同的方式显示此页面。 Chrome和IE的最新版本了解HTML5，他们知道如何呈现.mp4源，因此他们应该呈现视频。他们不应该显示文字或按钮。

最新版本的Firefox处理HTML5但不知道如何播放.mp4。它需要ogg格式的视频。它通过显示视频应该是的黑框来处理这个问题。但是，再一次，它不应该显示文本或按钮。

这些不执行HTML5的浏览器的旧版本应该只显示文本和按钮。

上面显示的HTML按预期工作。如果我在视频部分包围一个para：

，就会出现问题

<!DOCTYPE html>
<html>
  <head><title>video with para</title></head>
  <body>
    <p>
      <video controls>
      <source src="http://ie.microsoft.com/testdrive/graphics/videoformatsupport/big_buck_bunny_trailer_480p_high.mp4"
          type='video/mp4'/>
    These words and the button below should not be visible
    in an HTML5 browser
    <form method='get' action='www.microft.com'>
        <input type='submit' value='MS Home'</form>
      </video>
    </p>
  </body>
</html>

IE版本9正常运行 - 它显示的视频没有文字，没有按钮。

Chrome版本17.0.963.56 m显示视频，忽略文本，但它会显示视频面板下方的按钮。

Firefox 9.0.1像以前一样显示黑匣子，但它也会显示按钮。

如果仅在一个浏览器中发生这种情况，我会认为这是一个简单的错误。让我感到困惑的是，Chrome和Firefox都以同样的方式打破了。

当然，您可能会认为用para标签包装视频毫无意义，但在我看来它不应该导致问题。另外，我想知道其他包装器可能会破坏它。

Firebug shows how the HTML is interpreted

Answer 1

我认为问题是form元素无效作为p元素的后代。浏览器尝试尽可能地解释文档，这导致屏幕截图中显示的DOM，form元素显示为p元素的 sibling ，而不是而不是后代。

您可以在HTML5规范中遵循这一点。关于p element的部分告诉我们它期望“措辞内容”。关于措辞内容的部分告诉我们究竟哪些元素属于该类别。 form不是其中之一。

如果您查看form element上的部分，则会显示form元素属于“流内容”类别。

您可以使用W3C验证器进一步确认。我已将两个示例页面上传到Web服务器（valid和invalid），以便您可以看到验证结果：

请注意，在这两种情况下，我都略微修改了代码，以关闭问题中两个示例中未公开的input元素。

Answer 2

首先：非常格式化的问题！

现在我应该说你让我做了很多研究。

首先，我发现W3学校规范提到<video>标签只能包含纯文本（参见here）。然而，这与另一个reference争论不休。

现在关于您的问题：根据html specification，您无法在<p>标记中使用任何块级html元素。但是，您使用的是一个表单，它是根据此list的块级元素。这意味着您编写了无效的HTML，浏览器可以自由地误解它。

在<p>标记中嵌入<video>标记会破坏chrome和firefox中的<video>标记</video> </p> </video>

2 个答案: