如何实现.h264格式视频在Web应用中的跨浏览器兼容播放？

嘿，我来帮你搞定这个跨浏览器播放H.264视频的难题！你之前用的VLC ActiveX插件确实只支持IE，现在主流浏览器早就不支持这类NPAPI/ActiveX插件了，所以得换更现代的方案。

最推荐的方案：转封装为MP4格式 #

首先要明确：.h264是裸视频流文件（只有视频编码数据，没有封装容器），而Chrome、Firefox、IE11+这些现代浏览器的HTML5 <video>标签只支持带容器的视频格式（比如MP4、WebM）。幸运的是，H.264编码本身是所有主流浏览器都支持的，你只需要把裸流封装到MP4容器里就行，不需要重新编码，速度很快。

步骤1：转封装文件 #

用FFmpeg工具（免费开源）执行以下命令，直接把裸H.264流封装成MP4：

ffmpeg -i globalwarming.h264 -c:v copy globalwarming.mp4

-c:v copy表示直接复制视频流，不重新编码，几秒钟就能完成。

步骤2：用HTML5 Video标签实现跨浏览器播放 #

替换你原来的<object>代码，用标准的HTML5视频标签，这样所有现代浏览器都能支持：

<video width="1000" height="1000" controls>
  <source src="globalwarming.mp4" type="video/mp4">
  <!-- 针对极旧版本IE的fallback（可选，现在基本没人用了） -->
  <object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="1000" height="1000">
    <param name="url" value="globalwarming.mp4">
    <param name="autoplay" value="false">
    <param name="showcontrols" value="true">
  </object>
</video>

• controls属性会显示播放控件，方便用户操作
• <source>标签指定MP4文件和MIME类型，浏览器会自动识别
• 最后的<object>是给IE8及以下版本的 fallback，如果你不需要支持这么旧的浏览器，可以删掉。

如果你不想转封装：用JavaScript库解码裸H.264流 #

如果因为某些原因不能转封装文件，可以用mpeg.js这个开源库，它能在浏览器中直接解码裸H.264流，并渲染到<canvas>上。

实现示例： #

<canvas id="videoCanvas" width="1000" height="1000"></canvas>

<script src="mpeg.js"></script>
<script>
  const canvas = document.getElementById('videoCanvas');
  const ctx = canvas.getContext('2d');
  
  const player = mpegjs.createPlayer({
    type: 'h264',
    url: 'globalwarming.h264'
  });
  
  player.onPictureDecoded = (picture) => {
    ctx.putImageData(picture, 0, 0);
  };
  
  player.load();
  player.play();
</script>

注意：这种方案的性能比原生HTML5 Video差一些，而且需要加载额外的库，所以优先推荐转封装MP4的方案。

为什么原来的VLC插件不行？ #

你之前用的VLC ActiveX插件是IE专属的，Chrome和Firefox早就移除了对NPAPI/ActiveX插件的支持，所以根本无法加载，这也是为什么跨浏览器兼容失败的原因。

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