Video streaming over the internet is nothing new, the attempt in doing so can be dated back to the mid of 20th century. Due to the limited network bandwidth and lower CPU power, nothing was quite successful until Youtube made its debut on 2005.
With HTML5, we can now "embed" video as a native element as <img>. It works almost the same as <audio> besides it has three attributes that only applicable to <video>. There are "width", "height" and "poster"."width" and "height" determine the screen size and "poster" is just a still image file projected on screen before the movie gets played.
The code to stream video from your web page can be as simple as the line below.
<video src="rain.mp4" controls width="480" height="360"></video>
In reality, life isn't as how we thought it should be. The simple line of code above works only in Google Chrome, Apple Safari, and yet for Apple Safari to play the video, you have got to make sure QuickTime is installed in your computer.
Similarly to the plight of audio, we don't have an universal video format that all web browsers are supporting. At least at the time of writing (13 December 2010).
Again, it is money games at the end of the day. H.264 is patent-encumbered, Firefox and Opera chose to embrace a royalty free codec which is Theora and WebM (VP8 codec)
|Mozzila Firefox 3.6||✓||✓|
|Google Chrome 8.0||✓||✓||✓|
|Apple Safari 5.0.3 (with QuickTime)||✓|
|Microsoft IE 9 Beta||✓||✓|
In short, the simple single line code as I demonstrated above isn't practical. You've got to provide at least two sources (recommended is three) for one video.
Attributes of <video>
|controls||*Boolean attribute||If you want the browser native player control to be around, specifiy "controls"|
|autoplay||*Boolean attribute||If this guy exists, the browser will just play your video without asking permission from visitor|
|loop||*Boolean attribute||Keep repeating your video|
|src||url||The URL of your video file|
|preload||none | metadata | auto||
This attribute was formerly known as "autobuffer" and it was an boolean attribute as "controls".
none - do not buffer video file automatically.
metadata - only buffer the metadata of video
auto - buffer video file before it gets played.
|width||width in pixels||Width of video player|
|height||height in pixels||Height of video player|
|poster||url of a image file||If present, shows the poster image until the first frame of video has downloaded.|
What about browsers that are HTML5 illiterate?
If you think encoding one video for three times is painful, hold your breath for a little longer, you are going to take more pain in order to accomodate more visitors who are using an less modern web browser. i.e. Internet Explorer 8 and below.
Microsoft has released its Internet Explorer 9 Beta on Nov 2010 which supporting HTML5, but <video> tag is yet supported as of writing. Hence, you will have to take step further to embed a flash player in <object> since most user has flash plugin installed. I believe Microsoft will eventually support <video>, even so, its always taking time for majority of the user to migrate to the latest version of web browser.