Scribd
Upload
50 views11 pages

Chapter 10 (Embedded Media)

Uploaded by

jumagulnijat766
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views11 pages

Chapter 10 (Embedded Media)

Uploaded by

jumagulnijat766
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

1

Embedded Media
Content 2

1 The iframe element 4 The Canvas element

2 The object element

3 Video and Audio Players


Iframe Element 3

• Adding an iframe to the page creates a


little window-in-a-window (or a nested
browsing context, as it is known in the
spec) that displays the external resource.

• The iframe (inline frame) element lets


you embed a separate HTML document
or other web resource in a document. It
has been around for many years, but it
has recently become one of the most
popular ways to share content between
sites.
Multipurpose Embedder (Object) 4

• To embed those media resources on the page, we used the object and embed
elements. They have slightly different uses.

• The object element is a multipurpose object placer. It can be used to place an image,
create a nested browsing context (like an iframe), or embed a resource that must be
handled by a plugin. The embed element was for use with plug-ins only.
Video and Audio 5

• When you prepare audio or video content for web delivery, there are two format
decisions to make:

1) How the media is encoded (the algorithms used to convert the source to 1s and 0s
and how they are compressed). The method used for encoding is called the
codec, which is short for “code/ decode” or “compress/decompress.” such as MP3,
H.264, Vorbis, Theora, VP8, and AAC.
2) The container format for the media like a ZIP file that holds the compressed media
and its metadata together in a package. Usually a container format is compatible
with more than one codec type.
Video and Audio … 6

For video, the most common options are as follows:


• MPEG-4 container + H.264 video codec + AAC audio codec: This combination is
generally referred to as “MPEG-4,” and it takes the .mp4 or .m4v file suffix. H.264 is a
high-quality and flexible video codec, but it is patented and must be licensed for a fee.
All current browsers that support HTML5 video can play MPEG-4 files with the H.264
codec.
• WebM container + VP8 video codec + Vorbis audio codec: “WebM” is a container
format that has the advantage of being open source and royalty free. It uses the .webm
file extension. It was originally designed to work with VP8 and Vorbis codecs.
• WebM container + VP9 video codec + Opus audio codec: The VP9 video codec
from the WebM project offers the same video quality as VP8 and H.264 at half the
bitrate. it is a great option for browsers that can play it.
• Ogg container + Theora video codec + Vorbis audio codec: This is typically called
“Ogg Theora,” and the file should have an .ogv suffix. All of the codecs and the
container in this option are open source and unencumbered by patents or royalty
restrictions.
Video and Audio … 7

• The landscape looks similar for audio formats:


• MP3:The MP3 (short for MPEG-1 Audio Layer 3) format is a codec and container in
one, with the file extension.mp3. It has become ubiquitous as a music download
format.
• WAV: The WAV format (.wav) is also a codec and container in one. This format is
uncompressed so it is only good for very short clips, like sound effects.
• Ogg container + Vorbis audio codec: This is usually referred to as “Ogg Vorbis” and
is served with the .ogg or .oga file extension.
• MPEG 4 container + AAC audio codec: “MPEG4 audio” (.m4a) is less common than
MP3. WebM container + Vorbis audio codec:The WebM (.webm) format can also
contain audio only.
• WebM container + Opus audio codec: Opus is a newer, more efficient audio codec
that can be used with WebM.
Adding Video 8
Adding Audio 9
Canvas 10

• The canvas element creates an area on a web page for drawing with a set of
JavaScript functions for creating lines, shapes, fills, text, animations, and so on.

• Mastering the canvas element is more than we can take on here, particularly without
any JavaScript experience
Thank you

You might also like