Html media

HTML 5
MEDIA ELEMENTS
Call US: +91-9915337448 Email Us: info@webtechlearning.com

HTML Multimedia
• Multimedia on the web, is sound, music, videos, movies, and
animations.
• 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.

Multimedia Formats
• Multimedia elements (like sounds or videos) are stored in
media files.
• Multimedia files also have their own formats and different
extensions like:
• .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

HTML5 Video
• Before HTML5, there was no standard for showing videos on a
web page.
• Before HTML5, videos could only be played with a plug-in (like
flash).
• The HTML5 <video> element specifies a standard way to
embed a video in a web page.

The HTML <video> Element
• To show a video in HTML, use the <video> element:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>

How it Works
• The controls attribute adds video controls, like play, pause,
and volume.
• It is a good idea to always include width and height attributes.
• Multiple <source> elements can link to different video files.
The browser will use the first recognized format.

HTML <video> Autoplay
• To start a video automatically use the autoplay attribute:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

HTML5 Audio
• HTML5 provides a standard for playing audio files.
• Before HTML5, there was no standard for playing audio files
on a web page.
• Before HTML5, audio files could only be played with a plug-in
(like flash).
• The HTML5 <audio> element specifies a standard way to
embed audio in a web page.

The HTML <audio> Element
• To play an audio file in HTML, use the <audio> element:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

HTML Audio - How It Works
• The controls attribute adds audio controls, like play, pause,
and volume.
• Multiple <source> elements can link to different audio files.
The browser will use the first recognized format.

HTML Plug-ins
• The purpose of a plug-in, is to extend the functionality of the
HTML browser.
• Helper applications are also called plug-ins.
• Plug-ins can be added to web pages with the <object> tag or
the <embed> tag.

The <object> Element
• The <object> element is supported by all browsers.
• The <object> element defines an embedded object within an
HTML document.
• It is used to embed plug-ins (like Java applets, PDF readers,
Flash Players) in web pages.

The <object> Element
• For Examples
<object width="400" height="50" data="bookmark.swf"></object>
<object width="100%" height="500px" data="snippet.html"></object>
<object data="audi.jpeg"></object>

The <embed> Element
• The <embed> element is supported in all major browsers.
• The <embed> element also defines an embedded object
within an HTML document.
• Web browsers have supported the <embed> element for a
long time. However, it has not been a part of the HTML
specification before HTML5.

The <embed> Element
• For Examples
<embed width="400" height="50" src="bookmark.swf">
<embed width="100%" height="500px" src="snippet.html">
<embed src="audi.jpeg">

HTML YouTube Videos
• The easiest way to play videos in HTML, is to use YouTube.
• Different versions of different browsers support different
video formats.
• Converting videos to different format can be difficult and time
consuming.
• An easier solution might be to let YouTube play the videos in
your web page.

Playing a YouTube Video in HTML
To play your video on a web page, do the following:
• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Add any other parameters to the URL

Using iFrame (the recommended
method)
• For Example
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

YouTube Parameters
Autoplay
• Value 0 (default): The video will not play automatically when the player loads.
• Value 1: The video will play automatically when the player loads.
Controls
• Value 0: Player controls does not display. The video loads immediately.
• Value 1 (default): Player controls display. The video loads immediately.
• Value 2: Player controls display, but the video does not load before the user
initiates playback.

YouTube Parameters
Loop
• Value 0 (default): The video will play only once.
• Value 1: The video will loop (forever).
Playlist
• A comma separated list of videos to play (in addition to the original URL).

Html media

More Related Content

What's hot

Similar to Html media

More from Webtech Learning

Recently uploaded

Html media