Customizing and Embedding Multimedia WEB-APPLICATION(803)

Customizing and Embedding Multimedia Components in Web Pages

Multimedia is the media that uses multiple forms of information content and information processing (e.g.
text, audio, graphics, animation, video, interactivity) to inform or entertain the user. Multimedia also
refers to the use of electronic media to store and experience multimedia content. Multimedia is similar
to traditional mixed media in fine art, but with a broader scope. The term “rich media” is synonymous
for interactive multimedia.

Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Pictures, music, sound, videos, records, films, animations, and more.
Advantage:
Enhanced Page Rankings for SEO:
Websites with Multimedia content like videos /flash animation are having higher percentage than text-
based websites to appear on the first page of search engine results.

Better Branding
Multimedia based sites are more elaborate than websites of the past. It is hard to represent a brand's
image without including audio or video content to support it. As such, multimedia sites are frequently
preferred by marketing departments because of their ability to completely present branding.
Retain Viewers
In most situations multimedia content can be embedded on a site to allow visitors to view a picture or
video without having to leave your site. Rather than providing a link on your site to a YouTube video,
for example, you can embed the video itself, which ensures that viewers stay on the page and are
encouraged to move to another article from your site rather than another video from YouTube
Disadvantage:
Potential Damage to Search Engine Rankings
While video content can help a site with search engines, images that are not handled correctly can
damage a sites ranking such sites are generally ignored by search engines. Creators of multimedia
content who do not keyword-optimize the content negate any SEO work on the nonmultimedia portion
of the site. As a result, the site appears lower in search results, which affects its overall traffic flow.

Disadvantage: Loading Times

While the days of measuring page load times on a slow, dial-up modem are over, multimedia content
still takes longer to load than static content. Presenting a user who visits a site with a screen that says
"Please Wait.... Loading" frequently results in a viewer clicking away to a different page.
Disadvantage: Compatibility
Every browser can display at least some subset of HTML. Multimedia elements not as widely supported.
The best example of this is the absence of Flash multimedia on Apple's mobile devices. As of the middle
of 2012, the devices still did not support Flash, causing sites that depend upon Flash to display
incorrectly on iPads and iPhones. This problem applies to other types of multimedia, as well. A site that
uses the Windows Media format for its multimedia content will frequently not work correctly for users
on computers that lack a plug-in for Windows Media.

CLASS 12/WEB APP/2019-20 1 @VKS-LEARNING-HUB

Customizing and Embedding Multimedia WEB-APPLICATION(803)

The most common way to discover the type of a file, is to look at the file extension. When a browser
sees the file extension .htm or .html, it will treat the file as an HTML file. The .xml extension indicates
an XML file, and the .css extension indicates a style sheet file. Pictures are recognized by extensions
like .gif, .png and .jpg. Multimedia files also have their own formats with different extensions like: .swf,
.wav,.mp3, and .mp4

Images (Graphics) – Digital representations of photographs, drawings, charts, and other visual
images • Images are static and are available in many formats— TIF, BMP, GIF, JPEG, and PNG

Images are broadly categories in two types Raster images and Vector Images
Raster images
Raster images are made up of a set grid of dots called pixels where each pixel is assigned a color.
Raster images are resolution dependent, meaning they exist at one size.
When you transform a raster image, you stretch the pixels themselves, which can result in a “pixelated” or
blurry image.
Raster images are typically used for photographs, digital artwork and web graphics (such as banner ads,
social media content and email graphics).

