How to Embed HTML5 Video into Web Pages?
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
How to Maximize HMTL5 video Compatibility? WMV to HTML5
Comments are currently closed.
[…] How to Embed HTML5 Video into Web Pages? […]
[…] How to Embed HTML5 Video into Web Pages? […]
[…] Now please refer to: How to Embed HTML5 Video into Web Pages? […]
Useful information. Lucky me I found your website accidentally, and I am surprised why this accident did not happened in advance! I bookmarked it.
[…] See a live demo of HTML5 video with controls here. […]