HTML video标签播放不同MP4视频表现异常，是什么原因？

问题根因 #

该问题为浏览器对MP4视频的编码兼容性问题，不存在视频时长、文件大小的最低限制，只要编码规范符合要求即可正常播放。
浏览器原生支持的MP4视频需满足以下编码要求：

• 视频流编码必须为H.264（AVC），仅支持Baseline、Main、High三种Profile，不兼容H.265（HEVC）、MPEG-4 Part 2等其他编码
• 音频流编码必须为AAC或MP3，不兼容PCM、AC3等编码格式

验证方式 #

可通过FFmpeg工具查看异常视频的编码参数：

ffmpeg -i 待检测视频路径

查看输出中视频流、音频流的编码字段，和上述要求做比对即可确认问题。

修复方案 #

使用FFmpeg对不符合规范的视频做转码处理即可，参考命令：

ffmpeg -i 原始视频路径 -vcodec libx264 -acodec aac -crf 23 转码后输出路径.mp4

转码后的视频可直接适配所有主流浏览器的video标签。

可选优化配置 #

如果转码后仍存在缩略图不显示、控件异常的问题，可在video标签中添加preload="metadata"属性，强制浏览器预加载视频元信息即可解决：

<video controls preload="metadata" class="d-block w-100 card-img-top border-top border-left border-right bg-blur-image" style="border-radius:8px 8px 8px 8px !important; width:100%;height:100%;object-fit:contain;">
    <source src="/static/${dir}" type="video/mp4" >
</video>

内容的提问来源于stack exchange，提问作者Thambolo