Popular Raster Image format are 1. JPEG 2. GIF 3. PNG 4.TIFF 5. RAW 6. PSD 7. BMP
JPG/JPEG
JPEG is a lossy raster format that stands for Joint Photographic Experts Group
JPEG images have a sliding scale of compression that decreases file size tremendously but increases
artifacts or pixelation the more the image is compressed.
Uses 16 million or 24bit colors
We should use a JPEG when…
• We’re dealing with online photos and/or artwork. JPEGs offer you the most flexibility with raster
editing and compression making them ideal for web images that need to be downloaded quickly.
• We want to print photos and/or artwork. At high resolution files with low compression, JPEGs are
perfect for editing and then printing.
• We need to send a quick preview image to a client. JPEG images can be reduced to very small
sizes making them great for emailing.
GIF
GIF is a lossless raster format that stands for Graphics Interchange Format.
GIF is typically used for animated graphics like banner ads, email images and social media memes.
Use Maximum of 256 or 8 bit colors
GIFs are lossless, they can be exported in a number of highly customizable settings that reduce the
amount of colors and image information, which in turn reduces the file size.
You should use a GIF when…
• You want to create web animation. GIF images hold all of the animation frames and timing
information in one single file. Image editors like Photoshop make it easy to create a short animation
and export it as a GIF.
• You need transparency. GIF images have an “alpha channel” that can be transparent, so you can
place your image on any colored background.
• You need a small file. The compression techniques in the GIF format allow image files to shrink
tremendously. For very simple icons and web graphics, GIF is the best image file format.

CLASS 12/WEB APP/2019-20 2 @VKS-LEARNING-HUB

Customizing and Embedding Multimedia WEB-APPLICATION(803)

TIFF/TIF
TIFF is a lossless raster format that stands for Tagged Image File Format. Because of its extremely high
quality, the format is primarily used in photography and desktop publishing. You’ll likely encounter TIFF files
when you scan a document or take a photo with a professional digital camera. TIFF files are typically very
large.
You should use a TIFF when…
• You need high-quality print graphics. Along with RAW, TIFF files are among the highest quality
graphic formats available. If you’re printing photos—especially at enormous sizes—use this format.
• You are making a high-quality scan. Using TIFF to scan your documents, photos and artwork will
ensure that you have the best original file to work
PNG
PNG is a lossless raster format that stands for Portable Network Graphics. Think of PNGs as the next-
generation GIF. This format has built-in transparency, but can also display higher color depths, which
translates into millions of colors. PNGs are a web standard and are quickly becoming one of the most
common image formats used online.
You should use a PNG when…
• You need high-quality transparent web graphics. PNG images have a variable “alpha channel” that
can have any degree of transparency (in contrast with GIFs that only have on/off transparency).
Plus, with greater color depths, you’ll have a more vibrant image than you would with a GIF.
• You have illustrations with limited colors. Though any image will work, PNG files are best with a
small color palette.
• You need a small file. PNG files can shrink to incredibly tiny sizes—especially images that are
simple colors, shapes or text. This makes it the ideal image file type for web graphics.
. RAW
A raw image format contains the unprocessed data captured by a digital camera or scanner’s sensor.
Typically, images are processed (adjusted for color, white balance, exposure, etc.) and then converted and
compressed into another format (e.g. JPEG or TIFF). Raw images store the unprocessed and processed
data in two separate files, so you’re left with the highest quality image possible that you can edit non-
destructively with a photo editing application like Photoshop. There are dozens and dozens of raw formats,
but some of the typical formats are CRW (Canon), NEF (Nikon), and DNG (Adobe).
You should use RAW when…
• You are shooting and editing photos. Make sure your camera is set to RAW so you can capture
the most versatile image. Then, use a compatible photo-editing application to adjust your image.
PSD
PSD is a proprietary layered image format that stands for Photoshop Document. These are original design
files created in Photoshop that are fully editable with multiple layers and image adjustments. PSDs are
primarily used to create and edit raster images, but this unique format can also contain vector layers as
well, making it extremely flexible for a number of different projects. A PSD can be exported into any
number of image file formats, including all of the raster formats listed above.
You should use a PSD when…
• You need to edit artwork for digital or print. That could be a photo, painting, drawing, or anything
else. Photoshop is the right tool to make sure every line, shadow and texture is in place.
• You want digital images for the web like social media images, banner ads, email headers, videos
etc. Creating these images in Photoshop will ensure they’re right size and optimized for the web.
• You have to create a website or app mockup. Layers make it easy to move UI elements around.
• You want to get fancy with animation and video. Photoshop makes it easy to cut together simple
video clips and add graphics, filters, text, animation and more.

CLASS 12/WEB APP/2019-20 3 @VKS-LEARNING-HUB

 Customizing and Embedding Multimedia WEB-APPLICATION(803)

