大家好呀，今天发现了一个细节问题，就是一个mp4视频在网页播放的时候有一个画面左侧有黑边，因为它让整个视频看着不和谐。想到video标签如果设置的width和height不是和视频的宽高比一样，就会导致视频画面显示不全的问题，于是便开始了一番检查。

视频宽高比和CSS样式设置

当设置 HTML <video> 标签的 width 和 height 属性时，如果视频的宽高比与设置的尺寸不一致，可能会导致黑边的出现。例如：

• 视频分辨率: 3840x2160 (宽 x 高)
• 显示宽高比: 16:9

解决方案:

• 使用 object-fit CSS 属性来调整视频显示

 video {
width: 1200px;
height: 675px; /* 保持 16:9 比例 */
object-fit: cover; /* 或 contain */
}

• 通过 aspect-ratio 属性来自动调整高度：

video {
  width: 1200px;
  aspect-ratio: 16 / 9; /* 保持 16:9 比例 */
  height: auto;
}

视频帧的黑边问题

如果在播放视频时某些帧出现黑边，这通常是由于视频内容本身的问题，而不是 HTML 样式的问题。视频帧可能会有黑边，因为视频内容的宽高比与帧的宽高比不一致等。

确认方法:

• 使用播放器或视频编辑软件逐帧查看视频。
• 使用 ffprobe 或 ffmpeg 进行详细检查。

使用 ffmpeg 和 ffprobe 检查视频信息

ffprobe -v error -select_streams v:0 -show_entries stream=width,height,display_aspect_ratio -of default=noprint_wrappers=1 your-video.mp4

ffmpeg -i your-video.mp4 -vf "select=eq(n\,100)" -vsync vfr output_frame.png

帧号 = 帧率 × 时间 = 30 × 10 = 300

ffprobe -v error -select_streams v:0 -show_entries stream=r_frame_rate -of default=noprint_wrappers=1:nokey=1 your-video.mp4