In the past, webmasters had to embed videos into webpages using javascript, flash, quicktime, etc. The problem is that the end user had to install third party browser plugins to be able to watch videos online. Now with the release of the HTML5 video element, webmasters have a browser accessible video embedding method. The HTML5 video element is still young and only works with top browsers like Firefox 3.5+, Andoid 2+ and IE 9+ to name a few. However, the accessibility is growing. For the time being, it is wise to stick with those third party plugins until video format accessibility improves for the HTML5 video element.
As you see, video format comatibility is still an issue. So, browser detection is still required unless you require your users to choose the embed page based on the browser they use.
This example tells the browsers 3 different video formats. So the browser will choose the first video format that it can work with. I also included the attribute "controls" that will display the video controls (Play, Pause, Rewind, and so on.)
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>
| Attribute | Value | Example |
| Audio | muted | audio="muted" |
| Autoplay | autoplay | autoplay="autoplay" |
| Controls | controls | controls="controls" |
| Height | height in pixels | height="380px" |
| Loop | loop | loop="loop" |
| Poster | url to image sample of video | poster="http://mysite.com/video.png" |
| Preload | preload | preload="preload" |
| Src | url to video file | src="http://mysite.com/video.avi" |
| Width | width of video in pixels | width="380px" |
|