Vector Image

Vector images are digital artwork in which points, lines and curves are calculated by the computer. They
essentially giant math equations, and every “equation” can be assigned a color, stroke or thickness (among
other styles) to turn the shapes into art.
Vector images are resolution independent. When you shrink or enlarge a vector image, your shapes get larger,
but you won’t lose any detail or get any pixelation. Because your image will always render identically, no matter
the size, there is no such thing as a lossy or lossless vector image type.
Vector images are typically used for logos, icons, typesetting and digital illustrations. Adobe Illustrator is the
industry-standard image editor that is used to create, design and edit vector images (though it can also
incorporate raster images, as well).
Examples of Vector Images. 1. PDF 2. .EPS .SVG 4 .AI
PDF
PDF stands for Portable Document Format and is an image format used to display documents and graphics
correctly, no matter the device, application, operating system or web browser. At its core, PDF files have a
powerful vector graphics foundation, but can also display everything from raster graphics to form fields to
spreadsheets. Because it is a near universal standard, PDF files are often the file format requested by
printers to send a final design into production. Both Adobe Photoshop and Illustrator can export straight to
PDF, making it easy to start your design and get it ready for printing.
You should use a PDF when…
• You’re ready to print. As we mentioned, many printers prefer PDF as their primary delivery format
because it is so ubiquitous. Check with your printer to see how they’d like you to prepare your file.
• You want to display documents on the web. You wouldn’t use a PDF for a single icon or logo, but it’s
great for posters, flyers, magazines and booklets. PDFs will keep your entire design in one package,
making it easy to view, download or print.
EPS
EPS is an image format that stands for Encapsulated PostScript. Although it is used primarily as a vector
format, an EPS file can include both vector and raster image data. Typically, an EPS file includes a single
design element that can be used in a larger design.
You should use an EPS when…
• You need to send a vector logo to a client, designer or a printer. With an EPS file, you don’t have to
worry about where the logo will be placed or printed. No matter the size, it will always appear at the
correct resolution.
AI
AI is a proprietary vector image format that stands for Adobe Illustrator. The format is based on both the EPS
and PDF standards developed by Adobe. Like those formats, AI files are primarily a vector-based format,
though they can also include embedded or linked raster images. AI files can be exported to both PDF and
EPS files (for easy reviewing and printing), and also JPEG, PNG, GIF, TIFF and PSD (for web use and
further editing).
You should use an AI when…
• You need to edit a vector design. AI files allow you to move and alter every single element in your
design with just a click or two.
• You need to create a logo, icon or brand mascot. Every vector shape and line created in
Illustrator can be blown up to any size, which makes it ideal for images that need to be used in
many different ways.
• You want a one-page print piece. Illustrator is perfect for posters, business cards, flyers and
notecards that can be combined with other raster images.

CLASS 12/WEB APP/2019-20 4 @VKS-LEARNING-HUB

 Customizing and Embedding Multimedia WEB-APPLICATION(803)

JPEG GIF
Joint Photographic Experts Group Graphics Interchange Format
Can store a single image in a file. Multiple images can be stored in the file.
More than 16 million colours Maximum of 256 colours
Transparency Not provided Single bit transparency is permitted
Lossy Compression Lossless Compression
No Animation Animation is possible
RASTER IMAGE VECTOR IMAGE
Made up from Pixel Made from Lines and equation of path
Not Scalable as raster (or bitmap) images get blurry Scalable as Vector images don’t lose their
and pixelated sharpness and clarity
Big File size Smaller size than raster
Less or no compatibility issue as they can open in sometimes, an issue is the compatibility of vector
almost all image software graphics. You can only open and edit them with
a specialized software such as Adobe Illustrator.
Conversion to vector difficult Easy conversion to raster
Raster Images formats: bmp, tiff, jpg, gif, png Vector image formats eps, svg , pdf

LOSSY COMPRESSION LOSSLESS COMPRESSION

The Lossy compression method eliminates some The Lossless compression method is capable of
amount of data that is not noticeable. This technique reconstituting the original form of the data. The
does not allow a file to restore in its original form but quality of the data is not compromised.
significantly reduces the size.

