如何使用视频标签在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>

参考资料：

如何播放H264视频？

播放 .h264 文件网络播放器

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 Web 插件示例：

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

Answer 2

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

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

查看 github 上的

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

Answer 3

您不必在 html 代码中包含 h.264，只需包含视频文件的路径和视频文件名。因此，假设您的视频文件是 .mp4，文件名称是

myvideo.mp4

，您的 

myvideo.mp4

 位于名为 

videos

 的文件夹中，而您的 html 文件位于项目文件夹中的 

videos

 文件夹之外，那么这就是你必须做什么：

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

只要您的视频以 mp4 格式编码，这就会起作用。 h264 是一种编解码器，在这种情况下完全无关。

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

Answer 4

ffddddddddddddddddddddddddddddddddddddddddddddddddddddddddddsssssssssssssssssssssssssssss