如何使用视频标签在 html 网页中嵌入 .h264 视频文件

Question

我正在尝试在浏览器中播放 .h264 文件，尝试使用 html 视频标签来完成此操作。结果总是一个空框。

我确实在网上查看了一些链接，他们建议在 .mp4 容器中播放视频。

有人可以帮我完成这个吗？

更新代码：

<video width="560" height="340" preload controls>

  <source src="hh.h264" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <!--<source src="hh.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
 <source src="hh.ogv" type='video/ogg; codecs="theora, vorbis"' />
 <source src="hh.webm" type='video/webm; codecs="vp8, vorbis"' />-->



</video>

参考文献：

How do i play H264 video?

Play .h264 files webplayer

http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html#fbid=6u-u00TH7Je

Answer 1

.h264 文件包含浏览器不直接支持的原始 H.264 流。您可以使用 FFmpeg 之类的工具将其放入容器中，就像推荐的其他答案一样：

ffmpeg -f h264 -i test.h264 -c:v copy test.mp4

编辑：

如果您必须播放原始 H.264 字节流，那么您需要一个浏览器插件。 VLC 网络插件示例：

<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" target="test.h264" />

Answer 2

您不必在 html 代码中包含 h.264，您只需包含视频文件的路径和视频文件名。因此，假设您的视频文件是 .mp4，文件名是 myvideo.mp4，您的 myvideo.mp4 位于名为 videos 的文件夹中，而您的 html 文件就在 myvideo.mp4 之外 videos 项目文件夹中的文件夹然后这是你必须做的：

<video width="560" controls>
  <source src="videos/myvideo.mp4" type="video/mp4">
</video>

只要您的视频编码为 mp4 格式，这就可以了。 h264 是一种编解码器，在这种情况下完全不相关。

您应该首先在网上找到一个 mp4 编码器，有很多免费的编码器，将您的视频编码为 .mp4，然后使用上面的 html 代码，您的视频就可以正常播放了。

Answer 3

我围绕百老汇 h264 编解码器 (emscripten) 编写了一个 HTML5 视频播放器，可以在所有浏览器（桌面、iOS、...）上实时播放（无延迟）h264 视频。

视频流通过websocket发送到客户端，逐帧解码显示在canva中（使用webgl加速）

在 github 查看 https://github.com/131/h264-live-player。

如何使用视频标签在 html 网页中嵌入 .h264 视频文件

How to embed .h264 video file in html webpage using video tags

html

video-streaming

html5-video

h.264

mp4