JPEG, GUI, MP3, MP4, OGG, H-264, MKV, etc. RAW, BMP, PNG, WAV, FLAC, ALAC etc.

lossy compression can decrease the size of the file to Lossless compression can reduce the size of data
a greater extent. at low extent

The quality of the data degrades in case of lossy lossless doesn’t degrade the quality of the data.
compression

A video file format is a type of file format for storing digital video data on a computer system. Video is
almost always stored using lossy compression to reduce the file size.
A video file normally consists of a container containing video data in a video coding format alongside
audio data in an audio coding format (e.g. Opus). The container can also contain synchronization
information, subtitles, and metadata such as title..
A program (or hardware) which can decode compressed video or audio is called a codec; playing or
encoding a video file will sometimes require the user to install a codec library corresponding to the type of
video and audio coding used in the file.

CLASS 12/WEB APP/2019-20 5 @VKS-LEARNING-HUB

Customizing and Embedding Multimedia WEB-APPLICATION(803)

File Description
.avi The AVI (Audio Video Interleave) format was developed by Microsoft. AVI files can contain both
audio and video data in a file container that allows synchronous audio-with-video playback. AVI files
support multiple streaming audio and video, although these features are seldom used.
The AVI video format can be used to store high-quality video and audio and typically uses less
compression than other similar video formats such as .MPEG and .MOV. This results in very large
AVI file sizes, which can be problematic for users with limited space.
.wmv The Windows Media format is developed by Microsoft. Video or audio file based on the Microsoft
Advanced Systems Format (ASF) container format and compressed with Windows Media
compression
.mpg The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet.
It stores video, audio, and metadata interleaved together. MPG files are often used for creating
.mpeg
movies that are distributed on the Internet.
It is cross-platform, and supported by all the most popular web browsers.
MPG files typically incorporate MPEG-1 or MPEG-2 audio and video compression.
.mov A MOV file is a common multimedia container file format developed by Apple and compatible with
both Macintosh and Windows platforms. It may contain multiple tracks that store different types of
media data and is often used for saving movies and other video files. MOV files commonly use the
MPEG-4 codec for compression.
.rm An RM file is a multimedia file used by RealPlayer, an audio and video playback and streaming
program. It contains audio or video data or a link to a streaming media file, which is played back as
.ram
it is downloaded. RM files are commonly used for streaming content over the Internet such as video
and Internet radio.
.swf The Flash (Shockwave) format was developed by Macromedia. The Shockwave format requires an
extra component to play. But this component comes preinstalled with web browsers like Firefox and
.flv
Internet Explorer.
.mp4 Movie or video clip that uses MPEG-4 compression, a standard developed by the Moving Picture
Experts Group (MPEG); commonly used for sharing video files on the Internet. The MPEG-4 video
format uses separate compression for audio and video tracks. YouTube accepts multiple formats,
and then converts them all to .flv or .mp4 for distribution. More and more online video publishers are
moving to MP4 as the internet sharing format for both Flash players and HTML5.

