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

Question

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

Answer 1

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" />

Answer 2

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.

Answer 3

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.