OpenCV处理后的MP4视频无法在浏览器播放问题求助

使用OpenCV处理视频后，生成的MP4文件能通过Windows Media Player正常播放，但无法在Edge、Firefox等网页浏览器中打开。原视频可正常在浏览器播放，已通过代码验证处理后视频的有效性和所有帧尺寸一致性。

视频处理代码 #

import cv2
from .inference import inference


def create_video_from_frames(frames, output_path, fps):
    # Get the dimensions of the first frame
    height, width, _ = frames[0].shape

    # Resize all frames to have the same dimensions
    resized_frames = [cv2.resize(frame, (width, height)) for frame in frames]

    # Create a VideoWriter object
    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
    video_writer = cv2.VideoWriter(filename=output_path,
                                   fourcc=fourcc,
                                   fps=fps,
                                   frameSize=(width, height))

    # Write each frame to the video file
    for frame in resized_frames:
        video_writer.write(frame)

    # Release the video writer
    video_writer.release()


def process_video(original_video_path, processed_video_path):
    # Open the video file
    capture = cv2.VideoCapture(original_video_path)
    fps = capture.get(cv2.CAP_PROP_FPS)
    width = int(capture.get(cv2.CAP_PROP_FRAME_WIDTH))
    height = int(capture.get(cv2.CAP_PROP_FRAME_HEIGHT))

    # # Create a VideoWriter object to save the processed video
    # fourcc = cv2.VideoWriter_fourcc(*'mp4v')
    # writer = cv2.VideoWriter(processed_video_path, fourcc, fps, (width, height))

    # Process each frame of the video
    frames = []
    counter = 0
    try:
        while True:
            # Read a frame from the video
            ret, frame = capture.read()

            if not ret:
                break

            # Process Layers
            frame = inference(frame)

            # Write the processed frame to the output video
            # writer.write(frame)

            frames.append(frame)

            print(counter)
            counter += 1
    except:
        pass

    # Release resources
    capture.release()
    # writer.release()

    create_video_from_frames(frames, processed_video_path, fps)

MP4有效性验证代码 #

import cv2


def is_valid_mp4(file_path):
    try:
        cap = cv2.VideoCapture(file_path)
        is_valid = cap.isOpened()
        cap.release()
        return is_valid
    except:
        return False


print(is_valid_mp4('static/tmp/original_video.mp4'))
print(is_valid_mp4('static/tmp/processed_video.mp4'))

返回结果均为True。

帧尺寸一致性验证代码 #

import cv2

# Open the video file
video_path = "static/tmp/processed_video.mp4"
cap = cv2.VideoCapture(video_path)

# Check if the video file was opened successfully
if not cap.isOpened():
    print("Error opening video file")
    exit()

# Iterate through the frames
frame_number = 0
while True:
    # Read the next frame
    ret, frame = cap.read()

    # Check if frame was successfully read
    if not ret:
        break

    # Increment the frame number
    frame_number += 1

    # Try to decode the frame
    try:
        # Convert the frame to grayscale for simplicity
        gray_frame = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
    except cv2.error as e:
        print(f"Corrupt frame at frame number {frame_number}")
        print("Error:", e)

# Release the video capture object and close any open windows
cap.release()
cv2.destroyAllWindows()

未检测到损坏帧，所有帧尺寸一致。

问题原因 #

1. 编码格式兼容性问题：浏览器对MP4的编码规范要求更严格，当前使用的mp4v（MPEG-4 Part 2）属于旧标准，本地播放器具备容错能力，但主流浏览器优先支持H.264（MPEG-4 Part 10，即avc1编码）——这是网页视频的通用标准。
2. 元数据写入问题：OpenCV的VideoWriter在写入视频时，可能未将moov atom（视频元数据块）写入文件开头。浏览器需要这个元数据来流式加载视频，而本地播放器可以从文件末尾读取该信息，因此能正常播放。

解决方案 #

1. 更换为H.264编码 #

修改代码中的fourcc参数为H.264编码格式，将：

fourcc = cv2.VideoWriter_fourcc(*'mp4v')

替换为：

fourcc = cv2.VideoWriter_fourcc(*'avc1')

注意：若OpenCV编译时未包含H.264支持，可能会写入失败，此时可以尝试使用*'H264'，或者重新编译OpenCV并启用H.264支持。

2. 实时写入视频而非批量保存帧 #

恢复process_video函数中注释掉的实时写入逻辑，避免先将所有帧存入内存再批量写入的潜在问题：

def process_video(original_video_path, processed_video_path):
    capture = cv2.VideoCapture(original_video_path)
    fps = capture.get(cv2.CAP_PROP_FPS)
    width = int(capture.get(cv2.CAP_PROP_FRAME_WIDTH))
    height = int(capture.get(cv2.CAP_PROP_FRAME_HEIGHT))

    # 恢复VideoWriter初始化
    fourcc = cv2.VideoWriter_fourcc(*'avc1')
    writer = cv2.VideoWriter(processed_video_path, fourcc, fps, (width, height))

    counter = 0
    try:
        while True:
            ret, frame = capture.read()
            if not ret:
                break

            frame = inference(frame)
            # 实时写入帧
            writer.write(frame)

            print(counter)
            counter += 1
    except Exception as e:
        print(f"处理出错: {e}")
    finally:
        capture.release()
        writer.release()

3. 用工具重新封装视频 #

如果以上方法无效，可以使用ffmpeg重新封装视频，强制转换为浏览器兼容的格式并调整元数据位置：

ffmpeg -i processed_video.mp4 -c:v libx264 -crf 23 -c:a aac -movflags +faststart fixed_video.mp4

其中-movflags +faststart会将moov atom移到文件开头，适配浏览器的流式加载需求。

内容的提问来源于stack exchange，提问作者Muhammad Ikhwan Perwira