.mid The MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like
synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions
.midi
(notes) that can be played by electronics (like your PC's sound card).

.asf An ASF file is a media file stored in the Advanced Systems Format (ASF), a proprietary video and
audio container format. It contains audio and video data and optional metadata, such as title, author,
and copyright bibliographic data. ASF files are developed by Microsoft primarily
for streaming media.

CLASS 12/WEB APP/2019-20 6 @VKS-LEARNING-HUB

Customizing and Embedding Multimedia WEB-APPLICATION(803)

.flv An FLV file is a flash-compatible video file exported by the Flash Video Exporter plug-in (included
with Adobe Animate) or other program with FLV file support. It consists of a short header,
interleaved audio, video, and metadata packets. The file stores audio and video data in a similar
format used by standard Flash (.SWF) files.

Sound
Files containing data used to recreate audio on a computer are called audio files and are also available
in many different formats. Similar to image formats, audio files can either store a digital sampling of the
sound wave (sound files, like a raster image) or contain a digital encoding of the type, shape, and timing
of all the notes used in the composition (music files, like vector images).

File Description
.au Audio file created by Audacity, a free, cross platform audio editor; uses a proprietary format
that can only be opened by Audacity; saved as one of multiple audio data files for an
Audacity project (.AUD).
you can export the audio to several standard formats, including .MP3, .WAV, and .M4A
.aiff The AIFF file format is based on the Electronic Arts .IFF format and was originally developed
by Apple Computer. Standard CD audio AIFF files are sampled at 44.1KHz, are 16-bit, and
have two channels for stereo sound.
AIFF files are more commonly seen as .AIF on Windows systems.
.mid, .midi A MID file is a standard MIDI (Musical Instrument Digital Interface) file used by music
authoring and mixing programs as well as MIDI hardware devices. It contains music data,
such as what notes are played, when they are played, how long each note is held, and how
loud each note is played.
.mp3 An MP3 file is an audio file saved in a compressed audio format developed by the Moving
Picture Experts Group (MPEG) that uses "Layer 3" audio compression. It is commonly
used to store music and audiobooks with near-CD quality sound (stereo, 16-bit) and
roughly 1/10 the size of a .WAV or .AIF file.
.oga An OGG file is a compressed audio file that uses free, unpatented Ogg Vorbis audio
compression. It is similar to an .MP3 file, but sounds better than an MP3 file of equal size,
and may include song metadata, such as artist information and track data. OGG files are
supported by many software music players and some portable music players.
.wav A WAV file is an audio file that uses a standard digital audio file format utilized for
storing waveform data. It allows audio recordings to be saved with different sampling rates
and bitratesand is often saved in a 44.1 KHz, 16-bit, stereo format, which is the standard
format used for CD audio.
.voc Audio file format used by Creative Labs hardware, such as SoundBlaster sound cards; may
be audio clips, sound effects, or instrument sounds, which are also referred to as voices;
VOC files are compressed to reduce file size.
.wma A WMA file is an audio file saved in the Advanced Systems Format (ASF) proprietary
format developed by Microsoft. It contains Windows Media Audio and metadata objects
such as the title, artist, album, and genre of the track. WMA files are similar to .MP3 files
and primarily used for streaming music from the web.
.qt A QuickTime movie can contain just sound and no video. Any program that can
play QuickTime can play QT sound files.
.snd An SND is a Macintosh clickable sound format. It is playable on any Macintosh
and on Pentium computers with wplany.

CLASS 12/WEB APP/2019-20 7 @VKS-LEARNING-HUB

Customizing and Embedding Multimedia WEB-APPLICATION(803)

Multimedia on the Web

A helper application is a separate application program that is invoked by the browser. It is simply a
program that can understand and interpret files which the browser cannot handle by itself. Almost any
program can be configured to act as a helper application for the browser. Examples of helper applications
include Telnet and Excel.

The helper application runs outside of the browser window. So, an advantage of helper applications over
plug-ins is multitasking between a helper application and the browser window. If the browser is closed
down, the helper application lives on.

Helper applications cannot display the contents of a file in the context of a Web page. If the file being
read is a graphic, the helper application displays only the image, not the image embedded in the W eb
page. Another difference is that the browser has no control over the behavior of the helper application.
The browser only has the ability to start the helper application and display the appropriate file.

A plug-in is an application program invoked by the browser. It is a dynamic code module designed to
extend the capabilities of the browser by integrating a third party application program into the browser.
Thus, a plug-in is part of the browser binary tree and runs inside the browser window. It cannot live on
its own.

Background Sounds
Audio files can be placed on a web page using different methods. You can apply sound as a background
to a web page, or embed it with a controller allowing the visitor to start and stop the music. Some users
consider background sounds annoying so be careful when adding them to your site. Think of whom your
audience is before adding them.

The bgsound tag does not open a control bar for the user to turn off the music

<bgsound src="musicfilename.mid" loop="5" />

Applied within the heading. The bgsound tag is an Internet Explorer tag that is used to add background
music or a greeting to a web page running on Internet Explorer.
Attribute of bgsound tag
src - The audio file to be played.
loop - How many times the sound should repeat.

You can also add HTML background music code to your web page using the hidden attribute of
the <embed> tag.
<embed src="yoursoundfile.mp3" loop="false" hidden="true" autostart="true">

CLASS 12/WEB APP/2019-20 8 @VKS-LEARNING-HUB

 Customizing and Embedding Multimedia WEB-APPLICATION (803)

TAGs Description
Method 1 : using Define an <embed> element in your web page
<embed> Tag Let the src attribute point to the audio/video/flash URL
Use the width and height attributes to specify the dimension of the player
Autostart=true to start the audio automatically when page load default is true
Loop =true is you want to repeat sound automatically once it complete default
is false you can also mention how many times it can repeat automatically
Sound or Audio <embed width="420" height="315" src="soundfile.mp3"
(MP3/WAV) autostart= “false”>
Video(MP4) <embed width="420" height="315" src="videofile.mp4"
autostart= “false”>
Flash (SWF) <embed width="420" height="315" src="flashfile.swf"
autostart= “false”>
You tube <embed width="420" height="315"
src="https://www.youtube.com/embed / tgbNymZ7vqY
Method 2 : using Define an <object> element in your web page
<object> Tag Let the data attribute point to the Audio/Video/Flash/YoutubeID URL
Use the width and height attributes to specify the dimension of the player
Type= “Audio/mpeg” / “Video/mp4”
Sound or Audio <object width="420" height="315" data="soundfile.mp3"> </object>
(MP3/WAV)
Video(MP4) <object width="420" height="315" data="videofile.mp4"> </object>

Flash (SWF) <object width="420" height="315" data="flashfile.swf" autostart=

“false”> </object>
You tube <object width="420" height="315" data="https://www.youtube.com
/embed /tgbNymZ7vqY"> </object>
Method 3 : using Define an <A> element in your web page
<A> Tag Let the Href attribute point to the Audio/Video/Flash/YoutubeID URL
<A> Tag uses Helper Application to open file on system

Sound or Audio <A Href = "soundfile.mp3> click to open sound file </A>
(MP3/WAV)
Video(MP4) <A Href = "videofile.mp4 > click to open video file </A>
Flash (SWF) <A Href="flashfile.swf> click to open flash file </A>
You tube <A Href = "https://www.youtube.com/embed /tgbNymZ7vqY">
click to open YouTube Video</A>
Method 4 : using Define an <iframe> element in your web page
<iframe> Tag Let the src attribute point to the Audio/Video/Flash/YoutubeID URL
Use the width and height attributes to specify the dimension of the player
Sound or Audio <iframe width="420" height="315" src="sound.mp3"> </iframe>
(MP3/WAV)
Video(MP4) <iframe width="420" height="315" src="sound.mp4"> </iframe>
Flash (SWF) <iframe width="420" height="315" src="sound.swf"> </iframe>
You tube <iframe width="420" height="315"
src=" https://www.youtube.com/embed /tgbNymZ7vqY "> </iframe>

CLASS 12/WEB APP/2023-24

 Customizing and Embedding Multimedia WEB-APPLICATION (803)

TAGs Description
Method 5 : using <audio> & <video> element provides a standard way to embed audio
HTML5 Tag and video in web pages. both works in most of the modern web
<Audio> & browsers.
<Video> Tag Define an <audio> or <video>element in your web page
Let the <source> element’s src attribute point to the Audio/Video
URL
Use the width and height attributes to specify the dimension of the
player • Type= “Audio/mpeg” / “Video/mp4”
Video(MP4) <video width="320" height="240" controls poster="web.jpg">
<source src="1.mp4" type="video/mp4">
<source src="1.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Sound or Audio < audio width="320" height="240" controls poster="web.jpg">
(MP3/WAV) <source src="1.mp3" type="audio/mp4">
<source src="1.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Steps to add 1. In your browser, go to the YouTube video that you want to
YouTube/ Vimeo
embed.
Video in HTML File
2. Under the video, click Share .
3. Click the Embed word.
4. Then from the box that appears, copy the HTML code.
5. Paste the code in html file where you want to place it
<Bgsound> Tag The bgsound tag does not open a control bar for the user to turn off
works only with the music
Internet Explorer <bgsound src="musicfilename.mid" loop="5" />

Format MIME-type Codec

MP4 video/mp4 H264 video codec and AAC audio codec
WebM video/webm VP8 video codec and Vorbis audio codec
Ogg video/ogg Theora video codec and Vorbis audio codec
MP3 Audio/mpeg
Wav Audio/wav
Ogg Audio/wav

CLASS 12/WEB APP/2023-24

 Customizing and Embedding Multimedia WEB-APPLICATION (803)

CLASS 12/WEB APP/2023-24

Customizing and Embedding Multimedia WEB-APPLICATION(803)

Software which help to make web ready video along with HTML code to integrate

1. Freemake Video Converter

If we don't want to outsource video hosting to third-party websites, it's possible to make a video web-
ready with the help of Free Video Converter from Freemake.com. This video converter outputs to Flash
FLV and SWF formats. The main advantage of this tool is that it provides ready HTML code and
step-by-step instructions on how to embed it. Alternatively, we can convert the videos to HTML5
supported format, the converter will prepare all three video variants in a batch and show how to integrate
them into HTML5 markup. The software is for Windows only.

2. OEmbed
OEmbed is an open standard for embedding videos and images into a website. We can use the video
URL available on YouTube, Vimeo, Dailymotion, Flickr, Scribd,Hulu and supported resources. The
simple API allows websites to display embedded content when a user posts a link to that resource,
without having to parse the resource directly. So we don't have to copy and paste HTML code from
a hosting website every time we wish to embed a video. The best example of OEmbed integration
is Facebook’s status update: when we paste a YouTube link in the status bar, it is automatically rendered
in the video player. OEmbed easily integrates into WordPress via Shortcode API, the instructions are
provided

3. Quick Media Converter

Quick Media Converter is another Windows-based converter for audio and video. It outputs to Flash,
QuickTime, RealMedia, H.264, OGG, so it is possible to make a streaming video for HTML or
HTML5 web integration. Video parameters are easily customizable. However, no embed code or batch
mode conversions are provided.

4. Free Video Coding

Free Video Coding is an online service which helps us to create a web video player. Once we enter the
website, we get into the FreeVideoCoding wizard. We just need to answer simple questions and the
app will create custom HTML video codes based on the answers. Then we can choose WMV,
MOV, SWF, FLV, RM, MPEG, and even AVI for the output.

5. Video Lightbox
Video LightBox is a wizard program for Windows and Mac that helps users easily insert video to the
website or blog, in a few clicks without writing a single line of code. It is free for non-commercial use,
business licenses need to purchase it. To embed a video, we need to add a video URL (from
YouTube, Facebook, Google Video, Metacafe, Vimeo, MySpace) or drag and drop a desktop
video file, then select the template and publish the result to our website via a built-in FTP
client. Video LightBox offers a wide range of video player templates: rounded, rectangular, in
Polaroid, Mac, Facebook or even a yellow sticker style.

6. Easy HTML 5 Video

Easy HTML5 Video, as the name hints, is developed to convert videos into HTML5 supported WebM,
MP4, and OGG formats. It provides all formats in a batch, embed code and Flash fallback. Plus, it
features additional options such as the ability to publish video from the software interface, specify
controls for the HTML5 video player, select the video thumbnail, resize video and add a watermark. The
program works for Windows and Mac OS, to use it for business purpose, it is required to buy
a license for the same.

CLASS 12/WEB APP/2023-24 @VKS-LEARNING-HUB

Customizing and Embedding Multimedia WEB-APPLICATION(803)

Various Quick and Easy Ways to Embed MP3 Files into the Site

Simple Player with Editable Parameters

a) Using the Object Tag:
Apart from the non standard Embed tag, we can also use the <object> tag for embedding various media
into our web pages. But, it is not still effective for crossbrowser functions.

