HTML5 – Video element

2-Video container files
3-Browsers that Support for videos codecs
4-Encoding Ogg Video with Firefogg
5-The Markup Tag (Video)
6- Some resourcesto read more


1- Introduction

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

  1. first one is our Blog … here 🙂
  5. and Google 😀

hope that the article was useful for all of you .. wait your feeds 🙂

, ,

  1. #1 by mono on August 15, 2011 - 10:41 pm

    really amazing but i didn’t read it yet

    i will read and give you my feedbacks 🙂

  2. #2 by M.M.F on August 15, 2011 - 11:06 pm

    Good work ya basha 🙂

  3. #3 by mono on August 15, 2011 - 11:13 pm

    Great article 🙂

    you are my best pHp developer 😉

  4. #4 by Ahmed Waheed on August 16, 2011 - 2:41 am

    Nice, buddy 🙂
    keep going

  5. #5 by Mito on August 16, 2011 - 1:42 pm

    Realy Goooood

    Rabna m3ako

  1. 10 Articles Introduction to HTML5 is Done ! « DevelopersMix's Blog
  2. daily mail news

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: