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

Posted 2023-05-08

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

【英文标题】：How to embed .h264 video file in html webpage using video tags

【发布时间】：2015-06-11 20:04:56

【问题描述】：

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

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

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

更新代码：

<video   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

【问题讨论】：

到目前为止你尝试过什么代码？

我刚刚更新了代码。为了兼容性，我还尝试了一些 javascript。

您介意提供 hh 的网址吗？

是的，这是网址s3.amazonaws.com/201501bk/20150115122429.h264 谢谢

我以为您有一个使用视频编码格式（编解码器）H264 的文件，但我没有意识到您正在处理具有 .h264 文件扩展名的文件。问题是 .h264 不是视频的有效扩展名，H264 是视频编解码器。它永远不会这样玩。在此处查看所有有效的视频文件扩展名：en.wikipedia.org/wiki/Video_file_format

【参考方案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" />

【讨论】：

afaik，VLC 插件不再适用于现代浏览器，是吗？

@PypeBros 它使用几乎已被淘汰的 NPAPI，所以是的，吉姆已经死了。并不是说一开始就依赖网络插件是个好主意。

【参考方案2】：

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

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

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

【讨论】：

根据我的经验，Broadway 在 Internet Explorer 中的表现不佳。甚至 IE11。

不幸的是，百老汇只能使用 h.264 基线配置文件。

【参考方案3】：

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

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

如果您的视频以 mp4 格式编码，这将起作用。 h264 是一种编解码器，在这种情况下完全不相关。

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

【讨论】：

我正在尝试以某种方式在浏览器中播放 src 文件，以便它可以在 android 浏览器中播放。不需要提及 type="video/h264" 吗？我尝试使用上面代码中提到的 mp4。但没有运气。

@Ramaraju.d 这是我之前的评论：我以为您有一个使用视频编码格式（编解码器）H264 的文件，但我没有意识到您正在处理一个带有 . h264 文件扩展名。问题是 .h264 不是视频的有效扩展名，H264 是视频编解码器。它永远不会这样玩。在此处查看所有有效的视频文件扩展名：en.wikipedia.org/wiki/Video_file_format

@Ramaraju.d 我的回答是基于您实际拥有视频文件并且能够将其转换为 mp4 文件的假设。但是，.h264 文件扩展名无效。那个文件，它的样子，不会在任何地方播放。

哦，你现在明白了。非常感谢您的清晰解释:-)

@JoeR 你错了 .h264 不能在任何地方播放。如果原始 .h264 视频流是字节流格式，例如附件 B，则可以很好地播放，只是不能在只有 HTML5 的浏览器中播放。