html - 奇怪的边框在视频标签上留下黑色

Question

各位，

<video> 上的奇怪边框左 1px(黑色)在 HTML 中:

我不使用任何 CSS border或 outline .如何去除边框留黑？

HTML:

<video id="bgvid" playsinline="" autoplay="" muted="" loop="">
  <source src="https://www.glasseson.lt/wp-content/themes/glasseson/videos/cover.mp4" type="video/mp4">
</video>

网址:https://www.glasseson.lt/en/

Answer 1

The line is in the video itself.

此外，请不要将 26 秒的视频设为 70MB。这太荒谬了，尤其是对于封面视频。比特率对于我的互联网连接来说太高了(它可以很好地播放合理压缩的 1440p 视频 - YouTube、Vimeo 等)并且它会通过屋顶驱动你的带宽。目标是最多 13MB(500KB/秒)，尽管少一点也是个好主意。这是一个相当简单的动画，因此您可以使用 HTML5/JavaScript 重新创建它(尽管噪音可能会造成问题)。

请注意，无论浏览器或操作系统如何，视频都不会在移动设备上自动播放，因此您可能需要寻找替代图形，因为目前它只是一个空白区域。还值得注意的是，网站永远不应该自动播放声音，因为它只是不需要的并且通常被认为是某种罪恶。

最后一件事 - 如果您在导出视频时没有选择一个选项来通过将 moov 原子放在文件的开头来针对网络优化它，请这样做!如果我没记错的话，这消除了几个 HTTP 请求。看起来你还没有这样做，但我不是 100% 确定。如果您在您的软件中找不到这样的选项，您可以使用 ffmpeg 来执行此操作，而无需重新编码您的视频。如果愿意，您可以自行查找安装方法 - 这是命令(如果使用 Windows，请添加 .exe):

ffmpeg -i INPUT.mp4 -movflags faststart -c copy OUTPUT.mp4

希望这个回答对您有所帮助，如果我让您觉得它一直是视频的一部分有点傻，我深表歉意。

如果出于某种原因您无法修复视频中的 1px 线，您可以将视频放入容器中并使用一些魔法来有效地裁剪它，尽管这不是解决此问题的最佳方法。