First thing you should know in this article it the goal of this article, and the goal of this article is very simple, it’s to enable you to use the new markup element in html5 (video), and i want to introduce the video first to make it easy for you to understand what to do.
Note that: you should use the latest version of some browser to support this element and test it, i promote to use firefox 4 or 5 , or opera 11 or later, or IE 9, or test your current browser if it support HTML5 or not from here
2- Video Container files
Ok, get ready for a reality that may shock you, the AVI files or the MP4 files are just a container formats, Just as a ZIP file can contain any sort of file within it, the video container formats just define the way things store in it, not the kind of data it self.
A video file usually contains multiple tracks: a video track (without audio), plus one or more audio tracks (without video).
There are lots of video containers such as:
- MPEG-4 : it’s usually with the extension .mp4 or m4v.
- Flash Video : usually with the extension .flv as we see in the downloaded videos of youtube before it use HTML5.
- Ogg : it’s usually .ogv , Firefox 3.5, Chrome 4, and Opera 10.5 offer native support, as we said before, the container contain video and audio, in the ogg case, the video called Theora and the audio called Vorbis.
- and others … you can find other from Here
3- Browsers that Support for videos codecs
The support of the video and audio codecs in the browsers is clear in the following table:
so, you must have one of tose browsers that support the video element of HTML5 to enjoy the next practise .. 🙂
4- Encoding Ogg Video with Firefogg
Because HTML5 don’t support all containers of videos, we are going to use “Ogg video” as a shorthand for “Theora video and Vorbis audio in an Ogg container” ..
Firefogg is an open source, GPL-licensed Firefox extension for encoding Ogg video. To use it, you’ll need to install Mozilla Firefox 3.5 or later, then visit the Firefogg website
as shown in this image
after installing this plugin and restarting the firefox .. the following window will appear
then click on Make Web Video link and you will get the following window
now you should select a video file .. i expect you select the default movie that is with any windows in the documents which called “Wildlife.wmv”.. then the following window will appear
then simply click on Encode to file .. whic make you select a place to save the file with the extension .ogv and loading as follow
Now you have a file with the extension of .ogv …. so this level is done and the result is a file called “Wildlife.ogv”
5- the Markup Tag (video)
after the last section we get a file in the container Ogg that HTML5 can work with, then we reach the easiest step which is writing the HTML5 code for a video, ok lets make a folder and put the “Wildlife.ogv” file in it and create an other file with the name “TestVideo.html” inside the same folder.. then oper it and start writing the following:
<title>DevMix Web Series</title>
<video src=”Wildlife.ogv” width=”300″ height=”225″ ></video>
then, what do you see? it’s just a black box , then where is the video ? you should here use what the creators of HTML5 called a naked attributes which mean that no value for that so you should add a naked attribute to the video element called controls ok lets edit it with this line of code
<video src=”Wildlife.ogv” width=”300″ hight=”225″ controls></video>
and now run the code you will find it as follow:
you can play it now and enjoy writing HTML5 videos … 🙂
Note : the controls bar is autohiding and there are a lot of other features for videos you can search for them or ask us and wait for other articles in the same field in the near future isA
6- some resources to read more
i collect some resources to enable you to learn more in HTML5
- first one is our Blog … here 🙂
- and Google 😀
hope that the article was useful for all of you .. wait your feeds 🙂