I am trying to play .h264 file in browser, Trying to accomplish this using html video tags. The result is always an empty frame.
I did check some links on web, They recommend to play the video in .mp4 container.
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:
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
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.mp4
and your myvideo.mp4
is in a folder named videos
and your html file is just outside that videos
folder in your project folder then this is what you have to do:
<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.
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.
The .h264 file contains the raw H.264 stream which is not directly supported in browsers. You can use a tool like FFmpeg
to put it in a container like the other answers recommended:
ffmpeg -f h264 -i test.h264 -c:v copy test.mp4
Edit:
If you must play a raw H.264 byte-stream then you need a browser plugin. Example for VLC web plugin:
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" target="test.h264" />
I wrote an HTML5 video player around broadway h264 codec (emscripten) that can play live (no delay) h264 video on all browsers (desktop, iOS, ...).
Video stream is sent through websocket to the client, decoded frame per frame and displayed in a canva (using webgl for acceleration)
Check out https://github.com/131/h264-live-player on github.