OpenCV生成的MPEG 4视频无法在HTML中显示的问题排查

核心问题1：OpenCV代码逻辑错误 #

你当前的代码在循环里每次读取帧都重新初始化VideoWriter，这会导致每次写入帧时都覆盖之前的视频文件，最终生成的视频只有最后一帧数据，浏览器自然无法正常解析播放。

核心问题2：编码兼容性（次要但关键） #

mp4v对应的是MPEG-4 Part 2编码，部分现代浏览器对该编码的支持已经弱化，换成H.264（avc1）编码能更好适配web环境。

修正后的OpenCV代码 #

import cv2

# 读取原视频
video = cv2.VideoCapture("./this.mp4")     
ret, frame = video.read()
if not ret:
    print("无法读取原视频")
    exit()

# 只初始化一次VideoWriter，使用H.264编码
fps, w, h = 30, frame.shape[1], frame.shape[0]
# 使用avc1编码（H.264），更兼容web
fourcc = cv2.VideoWriter_fourcc(*'avc1')
result = cv2.VideoWriter('output.mp4', fourcc, fps, (w, h))

while ret:
    result.write(frame)
    ret, frame = video.read()
    # 按s键提前退出（可选）
    if cv2.waitKey(1) & 0xFF == ord('s'):
        break

# 释放资源
video.release()
result.release()
cv2.destroyAllWindows()

print("视频已成功保存")

额外注意事项 #

• 生成的视频文件名建议和原视频区分开（比如用output.mp4），避免覆盖原文件
• 确保你的OpenCV版本支持avc1编码，如果报错可以尝试h264或检查OpenCV编译时是否包含了对应编码库
• HTML部分无需修改，但要确保src指向正确的生成视频路径

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