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:breakout.write(frame)cap.release()out.release()print(f"转换成功！输出文件: {output_file}")return Trueexcept Exception as e:print(f"OpenCV转换失败: {e}")if __name__ == '__main__':convert_mp4_to_h264_opencv("1.mp4")

运行结果如下：

转换之后能正常显示

3、总结

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