Vivek Kumar Srivastava
Vivek Kumar Srivastava

Notes Unit 2 Customizing and Embedding Multimedia Components in Web Pages

HomeWeb Application (803)NotesNotes Unit 2 Customizing and Embedding Multimedia Components in Web Pages
Web Application (803)Notes

CHAPTER 2:

Customizing and Embedding Multimedia Components in Web Pages

 

2.1  Customizing and Embedding Multimedia Components in Web Pages

Assessment:

Answer the following questions:

Q1. Define multimedia and its various types?

Answer: 

  • 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

 

Q2. Advantages and Disadvantages of multimedia in web pages?

Answer:

S.no

ADAVANTAGE

DISADVANTAGE

1.

Greater Immersion: Adding multimedia elements to a Web page make it easier to draw in viewers. (Video is the most popular multimedia addition, sites also add audio and interactive content to attract and hold the attention of the viewers)

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. As a result, the site appears lower in search results, which affects its overall traffic flow.

2.

Enhanced Page Rankings for SEO: Surveys conducted by Forrester Research indicate that video content, done correctly, is a major benefit to a site’s overall SEO strategy.(The company discovered in 2010 that websites with videos were

53 times more likely than text-based websites.)

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.(screen that says "Please Wait. Loading“)

3.

Better Branding: While HTML 5 text-based sites are more elaborate than websites of the past, they are still limited in many ways.(multimedia sites are frequently preferred by marketing departments because of their ability to completely

present branding.)

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.

 

Q3. Define Internet Browser.

Answer: An internet browser, also known as a web browser or simply a browser, is a software program that you use to access the internet and view web pages on your computer. You can think of your browser as your gateway to the internet.

 

Q2. Why we need internet browser? Also explain web page?

Answer: NEED OF INTERNET BROWSER

The main purpose of an internet browser is to translate, or render, the code that websites are designed in into the text, graphics, and other features of the web pages that we are all used to seeing today. 

OR

 

Internet Browser is the software, which helps you to access web pages from various websites.

 

WEB PAGE:

A Web page is a formatted text document on the Web that a Web browser can display. Most Web pages on the Internet allow you to quickly move to another Web page. You can do this by clicking a hyperlink, commonly called a link. Clicking a link opens the new Web page in your Web browser. You can access existing Web pages or even create and publish new Web pages on the Web. You can create Web pages by using a software language known as Hypertext Markup Language (HTML). Web browsers use HTML to display Web pages. Hypertext is a method of linking text with other text that helps you to easily browse through related non sequential topics on the same page or on other Web pages.

 

 

 

Q4. List 5 internet browser which supports multimedia?

Answer: Chrome, Opera, Firefox, Safari and Internet Explore 8 are internet browser, support multimedia.

 

Q5. Full form of HTML is Hypertext Markup Language and XML is Extensible Markup Language

Q6. Define XML.

Answer: In computing, Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable

 

 

2.2 Compatible Multimedia File Formats for Web Pages

 

Answer the following questions:

Q1. How can you differentiate between movies, image and sound data without open ?

Answer: We can differentiate between movies, image and sound data without open by their file format or extension. For check any file format or extension go to properties by clicking right click on file. 

 

Q2. Why today’s web site containing more and more multimedia?

Answer: Multimedia represents various types of media content, used together. If we have a text with pictures, we have multimedia. If we add a video, we have multimedia too. The use of multimedia in websites has helped the Internet evolution a lot, since it gave web designers a job and made the web pages much more interesting for everyone. And with today’s connection speeds, we can all enjoy much better looking websites, which are also rich in media content – you can watch a video directly from the site without the need to download it, listen to a song or browse a high quality image gallery. Multimedia content is what shapes the Internet as we know it.

 

Q3. Write tags which are used in to add images in web page?

Answer: <img src="image.gif" alt="image" height="42" width="42">

 

 

 

 

 

 

 

 

 

 

2.3 Embedding Audio in Web Pages 2.4 Embedding Video in Web Pages, 

2.5 Embedding Flash Files in Web Pages

Assessment:

Answer the following questions:

Q1. Write tags used in to add audio file in web page?

Answer : 

<!DOCTYPE html>

<html>

<body>

 

<audio controls>

 

     <source src="sound.mp3" type="audio/mpeg">

     Your browser does not support the audio element.

</audio>

 

<p><strong>Note:</strong> The audio tag is not supported in Internet Explorer 8 and earlier versions.</p>

 

</body>

</html>

In the above tag <audio> tag not supported by Internet Explore 8 and earlier version.

Different types of attribute use:

  1. “Controls” attribute use for show controls such as play, pause etc on web page.
  2. “ src “ attribute use for insert sound file in web page
  3. “type” attribute use for show file formate.

 

 

OR

<!DOCTYPE html>

<html>

<body>

 

<object>

<param name="autostart" value="true">

<param name="src" value="eureka.wav">

<param name="autoplay" value="true">

<param name="controller" value="true">

<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"

type="audio/wav" />

</object>

 

</body>

</html>

Steps for adding Audio in web page with the help of Object tag:

  1. Open the Web page in an HTML editor. (example: notepad)
  2. Start writing HTML codding.
  3. Under <body> tag write the <object> tag codding.
  4. We'll add 4 parameters to the object. 
  5. The first is "src" that tells the browser where to find the sound file. In this example, the sound file is eureka.wav and is found in the same directory as the Web page: <param name="src" value="eureka.wav" />
  6. If you want the sound file to play immediately after it's loaded, make the autostart parameter "true" otherwise make it "false": <param name="autostart" value="true" />
  7. The parameter autoplay is similar to autostart, just used by other browsers, set it the same as the autostart parameter: <param name="autoplay" value="true" />
  8. Use the controller parameter to tell the browser if a controller should be displayed to give your readers more control over the sound: <param name="controller" value="true" />
  9. At last close the </object> tag , then close </body> tag and </html> tag.

OR

 

<!DOCTYPE html>

<html>

<body>

 

<embed src="eureka.wav" controller="true" autoplay="true" autostart="True" type="audio/wav" pluginspage="http://www.apple.com/quicktime/download/" />

 

</body>

</html>

 

 

Steps for adding Audio in web page with the help of Embed tag:

  1. Open the Web page in an HTML editor. (example: notepad)
  2. Start writing HTML codding.
  3. Under <body> tag write the <embed> tag codding

<embed src="eureka.wav" controller="true" autoplay="true" autostart="True" />

  1. Add the correct MIME type for your sound file into the type attribute: 

<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"    

  type="audio/wav" /> 

  1. Add the pluginspage attribute so that people who don't have the correct plugin for your sound file can go download it. 
  2. For WAV files, I recommend QuickTime:

<embed src="eureka.wav" controller="true" autoplay="true" autostart="True"

type="audio/wav" pluginspage="http://www.apple.com/quicktime/download/" />

  1. At last </body> tag close and then </html> tag

 

Q2. Write tags used in to add video file in web page?

Answer: 

<html>

<head>

</head>

<body>

<videowidth="320"height="240"controls autoplay poster="video.jpg">

<sourcesrc="movie.mp4"type="video/mp4"/>

<sourcesrc="movie.ogg" type="video/ogg"/>

Your browser does not support the video tag.

</video>

</body>

</html>

Steps for adding Video in web page with the help of Video tag:

  1. Open the Web page in an HTML editor. (example: notepad)
  2. Start writing HTML codding.
  3. Under <body> tag write the <video> tag codding
  4. Different attribute use such as “width”,”height”, “controls”, “src”, “poster” tag use for display image at starting of video.

 

Q3. Write tags used in to add flash file in web page?

Answer: Flash file add with the help of two tag: The <object> tag, and The <embed> tag.

The <object> tag is the web standard for embedding content on to a web page, but

the <embed> is a carryover from the days of the Netscape browser, and is not

actually a valid tag in web standards. 

<html>

<head>

</head>

<body>

<object width="550" height="400">

<param name="movie" value="flash.swf">

<embed src="flash.swf" width="550" height="400">

</embed>

</object>

</body>

</html>

 

Q4. What is CSS and what are the current version available of it?                                                                                                                 

Answer: Cascading Style Sheets (CSS) describe how document are presented on screen, in print, or perhaps how they are pronounced. CSS provide easy and effective alternatives to specify various attributes (color, image etc) for the HTML Tags. CSS3, support all browser.

 

IMPORTANT QUESTION AND ANSWER

 

 

Q1. What are Important Tips and Measurements which should be taken Care of, to Use embed tag?

Answer: 

1. Don't validate your Web page with the embed tag. It won't validate because that tag is not part of the specification. But only Safari supports the object tag for sound.

2. Check out the embed tag for additional attributes. Many of them you can use as parameters on your object as well.

3. I recommend always setting the controller="true" attribute. That way, if someone doesn't want to hear sound on your Web page, they can turn it off.

4. For the most accessible (and valid) sound, just link to your sound file.                                                                      <a href="eureka.wav">Eureka sound file</a> .      That gives your customers the choice to listen or not.

 

Q2. What are the different  Ways to Embed MP3 Files into The Site?

Answer: The following are the different Ways to Embed MP3 Files into The Site: 

  1. Using the Object Tag:
  2. Google Reader MP3 Player
  3. Yahoo! MP3 Player (inactive)
  4. Yahoo Media Player
  5. Odeo MP3 Player (inactive)
  6. MixPod
  7. Helper Applications – A New search:

What Happens is this:

  • The browser gets the sound file and downloads the entire thing.
  • Once the download is complete, the helper application is launched.
  • The browser loads the sound file into the application.
  • The application plays the sound.

 

Offering a Sound Via Helper Application

If we have a sound, would like to offer, follow this format:

<A HREF="http://www.yoursite.com/filename.wav"> Click Here</A>

  1. Using a Plug-in: Plug-ins are programs that helps browser to perform at a higher level
  2. MIDI: It's an acronym that stands for Musical Instrument Digital Interface

 

Q3. What are the different Ways to Embed Video into a Web Page?

Answer: Following Different Ways to Embed Video into a Web Page:

  1. Youtube Embed Code
  2. Vimeo Embed Code
  3. Facebook Video Integration
  4. Html5 Video
  5. Freemake Video Converter
  6. Oembed
  7. Quick Media Converter
  8. Free Video Coding
  9. Video Lightbox
  10. Easy HTML 5 Video

 

Q4. What are the different ways to Embed Flash file into a Web Page?

Answer: Following different ways to Embed Flash file into a Web Page: 

  1. Inserting Flash into a Dreamweaver Page
  2. Inserting Flash into Web Pages Manually with Code

 

Q5. Difference between Frame and IFrame-

 

Answer: Frame: Frame is an HTML tag that is used for dividing the web page into various frames/windows. Used as <frame> tag, it specifies each frame within a frameset tag. 

For example-
<body>
<frameset cols=”45%,*”>
<frame src=”default1.jpg”>Default image 1</frame>
<frame src=”default2.html”>Default html file</frame>
</frameset>
</body>

 

IFRAME: Iframe as <iframe> is also a tag used in HTML but it specifies an inline frame, that means it is used to embed some other document within the current HTML document.

For example-
<body>
<iframe src=”default.jpg” name=”A” border=”20″></iframe>
 
</body>

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Connect with US

Subscribe to the newsletter and get updates from Patrick and his team straight to your Inbox. Never miss a new course launch or a new article!

© tagDiv. All rights reserved. Coaching PRO is a fresh multipurpose Prebuilt Website with a wide range of usability.

Resources

Articles

Socials