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

拈花ヽ惹草 提交于 2019-12-18 02:47:43

问题


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


回答1:


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.




回答2:


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




回答3:


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.



来源:https://stackoverflow.com/questions/29487978/how-to-embed-h264-video-file-in-html-webpage-using-video-tags

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!