You can specify some parameters related to the document with the param tag.
Parameters can be height, width, background color, loop, and autoplay. IE
sometimes needs a src parameter to understand the location
Example Code:
<object data="music.wav" type="audio/x-mplayer2" width="320" height="240">
<param name="src" value="music.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
<param name="bgcolor" value="#FFFFFF">
Hear the sound : <a href="music.wav">music</a>
</object>

Type attribute specifies the application/media player type you are using. We can use
the following types for our media player:
1) Windows Media Player : type="application/x-mplayer2".
2) Quicktime: type="video/quicktime".
3) RealPlayer: type="audio/x-pn-realaudio-plugin".

b) Google Reader MP3 Player

Google Reader has an inbuilt MP3 player that is pretty much the same as Gmail player but it also
works on non-Google websites. Google has an advantage that it is a free resource.

<embed type="application/x-shockwaveflash"flashvars="audioUrl=MP3_FILE_URL"
src=http://www.google.com/reader/ui/3523697345-audio-player.swf width="400px" height="27px"
quality="best"></embed>

<audioUrl=http://LINK" width="400" height="27" allowscriptaccess="never" quality="best"

bgcolor="#ffffff" wmode="window" flashvars="playerMode=embedded">

c) Yahoo! MP3 Player (inactive)

Yahoo! offers a code generator (Easy Listener) to help us to create a Flash based MP3 player that
matches our website color theme and layout.

