Introduction
This chapter demonstrate about the HTML Media like Image, audio, video files on a web pages. Media files can be edited, manipulated, or browsed by using some related software. Which also known as digital media. Following are the concepts covered.
- Media Events
- Audio
- Video
Description
In order to handle the media files many media events are embedded in HTML documents by using <audio> and <video> elements. Following are some of the events listed below.
| Event | Description |
|---|---|
| aboart | The event get into action If media playing is restarted from the beginning. |
| play | The event get into action if play back media start after pause event. |
| pause | The event get into action when media paused. |
| playing | the event get into action when media starts playing, |
| loadstart | The event get into action when media load started. |
| loadeddata | The event get into action when the first frame of the media finished loading. |
| seeked | The event get into action when the seek operation of media completed. |
| seeking | The event get into action when seek operation started. |
| ratechange. | The event get into action when the playback speed changes. |
| volumechange | The event get into action when the volume has been changed. |
| suspend | The event get into action when media loading is suspended. |
| waiting | The event get into action when requested for operation. |
Description
HTML media supported by all the latest browsers following are the browser versions supported by HTML.
- Chrome 4.0
- Safari 4.0
- Mozilla Firefox 3.5
- Internet Explorer 9.0
- Opera 10.5
Description
HTML Audio is inserted by audio file in to the web pages. The web page may contain one or more audio files which are inserted using the src element. Following are the types of audio tags.
- <audio> The tag describes the sound content
- <source> The tag demonstrates the several media resources like video or audio.
Description
HTML audio have the various types of audio files. Where each type of audio file have its own quality of sound. Following are some types audio files .
- <MP3> MP3 format file supports audio/mpeg media type files.
- <Ogg> Ogg format file supports audio/Ogg media type file.
- <Wav> Wav format files support audio/Wav media type files.
Description
HTML Audio element have different types of attributes to control the functionalities of Audio, following are the some of the attributes.
| Attribute | Description |
|---|---|
| autoplay | By using the auto play attribute, the audio file will play automatically after the data has been loaded. |
| autobuffer | By using the autobuffer attribute, audio starts buffering automatically. |
| controals | By using the control attribute user can control the audio files. |
| preload | By using the preload attribute the page and audio file get loaded. |
| src | The src attribute defines the url of the audio file. |
Description
User can create different audio files using HTML Audio elements. The code below demonstrate creating an audio player by using HTML audio element.
[html]
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following out put as shown in below image.
Description
The purpose of HTML video is playing the videos without using any plugins on a web pages. In order to add the video file user need to use the <video> tags and src attribute which is used to identify the source of the media. In order to play and pause the media add the control attribute. The snippet code below demonstrate simple form to add the video file.
<video src=”splessons.mp4” width=”200” height=”200” controls>
</video>
Description
In order to control the videos on a web pages, HTML tags have various attributes those are listed below.
The snippet code below demonstrates embedding the video file into the web pages by adjusting the video size as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="315" src="https://www.youtube.com/embed/TZ1pCAtaCl4" frameborder="0" allowfullscreen>
</iframe>
</body>
</html>
[/html]
Result
By running the above code in the preferred browser will play the video as output as shown in below.
| Attribute | Description |
|---|---|
| autoplay | By using the autoplay attribute the video get played automatically. |
| autobuffer | By using the autobuffer attribute the video get buffered automatically. |
| controals | By using the control attribute video get controlled by providing options like playback, pause/resume, seeking, volume, etc. |
| height | Height attribute is used to adjust height of the video in pixels. |
| loop | By using loop the video automatically seek from the starting after ending. |
| src | src attribute is the video url which can embedded into the web page. |
| width | width attribute is used to adjust the width of the video in pixels. |
Key Points
- Sound, music, videos and animations are know as multimedia.
- Audio files are available in various formats.
- src is not mandatory for video file.