How to Embed HTML5 Video into Web Pages?

July 9, 2012 html5video HTML5 Video

Before the arriving of the HTML5, each of the video played via a web browser was played through third party browser plugins. Initially we have witnessed RealPlayer, next Windows Media Player and QuickTime, and now Flash, which is at the moment the dominating plugin that plays a large number of web video.

The HTML5 introduces a new standard to embed and play videos within web pages, FREE of any third party plugins, simply using a video element. Appears to be easy, correct? But you will find that no such a single video format that works with all HTML5 web browsers as of now.

For maximum compatibility with browsers for HTML5 videos, we recommend encoding your video into bellow HTML5 video formats and implement them into your web pages.

• H.264(Baseline) in a .mp4 container.
• VP8/WEBM in a .webm container.
• Theroa/Vorbis in a .ogv container.

If you have only one HTML5 video file to embed into web pages, you can simply link to it in a src attribute in the

Embed HTML5 video single source

<video src="samplevideo.webm" width="640" height="480" autoplay></video>

Embed HTML5 video multiple sources

For multiple video clips as we have mentioned above, for maximum HTML5 video browser compatibility we need to make 3 different versions of your video. You can embed multiple HTML5 videos into web pages in a HTML5 video element, bellow is the HTML5 Video markup example for multiple videos:

Source code as bellow

<video width="640" height="360" controls>
<source src="http://html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
<source src="http://html5videoplayer.net/videos/toystory.webm" type="video/webm" />
<source src="http://html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />
</video>

Result as bellow

HTML5 video with poster image

Now, let’s go to add a poster image to the HTML5 Videos.

<video poster="http://html5videoplayer.net/poster/toystory.jpg" width="640" height="360" controls>
<source src="http://html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
<source src="http://html5videoplayer.net/videos/toystory.webm" type="video/webm" />
<source src="http://html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />
</video>

Result as bellow

HTML5 video autoplay

How to autoplay the HTML5 videos? Just add autoplay=”autoplay” or simply autoplay to the video tag. See sample code as bellow:

<video autoplay="autoplay" poster="http://html5videoplayer.net/poster/toystory.jpg" width="640" height="360" controls>

or

<video poster="http://html5videoplayer.net/poster/toystory.jpg" width="640" height="360" autoplay controls>

Result as bellow

convert html5 video, embed html5 video, html5 video embed

How to Maximize HMTL5 video Compatibility? WMV to HTML5