html video标签mp4格式视频显示不出来的问题

       今天在使用yolov8做视频目标检测时，发现生成的mp4格式文件，通过播放器能正常打开，但是通过video标签显示在界面上的时候，却怎么都显示不出来。通过查找资料，发现。原来是video标签对于mp4格式的文件需要编码方式是h264格式。而我们通过程序生成的视频文件格式为mpeg4格式。如图所示：

解决方案如下：

1、确认哪个文件能正常显示

通过测试发现，相同的文件不同的编码，h264能在video标签正常显示，而mpeg4却不能显示。所以我们最终的解决方案就是编码方式的转换将mpeg4格式转换为h264格式编码

2、转换方式

因为使用的变成语言是python，所以通过python程序将两者转换：代码其实可以通过ai工具生成：

参看代码如下：使用的是opencv：

import cv2
import os
def convert_mp4_to_h264_opencv(input_file, output_file=None):
    """
    使用OpenCV进行视频转换
    """
    if output_file is None:
        name, ext = os.path.splitext(input_file)
        output_file = f"{name}_h264.mp4"
    try:
        # 读取视频
        cap = cv2.VideoCapture(input_file)
        # 获取视频参数
        fps = int(cap.get(cv2.CAP_PROP_FPS))
        width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
        height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
        # 设置H.264编码器
        fourcc = cv2.VideoWriter_fourcc(*'H264')
        # 如果H264不可用，尝试其他编码器
        if fourcc == 0:
            fourcc = cv2.VideoWriter_fourcc(*'X264')
        if fourcc == 0:
            fourcc = cv2.VideoWriter_fourcc(*'avc1')

        out = cv2.VideoWriter(output_file, fourcc, fps, (width, height))

        while True:
            ret, frame = cap.read()
            if not ret:
                break
            out.write(frame)
        cap.release()
        out.release()
        print(f"转换成功！输出文件: {output_file}")
        return True
    except Exception as e:
        print(f"OpenCV转换失败: {e}")

if __name__ == '__main__':
    convert_mp4_to_h264_opencv("1.mp4")

运行结果如下：

转换之后能正常显示

3、总结

        其实很多问题，对于现在的程序员来说，都能够在网上找到很好的解决思路。主要还是设计和思路问题以及解决问题的能力，这才是最关键的个人技能。