HTML5 – Video element

1-Introduction
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:

<html>

<head>

<title>DevMix Web Series</title>

</head>

<body>

<video src=”Wildlife.ogv” width=”300″ height=”225″ ></video>

</body>

</html>

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 ๐Ÿ™‚
  2. http://html5video.org/
  3. http://en.wikipedia.org/wiki/HTML5
  4. http://diveintohtml5.org/video.html
  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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: