HTML - tutorial - 07 - media

revision:


Content

Multimedia comes in many different formats. The HTML <video> element is used to show a video in HTML. The HTML <audio> element is used to play an audio file in HTML. HTML plugins are computer programs that extend the standard functionality of the browser.


Multimedia comes in many different formats.

top

It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats.

Browser support: the first web browsers had support for text only, limited to a single font in a single color. Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia formats: multimedia elements (like audio or video) are stored in media files. The most common way to discover the type of a file, is to look at the file extension. Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

Common video formats: there are many video formats out there. The MP4, WebM, and Ogg formats are supported by HTML.The MP4 format is recommended by YouTube.

Common audio formats: MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, MP3 is the choice.


The HTML <video> element is used to show a video in HTML.

top

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. If height and width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

To start a video automatically use the "autoplay" attribute. The "autoplay" attribute does not work in mobile devices like iPad and iPhone.

There are three supported video formats: MP4, WebM, and Ogg.

The HTML DOM defines methods, properties, and events for the <video> element. This allows you to load, play, and pause videos, as well as setting duration and volume. There are also DOM events that can notify you when a video begins to play, is paused, etc.


The HTML <audio> element is used to play an audio file in HTML.

top

How it works:

The "controls" attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

There arethree supported audio formats: MP3, WAV, and OGG.

The HTML DOM defines methods, properties, and events for the <audio> element. This allows you to load, play, and pause audios, as well as set duration and volume. There are also DOM events that can notify you when an audio begins to play, is paused, etc.


HTML plugins are computer programs that extend the standard functionality of the browser.

top

They were designed to be used for many different purposes: to run Java applets, to run Microsoft ActiveX controls, to display Flash movies, to display maps, to scan for viruses, to verify a bank id.
Warning ! Most browsers no longer support Java Applets and plug-ins. ActiveX controls are no longer supported in any browsers. The support for Shockwave Flash has also been turned off in modern browsers.

The <object> element is supported by all browsers. The <object> element defines an embedded object within an HTML document. It was designed to embed plug-ins (like Java applets, PDF readers, and Flash Players) in web pages, but can also be used to include HTML in HTML.

example: <object> tag
code:
                <div>
                    <object class="examples" width="50%" height="200px" data="../pics/1.jpg"></object> 
                    <object class="examples" width="50%" height="200px" data="../pics/2.jpg"></object> 
            

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.

example: <embed> tag
code:
                <embed class="examples" src="../pics/4.jpg" width="50%" height="200px" > 
            

Note that the <embed> element does not have a closing tag. It can not contain alternative text. The <embed> element can also be used to include HTML in HTML.