Question

link to the page I'm trying to get sorted

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

有一个奇怪的错误，我似乎无法在Chrome和Safari中进行整理，在视频下方会出现细黑线。我一直在调查，但没有提出任何问题。

Answer 1

黑线是MP4视频本身。它不在webm和ogg版本中。 Safari和Chrome将播放MP4。

你可以将视频放在一个较小的div中overflow:hidden来裁剪它，但你可能想要修复视频文件。

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

Answer 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>：

<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样式：

Answer 3

解决了!!!我将PAR（像素宽高比）改为“方形像素”，这样就避免了那些黑线;）

如何在safari和谷歌浏览器中阻止出现在html5视频下方的黑线

3 个答案: