Working with Multimedia
Setting the Background Sound Using the Audio Element
you can add an audio file to be played as the background sound of a webpage.
the audio file starts playing when the webpage loads
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Setting Background Sound</TITLE>
</HEAD>
<BODY >
<H1>Playing Background Music </H1>
<BR/>
<AUDIO src="Music.ogg" autoplay="true>
Your browser does not support the AUDIO element.
</AUDIO>
</BODY>
</HTML>
you can play the audio file multiple times by using the loop attribute of the AUDIO element.
you can also display the controls, such as play button and volume button, on the web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Setting Background Sound</TITLE>
</HEAD>
<BODY >
<H1>Playing Music </H1>
<BR/>
<AUDIO src="Music.ogg" controls autoplay="true >
Your browser does not support the AUDIO element.
</AUDIO>
</BODY>
</HTML>
Using the VIDEO Element
the video element is used to display a video file in a web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using VIDEO Element</TITLE>
</HEAD>
<BODY>
<H1>Using the VIDEO Element</H1>
<VIDEO src="Bunny.ogv" controls></VIDEO>
</BODY>
</HTML>
you observe that the video is played after the webpage loads
Embedding an audio file using the Embed Element
the Embed element allows you to add the multimedia files, such as audio and video on a webpage.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Embedding an Audio File</TITLE>
</HEAD>
<BODY>
<H1>Playing Background Music</H1>
<BR/>
<EMBED src="Music.mp3" width=600 height=100></EMBED>
</BODY>
</HTML>
In safari web browser, you can listen to a music but cannot navigate, play, and pause the audio file.
the chrome web browser displays the media player in which you can navigate, play, and pause the audio file.
Embedding a Video file using the Embed element
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Embedding a Video File</TITLE>
</HEAD>
<BODY>
<H1>Playing Video "Wildlife"</H1>
<BR/>
<EMBED src="Wildlife.wmv" width=400 height=200></EMBED>
</BODY>
</HTML>
Embedding a video file from other websites
Different websites, such as www.youtube.com and www.video.google.com, allow you to display the videos in your website by providing the embedding code, which contains the Embed element to embed the video on the website.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding an video File</TITLE>
</HEAD>
<BODY>
<H1>Embedding a video from other websites</H1>
<OBJECT width="640" height="385">
<PARAM name="movie" value="http://www.youtube.com/v/W2VygftZSCs?fs=1&hl=en_US"></PARAM>
<PARAM name="allowFullScreen" value="true"></PARAM>
<PARAM name="allowscriptaccess" value="always"></PARAM>
<EMBED src="http://www.youtube.com/v/W2VygftZSCs?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></EMBED></OBJECT>
</BODY>
</HTML>
a video file is embedded from youtube.
we have used object element, which contains the PARAM and EMBED elements.
the PARAM element defines the parameters for the OBJECT element and the EMBED element embeds the video from youtube.
Adding Multimedia files Using the Object Element
You can add an object on a web page using the OBJECT element.
The objects can be an audio file, a video file, or an image.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding an Audio File</TITLE>
</HEAD>
<BODY>
<H1>Playing Background Music using the OBJECT Element</H1>
<BR/>
<OBJECT data="Music.mp3" >
</OBJECT>
</BODY>
</HTML>
you can add a video file on a web page using the OBJECT element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding a Video File</TITLE>
</HEAD>
<BODY>
<H1>Playing Video "Wildlife"</H1>
<BR/>
<OBJECT data="Wildlife.wmv" type="video/wmv" width="500" height="300" />
</BODY>
</HTML>
Initializing an Object Using the PARAM Element
you can add different objects on a web page using the object element.
the param element can be used to pass the parameters to the object.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Initializing an Object</TITLE>
</HEAD>
<BODY>
<H1>Initializing an Object</H1>
<BR/>
<OBJECT classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">
<PARAM name="BorderStyle" value="1" />
<PARAM name="MousePointer" value="0" />
<PARAM name="Enabled" value="1" />
<PARAM name="Min" value="0" />
<PARAM name="Max" value="10" />
</OBJECT>
</BODY>
</HTML>
Using the Figur and Figcaption Elements
the figure element is used to group different images and figures;
wheres the figcaption element is used to provide the caption to these groups.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the FIGURE and FIGCAPTION Elements</TITLE>
</HEAD>
<BODY>
<H1>Displaying an Image of a Car</H1>
<BR/>
<FIGURE>
<IMG src="car.jpg" alt="A small Car."> <BR/>
<FIGCAPTION>Figure showing you a small car.</FIGCAPTION>
</FIGURE>
</BODY>
</HTML>
Setting the Background Sound Using the Audio Element
you can add an audio file to be played as the background sound of a webpage.
the audio file starts playing when the webpage loads
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Setting Background Sound</TITLE>
</HEAD>
<BODY >
<H1>Playing Background Music </H1>
<BR/>
<AUDIO src="Music.ogg" autoplay="true>
Your browser does not support the AUDIO element.
</AUDIO>
</BODY>
</HTML>
you can play the audio file multiple times by using the loop attribute of the AUDIO element.
you can also display the controls, such as play button and volume button, on the web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Setting Background Sound</TITLE>
</HEAD>
<BODY >
<H1>Playing Music </H1>
<BR/>
<AUDIO src="Music.ogg" controls autoplay="true >
Your browser does not support the AUDIO element.
</AUDIO>
</BODY>
</HTML>
Using the VIDEO Element
the video element is used to display a video file in a web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using VIDEO Element</TITLE>
</HEAD>
<BODY>
<H1>Using the VIDEO Element</H1>
<VIDEO src="Bunny.ogv" controls></VIDEO>
</BODY>
</HTML>
you observe that the video is played after the webpage loads
Embedding an audio file using the Embed Element
the Embed element allows you to add the multimedia files, such as audio and video on a webpage.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Embedding an Audio File</TITLE>
</HEAD>
<BODY>
<H1>Playing Background Music</H1>
<BR/>
<EMBED src="Music.mp3" width=600 height=100></EMBED>
</BODY>
</HTML>
In safari web browser, you can listen to a music but cannot navigate, play, and pause the audio file.
the chrome web browser displays the media player in which you can navigate, play, and pause the audio file.
Embedding a Video file using the Embed element
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Embedding a Video File</TITLE>
</HEAD>
<BODY>
<H1>Playing Video "Wildlife"</H1>
<BR/>
<EMBED src="Wildlife.wmv" width=400 height=200></EMBED>
</BODY>
</HTML>
Embedding a video file from other websites
Different websites, such as www.youtube.com and www.video.google.com, allow you to display the videos in your website by providing the embedding code, which contains the Embed element to embed the video on the website.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding an video File</TITLE>
</HEAD>
<BODY>
<H1>Embedding a video from other websites</H1>
<OBJECT width="640" height="385">
<PARAM name="movie" value="http://www.youtube.com/v/W2VygftZSCs?fs=1&hl=en_US"></PARAM>
<PARAM name="allowFullScreen" value="true"></PARAM>
<PARAM name="allowscriptaccess" value="always"></PARAM>
<EMBED src="http://www.youtube.com/v/W2VygftZSCs?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></EMBED></OBJECT>
</BODY>
</HTML>
a video file is embedded from youtube.
we have used object element, which contains the PARAM and EMBED elements.
the PARAM element defines the parameters for the OBJECT element and the EMBED element embeds the video from youtube.
Adding Multimedia files Using the Object Element
You can add an object on a web page using the OBJECT element.
The objects can be an audio file, a video file, or an image.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding an Audio File</TITLE>
</HEAD>
<BODY>
<H1>Playing Background Music using the OBJECT Element</H1>
<BR/>
<OBJECT data="Music.mp3" >
</OBJECT>
</BODY>
</HTML>
you can add a video file on a web page using the OBJECT element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Adding a Video File</TITLE>
</HEAD>
<BODY>
<H1>Playing Video "Wildlife"</H1>
<BR/>
<OBJECT data="Wildlife.wmv" type="video/wmv" width="500" height="300" />
</BODY>
</HTML>
Initializing an Object Using the PARAM Element
you can add different objects on a web page using the object element.
the param element can be used to pass the parameters to the object.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Initializing an Object</TITLE>
</HEAD>
<BODY>
<H1>Initializing an Object</H1>
<BR/>
<OBJECT classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100" height="50">
<PARAM name="BorderStyle" value="1" />
<PARAM name="MousePointer" value="0" />
<PARAM name="Enabled" value="1" />
<PARAM name="Min" value="0" />
<PARAM name="Max" value="10" />
</OBJECT>
</BODY>
</HTML>
Using the Figur and Figcaption Elements
the figure element is used to group different images and figures;
wheres the figcaption element is used to provide the caption to these groups.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the FIGURE and FIGCAPTION Elements</TITLE>
</HEAD>
<BODY>
<H1>Displaying an Image of a Car</H1>
<BR/>
<FIGURE>
<IMG src="car.jpg" alt="A small Car."> <BR/>
<FIGCAPTION>Figure showing you a small car.</FIGCAPTION>
</FIGURE>
</BODY>
</HTML>
No comments:
Post a Comment