如何使用视频标签在 html 网页中嵌入 .h264 视频文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29487978/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to embed .h264 video file in html webpage using video tags
提问by Ramaraju.d
I am trying to play .h264file in browser, Trying to accomplish this using html video tags. The result is always an empty frame.
我正在尝试在浏览器中播放.h264文件，尝试使用 html 视频标签来完成此操作。结果总是一个空帧。
I did check some links on web, They recommend to play the video in .mp4container.
我确实检查了网络上的一些链接，他们建议在.mp4容器中播放视频。
Can someone help me to accomplish this?
有人可以帮我完成这个吗？
UPDATED CODE:
更新代码：
<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>References:
参考：
http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html#fbid=6u-u00TH7Je
http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html#fbid=6u-u00TH7Je
采纳答案by Joe T. Boka
You don't have to include h.264 in your html code, you only need to include the path to your video file and the video file name. So, let's say your video file is .mp4 and your file's name is myvideo.mp4and your myvideo.mp4is in a folder named videosand your html file is just outside that videosfolder in your project folder then this is what you have to do:
您不必在 html 代码中包含 h.264，您只需要包含视频文件的路径和视频文件名。因此，假设您的视频文件是 .mp4，您的文件名是，myvideo.mp4并且您myvideo.mp4在一个名为的文件夹中，videos而您的 html 文件就videos在您的项目文件夹中的该文件夹之外，那么这就是您必须做的：
<video width="560" controls>
<source src="videos/myvideo.mp4" type="video/mp4">
</video>
This will work, provided your video is encoded in mp4 format. The h264 is a codec and it's completely irrelevant in this situation.
如果您的视频以 mp4 格式编码，这将起作用。h264 是编解码器，在这种情况下完全无关紧要。
You should first find an mp4 encoder online, there are many free encoders, encode your video to .mp4 then use the html code above and your video will play fine.
您应该首先在网上找到一个 mp4 编码器，有很多免费的编码器，将您的视频编码为 .mp4，然后使用上面的 html 代码，您的视频就会正常播放。
回答by aergistal
The .h264file contains the raw H.264 stream which is not directly supported in browsers. You can use a tool like FFmpegto put it in a container like the other answers recommended:
该.h264文件包含不直接在浏览器支持的原始H.264码流。您可以使用FFmpeg像其他建议的答案一样将其放入容器中的工具：
ffmpeg -f h264 -i test.h264 -c:v copy test.mp4
ffmpeg -f h264 -i test.h264 -c:v copy test.mp4
Edit:
编辑：
If you mustplay a raw H.264 byte-stream then you need a browser plugin. Example for VLC web plugin:
如果您必须播放原始 H.264 字节流，那么您需要一个浏览器插件。VLC 网络插件示例：
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" target="test.h264" />
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" target="test.h264" />
回答by 131
I wrote an HTML5 video player around broadway h264 codec (emscripten) that can play live (no delay) h264 video on all browsers (desktop, iOS, ...).
我围绕 Broadway h264 编解码器 (emscripten) 编写了一个 HTML5 视频播放器，它可以在所有浏览器（桌面、iOS 等）上播放实时（无延迟）h264 视频。
Video stream is sent through websocket to the client, decoded frame per frame and displayed in a canva (using webgl for acceleration)
视频流通过 websocket 发送到客户端，每帧解码帧并显示在画布中（使用 webgl 进行加速）
Check out https://github.com/131/h264-live-playeron github.
在 github 上查看https://github.com/131/h264-live-player。
