In the last post I told how to optimize images? and what are the major image file formats that are supported by leading browsers. After reading that post you may be thinking what if I want to post a video rather than an image can I do that with the help of HTML?. Are there any video formats just like image file formats? The answer to all these question lies in this post.
We all watch videos on you tube and and admire them but what exactly a video is composed of? In general we can say that a video has some graphics/pictures and a certain audio pertaining to that particular video.
I will first tell you how you can put a video on your page with the help of new HTML5 element called <video> element and then I will talk about different video formats. I know I am discussing this a lot ahead but it is very similar to image element, so I decided to tell this after image element. Let's have a first look of <video> element:
We all watch videos on you tube and and admire them but what exactly a video is composed of? In general we can say that a video has some graphics/pictures and a certain audio pertaining to that particular video.
I will first tell you how you can put a video on your page with the help of new HTML5 element called <video> element and then I will talk about different video formats. I know I am discussing this a lot ahead but it is very similar to image element, so I decided to tell this after image element. Let's have a first look of <video> element:
<video src="video/myvideo.mp4" width="500" height="400" controls autoplay poster="firstimage/jpg"></video>
If you analyze the above code you will find many similarity between <image> element and <video>element. Like <image>element it also have 'src','width' and 'height' attributes. You already know about these attributes but let's understand their meaning in context of <video>element.
width and height attributes: The width and height attributes set the width and height of the
video display area (also known as the “viewport”). If you specify a poster, the poster image will be scaled to the width and height youspecify. The video will also be scaled, but will maintain its aspect ratio (e.g., 4:3 or 16:9), so if there’s extra room on the sides, or the top and bottom, the video will be letter‑boxed or pillar‑boxed to fit into the display area size. You should try to match the native dimensions of the video if you want the best performance (so the browser doesn’t have to scale in real time).
src: The src attribute is just src attiribute of <image> element src - it is a url that tells the browser where to find the source file.
controls: It's a Boolean attribute. What is a Boolean attribute? A attribute that has no value is called Boolean attribute. It is either there or not. If it is there, then the Browser will add its
built in controls to the video display. The controls vary by browsers, so check out each browser to see what they look like.
autoplay: The autoplay Boolean attribute tells the browser to start playing the video as soon
as it has enough data.
poster: The browser will typically display one frame of the video as a “poster” image to represent the video. If you remove the autoplay attribute, you’ll see this image displayed before you click play. It’s up to the browser to pick which frame to show; often, the browser will just show the first frame of the video…which is often black. If you want to show a specific image, then it’s up to you to create an image to display, and specify it by using the poster attribute.
preload: The attribute preload is typically used for fine-grained control over how video loads
for optimization purposes. Most of the time, the browser chooses how much video to load,
based on things like whether autoplay is set and the user’s bandwidth. You can override
this by setting preload to “none” (none of the video is downloaded until the user “plays” it), “metadata” (the video metadata is downloaded, but no video content), or “auto”
to let the browser make the decision.
Lets' now take a look at video formats. So what is a video format? Think about it this way: a video file contains two parts, a video part and an audio part, and each part is encoded (to reduce size and to allow it to be played back more efficiently) using a specific encoding
type. That encoding, for the most part, is what no one can agree on—some browser makers are enamored with H.264 encodings, others really like VP8, and yet others like the open source alternative, Theora. And to make all this even more complicated, the file that holds the video and audio encoding (which is known as a container) has its own format with its own name.
What is a container? A container is a file format that's used to package up the data video,audio and meta data information.
What is a codec? A codec is a software used to encode or decode a specific encoding of video or audio.
We will be looking at three major video formats and these are :
1. Mp4 container :Mp4 video format contains H.264 video encoding and AAC audio encoding files for encoding video and audio. H.264 is licensed by MPEG-LA group. There are more more than one kind H.264; each is known as profile. Mp4/H.264 is supported by
Safari and IE9+. You may find support in some versions of chrome.
2. WebM container: WebM video format contains Vp8 video encoding and vorbis audio encoding. WebM was designed by google to work with Vp8 encoded videos WebM/Vp8 is supported by Firefox, Chrome, and Opera. You will find WebM formatted videos with .webm extension
3.Ogg container: Ogg video format contains Theora video encoding and Vorbis audio encoding. Theora is an open source codec. Video encoded with Theora are usually contained in Ogg file wilth .ogv extension. Ogg/Theora is supported by Firefox, Chrome and opera.
That was all for this post in the next post we will write a program to display video on our web page and how to use our video element so that it is accessed by all major browsers.
If you analyze the above code you will find many similarity between <image> element and <video>element. Like <image>element it also have 'src','width' and 'height' attributes. You already know about these attributes but let's understand their meaning in context of <video>element.
width and height attributes: The width and height attributes set the width and height of the
video display area (also known as the “viewport”). If you specify a poster, the poster image will be scaled to the width and height youspecify. The video will also be scaled, but will maintain its aspect ratio (e.g., 4:3 or 16:9), so if there’s extra room on the sides, or the top and bottom, the video will be letter‑boxed or pillar‑boxed to fit into the display area size. You should try to match the native dimensions of the video if you want the best performance (so the browser doesn’t have to scale in real time).
src: The src attribute is just src attiribute of <image> element src - it is a url that tells the browser where to find the source file.
controls: It's a Boolean attribute. What is a Boolean attribute? A attribute that has no value is called Boolean attribute. It is either there or not. If it is there, then the Browser will add its
built in controls to the video display. The controls vary by browsers, so check out each browser to see what they look like.
autoplay: The autoplay Boolean attribute tells the browser to start playing the video as soon
as it has enough data.
poster: The browser will typically display one frame of the video as a “poster” image to represent the video. If you remove the autoplay attribute, you’ll see this image displayed before you click play. It’s up to the browser to pick which frame to show; often, the browser will just show the first frame of the video…which is often black. If you want to show a specific image, then it’s up to you to create an image to display, and specify it by using the poster attribute.
preload: The attribute preload is typically used for fine-grained control over how video loads
for optimization purposes. Most of the time, the browser chooses how much video to load,
based on things like whether autoplay is set and the user’s bandwidth. You can override
this by setting preload to “none” (none of the video is downloaded until the user “plays” it), “metadata” (the video metadata is downloaded, but no video content), or “auto”
to let the browser make the decision.
Lets' now take a look at video formats. So what is a video format? Think about it this way: a video file contains two parts, a video part and an audio part, and each part is encoded (to reduce size and to allow it to be played back more efficiently) using a specific encoding
type. That encoding, for the most part, is what no one can agree on—some browser makers are enamored with H.264 encodings, others really like VP8, and yet others like the open source alternative, Theora. And to make all this even more complicated, the file that holds the video and audio encoding (which is known as a container) has its own format with its own name.
What is a container? A container is a file format that's used to package up the data video,audio and meta data information.
What is a codec? A codec is a software used to encode or decode a specific encoding of video or audio.
We will be looking at three major video formats and these are :
1. Mp4 container :Mp4 video format contains H.264 video encoding and AAC audio encoding files for encoding video and audio. H.264 is licensed by MPEG-LA group. There are more more than one kind H.264; each is known as profile. Mp4/H.264 is supported by
Safari and IE9+. You may find support in some versions of chrome.
2. WebM container: WebM video format contains Vp8 video encoding and vorbis audio encoding. WebM was designed by google to work with Vp8 encoded videos WebM/Vp8 is supported by Firefox, Chrome, and Opera. You will find WebM formatted videos with .webm extension
3.Ogg container: Ogg video format contains Theora video encoding and Vorbis audio encoding. Theora is an open source codec. Video encoded with Theora are usually contained in Ogg file wilth .ogv extension. Ogg/Theora is supported by Firefox, Chrome and opera.
That was all for this post in the next post we will write a program to display video on our web page and how to use our video element so that it is accessed by all major browsers.
Posts
0 comments:
Post a Comment