当前位置：文江博客话题详情

如何阻止 Safari 和 google chrome 中的 html5 视频下方出现黑线

发布于 2025-01-06 04:03:30 字数 256 浏览 1 评论 0原文

链接到我正在尝试排序的页面

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天煞孤星 2025-01-13 04:03:30

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

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

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

In the video originally linked in the question, the black line is in the MP4 video itself. It's not in the webm and ogg versions. Safari and Chrome will play the MP4.

You could put the video inside a smaller div with overflow:hidden to crop it, but you probably want to fix the video file.

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

回复收藏 0 原文

陌上青苔 2025-01-13 04:03:30

你可以使用CSS hack

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

You can use CSS hack

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

回复收藏 0 原文

七月上 2025-01-13 04:03:30

您缺少视频周围锚点链接的结束标记以及 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">

在末尾添加：

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

You are missing the closing tag for the anchor link surrounding your video, and the video tag itself:

<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">

Add </video></a> at the end:

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

Edit:

Also try giving the video tag a border:0 css style:

<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 原文