logo标签列表

在Chrome和Firefox中，将<video>标签嵌入<p>标签会破坏<video>标签。

htmlhtml5-video
5

我发现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按预期工作。如果我在视频部分周围包装一个段落，则会出现问题。
<!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显示与之前相同的黑色框，但也显示按钮。
如果只有一个浏览器出现这种情况，我会认为这只是一个简单的bug。令我困惑的是，Chrome和Firefox都以相同的方式中断。
当然，您可以认为将视频包装在段落标记中毫无意义，但我认为这不应该引起问题。另外，我想知道其他包装器可能会破坏它。
Firebug显示HTML的解释方式。
我拍了一个Firebug源代码视图的截图。确实令人惊讶。（注：我的图像上传需要获得批准，因此您可能无法立即或根本看到它）。 - JScoobyCed
你可能会从答案中得出这样的印象，即在期望短语内容（例如<span>）的地方替换任何元素都会导致相同的故障。但事实并非如此，只有<p>元素会表现出这种行为。 - Alohci
2个回答
2
我认为问题在于一个form元素不能作为p元素的后代。浏览器试图尽其所能解释文档，因此导致DOM显示如截图所示，form元素出现在p元素的同级位置，而不是后代。
您可以在HTML5规范中查看这一点。关于p元素的部分告诉我们，它期望“短语内容（phrasing content）”。短语内容的部分告诉我们哪些元素属于该类别。form不是其中之一。
如果您查看form元素的部分，它表明form元素属于“流程内容（flow content）”类别。
您可以通过使用W3C验证器进一步确认此问题。我已经将这两个示例页面上传到Web服务器（有效和无效），以便您查看验证结果： 请注意，在两种情况下，我稍微修改了代码，以关闭在问题中两个示例中未关闭的input元素。
这很可能是事实，而不是作为后代。 - BoltClock
哦，是的。忘记了它是“video”元素的子元素。谢谢。 - James Allardice
1

首先，非常好格式化的问题！

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

首先，我发现W3学校的规范提到<video>标签只能包含纯文本（请参见这里）。然而，在另一个参考中对此进行了争论。

现在关于你的问题：根据HTML 规范，您不能在<p>标签中使用任何块级HTML元素。但是，您正在使用一个表单，根据此列表，它是一个块级元素。这意味着您编写了无效的HTML，浏览器可以自由解释它。

你最好查看WHATWG关于HTML5的文档，因为他们是编写HTML5的人，而不是其他任何人。你的W3C链接甚至都没有接近，因为你链接的是HTML 4.01规范！ - BoltClock
@BoltClock 你说的是哪个链接？是指那个写着“HTML5 <video>标签”的吗？ - Boris Strandjev
你的最后一段链接到HTML 4参考资料。 - BoltClock
是的，但其中没有任何HTML 5特定的内容。两个链接都链接到即使在HTML 5中也是交叉验证的语句。事实是，OP所说的特定问题与视频标签本身无关，也不是HTML 5特定的。 - Boris Strandjev
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接