在<p>标记中嵌入<video>标记会破坏chrome和firefox中的<video>标记
我发现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标签包装视频是没有意义的,但在我看来它不会引起问题.另外,我想知道其他包装可能会破坏它.
我认为问题在于form元素作为元素的后代无效p。浏览器尝试尽可能地解释文档，这会导致屏幕截图中显示的 DOM，其中该form元素显示为该元素的同级元素p，而不是后代元素。
您可以在 HTML5 规范中遵循这一点。p有关该元素的部分告诉我们它需要“短语内容”。关于措辞内容的部分准确地告诉我们哪些元素属于该类别。form不是其中之一。
如果您查看该form元素的部分，就会发现该form元素属于“流内容”类别。
您可以使用 W3C 验证器进一步确认这一点。我已将两个示例页面上传到网络服务器（有效和无效），以便您可以看到验证结果：
请注意，在这两种情况下，我都对代码进行了轻微修改，以关闭input问题中两个示例中未关闭的元素。
| 归档时间： |
|
| 查看次数： |
1626 次 |
| 最近记录： |