如何在 safari 和 google chrome 中阻止我的 html5 视频下方出现黑线答案

【问题标题】：how to stop a black line appearing beneath my html5 video in safari and google chrome如何在 safari 和 google chrome 中阻止我的 html5 视频下方出现黑线
【发布时间】：2012-02-15 11:53:52
【问题描述】：

link to the page I'm trying to get sorted

我在这个页面上有一些 html5 视频，我已经设法对其进行了排序，因此我很满意它在大多数浏览器中工作并在不支持 video 标签的浏览器中显示图像。

有一个奇怪的错误，我似乎无法在 chrome 和 safari 中解决，视频下方出现一条细黑线。我一直在研究它，但一无所获。

【问题讨论】：

标签： google-chrome safari html5-video

【解决方案1】：

在问题中最初链接的视频中，黑线是 MP4 视频本身。它不在 webm 和 ogg 版本中。 Safari 和 Chrome 将播放 MP4。

您可以将视频放在一个较小的 div 中并使用 overflow:hidden 进行裁剪，但您可能想要修复视频文件。

div#videocrop {
    height: 493px;
    overflow: hidden
}

【讨论】：

【解决方案2】：

您缺少围绕视频的锚链接的结束标记，以及 video 标记本身：

<a href="http://finefurnituremaker.com/images/gracie/blonde_gracie/David-Savage-Furniture-Gracie-Blonde-LBM.jpg" rel="lightbox[gracie]"><video width="880px" height="495px" autoplay="autoplay" loop="loop" id="video1" onended="this.play()"> <source src="../video/blonde-gracie/BlondeGracieAnimation.mp4" type="video/mp4"> <source src="../video/blonde-gracie/BlondeGracieAnimation.webm" type="video/webm"> <source src="../video/blonde-gracie/BlondeGracieAnimation.ogg" type="video/ogg">

在末尾添加</video></a>：

编辑：

还可以尝试为video 标签添加border:0 css 样式：

【讨论】：

【解决方案3】：

解决了！！！我将我的 PAR（像素纵横比）更改为“方形像素”，这样我就避免了那些黑线；）

【讨论】：