d) Odeo MP3 Player (inactive)

Odeo offers a pretty impressive MP3 player that works perfect in web pages as well as RSS readers but
a small issue is that Odeo Player requires you to type the exact duration of the song in the embed code

e) MixPod creates a free flash widget to embed into our site. we get a plethora of great design options,
embedded song information including artist and song name, the ability to adjust the color scheme to
match that of our site, and access to popularsongs and playlists.
MixPod is just one of many providers of free flash players you can embed into your
site.

CLASS 12/WEB APP/2023-24 @VKS-LEARNING-HUB

 Customizing and Embedding Multimedia WEB-APPLICATION(803)

Embedding Flash Files in Web Pages

Different ways to Embed Flash file into a Web Page
A) Inserting Flash into a Dreamweaver Page
Inserting Flash into Dreamweaver is a pretty straightforward process. Within
Dreamweaver,
pull down the Insert menu  select Media, then select Flash

B) Inserting Flash into Web Pages Manually with Code

To insert Flash onto a web page or content management system manually, we must first
upload the SWF file to a web server using a protocol called FTP or through an upload
form on the content management system.
Once we have the URL to our SWF file on the web, we can use the code below for all
Flash content.:
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>

A third method for embedding Flash content is to use some JavaScript programming code
to embed Flash content. This is generally seen as the best method, as it circumvents lots of
issues and bugs with embedding Flash across multiple browsers;

