Like the <iFrame> tag in the last section, the <embed> tag is used to embed outside content into a host web page. However, the focus here is on media such as photos, videos, sounds and, despite all the rumors to the contrary, Flash content.
While you are probably thinking that you could do the same thing with the <img> tag, you can use the
<embed> tag to bring a variety of media into web pages. For instance, you could bring in videos, sound files, and so forth. However, when dealing with video, things are in transition a bit at this time.
As of this writing, there seems to be a growing trend against the use of browser plug-ins such as Adobe
Flash Player. Many mobile technologies do not support these plug-ins currently. For example, one of the
most-used Flash Video formats is FLV. This requires the use of the aforementioned Adobe Flash Player.
The <embed> tag seems to point to a possible solution; however, there is a caveat. Videos come in a
variety of flavors - FLV, MOV, H.264, and so on. Each of these MIME types (file extensions) requires
someone to take the original video and encode it. This means wrapping it in a special container called a
CODEC (COmpression DECompression). In addition, the person seeing the video needs to have a copy of the video’s CODEC installed on their computer. In the case of Flash Video, the CODEC is contained within the Flash Player.
As of this writing, there are two CODECS that support HTML5 video: H.264 and Theora. Keeping this in
mind, and again as of this writing, there is the following browser support:
- Firefox 3.5 and above supports HTML5 with only Theora, not H.264.
- Internet Explorer 9 supports HTML5 video with only H.264 and not Theora.
- Safari 3 and above supports HTML5 video with only H.264 and not Theora.
- Chrome 3 and above supports HTML5 video with both H.264 and Theora.
- Opera 10.5 supports HTML5 video with only Theora and not H.264.
Example Code
<!DOCTYPE html>
<html>
<head>
<title>Using the embed tag </title>
</head>
<body>
<p><strong>Using the embed tag</strong></p>
<embed type="jpg" src="Image.jpg" height="250" width="350" />
</body>
</html>
What distinguishes this tag is the type attribute. You probably associate the type attribute with tags such
as <input>. In HTML5, however, the use of attributes has been made more consistent over tags. In most
cases, the media’s MIME type (file extension) is used as the type. As you will soon see, however, there is
an alternate way of identifying video types.
The other unique attribute is the src. This can be any URL needed to connect to the source.
As illustrated above, different browsers support different encodings for HTML5 video. For that reason, it
may be necessary to do two encodings of any given video: one for H.264 and one for Theora. Within the
<embed> tag, you use the type attribute to identify which encoded video to open.
When using the type attribute with video, the type of video can be identified with the syntax video/type.
For example, for a QuickTime video, identify the type as type = "video/Quicktime".
0 comments:
Post a Comment