如何阻止在Safari和Google Chrome中出现在我的HTML5视频下方的黑线

0pizxfdo 于 2023-04-03 发布在 Go

关注(0)|答案(4)|浏览(351)

link to the page I'm trying to get sorted
我在这个页面上有一些html5视频，我已经设法把它排序，所以我很高兴它在大多数浏览器中工作，并在那些不支持视频标签的浏览器中显示图像。
在chrome和safari中有一个奇怪的错误，我似乎无法解决，视频下面出现了一条细黑线。我一直在研究它，但没有找到任何东西。

google-chrome

来源：https://stackoverflow.com/questions/9292863/how-to-stop-a-black-line-appearing-beneath-my-html5-video-in-safari-and-google-c

4条答案

按热度按时间

agxfikkp1#

在问题中最初链接的视频中，黑线在MP4视频本身中。它不在webm和ogg版本中。Safari和Chrome将播放MP4。
你可以用overflow:hidden把视频放在一个更小的div中来裁剪它，但是你可能想修复视频文件。

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

赞(0）回复(0）举报 2023-04-03

s4chpxco2#

您缺少视频周围锚链接的结束标签，以及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样式：
<a href="http://finefurnituremaker.com/images/gracie/blonde_gracie/David-Savage-Furniture-Gracie-Blonde-LBM.jpg" rel="lightbox[gracie]"><video style="border:0;" 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>

赞(0）回复(0）举报 2023-04-03

ioekq8ef3#

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

赞(0）回复(0）举报 2023-04-03

5us2dqdw4#

可以使用CSS hack

outline: 4px solid white;
outline-offset: -4px;

赞(0）回复(0）举报 2023-04-03

我来回答

如何阻止在Safari和Google Chrome中出现在我的HTML5视频下方的黑线

4条答案

可以使用CSS hack

相关问题

热门标签

最新问答