HTML中能否使用video标签播放扩展名为.h264的视频文件

原生HTML的<video>标签无法直接播放扩展名为.h264的文件。

原因说明 #

.h264属于裸H.264视频编码码流，本身不包含封装容器结构，没有时间轴、音轨同步、元数据等浏览器播放必要的信息。HTML5 <video>标签仅支持携带标准容器的视频格式，常见支持的格式包括封装了H.264视频+AAC音频的MP4、WebM、Ogg等。

你当前示例代码中指定的MIME类型为video/mp4，但对应的src资源是.h264裸码流，并非MP4容器格式，类型不匹配也会导致播放失败。

可行解决方案 #

• 优先选择转封装方案：将.h264裸码流封装为MP4容器格式，不需要重新编码，速度极快。可以用FFmpeg执行如下命令完成转换：

  ffmpeg -i 你的文件.h264 -c copy 输出文件.mp4
  

  转换完成后修改代码里的src属性指向新的MP4文件即可正常播放，调整后示例代码如下：

  <video width="400" controls autoplay>
    <source src="output.mp4" type="video/mp4">
  </video>
  

• 若必须直接播放.h264裸码流，可以引入前端H.264解码库手动解码后渲染到canvas，不过实现复杂度远高于转封装方案。

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