C) Steps for Embedding Flash Files (SWF files) is Shown below:

Step 1: Upload the SWF file(s) to an external Web host using FTP.
Step 2: Once we have successfully uploaded the SWF files to an external Website,add the
following code to any of the sections in the Web page,
<script language="javascript">
document.write('&lt;objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000"
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=9.0.0.0 width="720" height="540" ID="swf" VIEWASTEXT>');
document.write('&lt;param name="movie" value=http://www.wondershare.com/pro/flash-
gallery-factory-deluxe.html
/>');
document.write('&lt;param name="quality" value="high" />');
document.write(' &lt;param name="wmode" value="window" />');
document.write('&lt;param name="allowScriptAccess" value="always" />');
document.write('&lt;param name="allowFullScreen" value="True" />');

CLASS 12/WEB APP/2023-24 @VKS-LEARNING-HUB

Customizing and Embedding Multimedia WEB-APPLICATION(803)

document.write(' &lt;embedsrc=http://www.flash-slide-show.com/demo.swf
quality="high" name="sf" allowScriptAccess="always" allowFullScreen="true"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/xshockwave-flash" width="720" height="540">&lt;/embed>');
document.write('&lt;/object>');
'&lt;script>

Embed tells the browser an embed sound is here -- go get the plug-in.
Remember, embed commands are associated with plug-ins.
 Note: If no plug-in is available, the browser will do one of three things:
1) Do nothing. This is true of very early level browsers or browsers other than
Netscape.
2) Put up a dialogue box asking you how you want to handle the file.
3) Tell you a plug-in is needed and ask you if you'd like to go get it.

CLASS 12/WEB APP/2023-24 @VKS-LEARNING-HUB