我在 HTML5 video 标签中发现了这个问题，这让我很困惑。如果我在段落标签中嵌入视频标签，它会在某些浏览器中停止正常工作。
任何人都可以对此有所了解吗？
视频标签有点棘手，所以这个问题需要解释一下。为了说明这一点，这里有一个您可以运行的 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 video 标签可以有一个或多个 source 标签，每个标签提供某种格式的视频。浏览器将显示一个它可以处理的视频。为了应对不理解 HTML5 的浏览器，video 标签可以在 source 标签之外包含额外的内容。 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 和以前一样显示黑框，但它也显示按钮。
如果这只发生在一个浏览器上，我会假设这是一个简单的错误。令我困惑的是，Chrome 和 Firefox 中的中断方式相同。
当然，您可能会争辩说用 para 标签包装视频没有任何意义，但在我看来这应该不会造成问题。另外，我想知道还有哪些包装器可能会破坏它。
最佳答案
我认为问题在于 form元素作为 p 的后代无效元素。浏览器尝试尽可能地解释文档，这导致屏幕截图中显示的 DOM，带有 form。元素显示为 p 的兄弟元素，而不是后代。
您可以在 HTML5 规范中遵循这一点。关于 p element 的部分告诉我们它需要“措辞内容”。关于措辞内容的部分准确地告诉我们哪些元素属于该类别。 form不是其中之一。
如果您查看关于 form element 的部分, 它表明 form元素属于“流内容”类别。
您可以使用 W3C 验证器进一步确认这一点。我已将这两个示例页面上传到 Web 服务器(valid 和 invalid)以便您可以看到验证结果:
请注意，在这两种情况下，我都稍微修改了代码，以关闭 input在问题的两个示例中都未闭合的元素。
关于html - 在 <p> 标签中嵌入 <video> 标签会破坏 chrome 和 firefox 中的 <video> 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9553830/