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

Question

各位，

在 HTML 中的 <video> 上左 1px（黑色）的奇怪边框：

我不使用任何 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>

URL: https://www.glasseson.lt/en/

Answer 1

The line is in the video itself.

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

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

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

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

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

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

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

Strange border left black on video tag

html

css

video

border