Introduction:
In this article I am going to explain about the concept of Multimedia in JavaScript and how to use it in JavaScript.
Multimedia comes in many different formats, it can be text, videos, music, sound animations and much more.
Today we can find these multimedia elements on the web being embedded on the web page.
Modern Web Browsers which are in market have the support of a number of multimedia formats.
Multimedia elements have their own file formats which are .swf, .mp3, .mp4, .wmv.
Various Video Formats
Formats | File | Descriptions |
AVI | .avi | It was developed by Microsoft. Its full form is Audio Video Interleave. It is supported by most of the computer on windows platform and by most popular browsers too. |
WMW |
.wmw |
This format was also developed by Microsoft. It works good but we cannot play in non-windows platform, for that we have to install a separate component. |
Flash |
.swf,.flv |
The Flash (Shockwave) format was developed by macromedia. Te shockwave format requires extra component to play. This components comes preinstalled with Firefox and Internet Explorer. |
Mpeg-4 |
.mp4 |
.mp4 is the new format for the internet. You tube recommends .mp4 format. You tube accepts all formats but it converts them to .flv or mp4. |
QuickTime |
.mov |
QuickTime was developed by apple, It is a common format on the internet but the problem is that QuickTime movies cannot be played on Windows Platform.
|
|
|
|
The JavaScript Navigator Object:
The JavaScript Navigator Object includes a child object named plug-ins which is an array type which contains
one entry of each plug-ins installed on the browser. This feature is supported by Mozilla and Netscape.
Playing Audio in HTML
Playing Audio in HTML is not easy we must make sure that our audio files will work on all Browsers.
What is Plug-ins :
Plug-ins are small programs that extends the functionality of a browser. Plug-ins can be added to an
HTML Page using <embed> and <object> tag.
Checking for plug-ins:
Each plug-ins has entry in the array and contains following fields:
1. Name: This is a name of the field.
|
2. Filename : This file is the executable file which was used to install the plug-in.
|
3. Description: It is the description of the plug-in which was supplied by the developer.
|
4. mimeTypes : It is an array with one entry for each MIME type supported by the plug-in.
|
Using <embed> tag:
The <embed> tag defines the a container for non-HTML contents.
Example:
<embed height="200" width="200" src="songs.mp3">
Using the <object> tag:
The <object> tag can also serve as a container for non-HTML or external contents.
Example:
<object height="200" width="200" src="songs.mp3">
HTML5 Audio Element:
The HTML5 <audio> tag is used to define sound such as music or other audio streams.
This audio elements works in all browsers.
Example:
<audio controls="controls">
<source src="songs.mp3" type="audio/mp3">
</audio>
HTML <video> Tag:
Like audio tag there is a video tag, Video Tag is introduced in HTML 5, which helps to play videos.
If the browsers do not support video element then any text written between <video> </video>
tag will be displayed in the browser.
Example:
<video width="350" height="275" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>
Some Optional Attribute in HTML5:
Attributes |
value | Description |
autoplay | autoplay | This attribute will start the video as soon as it is ready. |
controls | controls | This attribute will specify that the video controls will be displayed. |
loop | loop | It will start the video over again. |
poster | URL | It displays the image while the video is downloading. |
src | URL | It specifies the URL of the file. |
width | pixels | It will set the width of the player. |
height | pixels | It sets the height of the player. |
Conclusion :
In this article I explained about how to work with multimedia controls in HTML because there are number
of times when we have to give our websites features to play sound and videos, so I think that this article
will help in working with that.
Leave Comment