htmlvideo-streaminghtml5-videoh.264mp4

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


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


Solution

  • 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.