Hello guys! Wishing you all a happy Sunday from this end. Welcome to this my new tutorial post on JavaScript. In this tutorial i will be discussing about Multimedia in JavaScript.
JavaScript navigator object includes a child that is called plugins. This object is an array, with one entry for each plug-in installed on the web browser. The navigator.plugins object is only supported by Netscape, Firefox, and Mozilla web browser only.
JavaScript navigator object includes a child that is called plugins. This object is an array, with one entry for each plug-in installed on the web browser. The navigator.plugins object is only supported by Netscape, Firefox, and Mozilla web browser only.
Example
Below is an example that shows how to list out all the plug-in installed in your web browser.
<html>
<head>
<title>List of Plug-Ins</title>
</head>
<body>
<table border = "1">
<tr>
<th>Plug-in Name</th>
<th>Filename</th>
<th>Description</th>
</tr>
<script type = "text/javascript">
for ( i = 0; i < navigator.plugins.length; i ++ ) {
document.write( "<tr> <td>" ) ;
document.write( navigator.plugins[ i ].name ) ;
document.write( "<td><td>" ) ;
document.write( navigator.plugins[ i ].filename ) ;
document.write( "<td><td>" ) ;
document.write( navigator.plugins[ i ].description) ;
document.write( "<td><tr>" ) ;
}
</script>
</table>
</body>
</html>
<head>
<title>List of Plug-Ins</title>
</head>
<body>
<table border = "1">
<tr>
<th>Plug-in Name</th>
<th>Filename</th>
<th>Description</th>
</tr>
<script type = "text/javascript">
for ( i = 0; i < navigator.plugins.length; i ++ ) {
document.write( "<tr> <td>" ) ;
document.write( navigator.plugins[ i ].name ) ;
document.write( "<td><td>" ) ;
document.write( navigator.plugins[ i ].filename ) ;
document.write( "<td><td>" ) ;
document.write( navigator.plugins[ i ].description) ;
document.write( "<td><tr>" ) ;
}
</script>
</table>
</body>
</html>
Output
Below is the output of the above example.
| Plug-in Name | Filename | Description |
|---|
You can also read our tutorial post on: Introduction to JavaScript Animation with examples
Checking for Plug-Ins
Each plug-in has an entry in the array. Each entry has the following properties below -
- name - This is the name of the plug-in.
- filename - Is the executable file that was loaded to install the plug-in.
- description - This is the description of the plug-in, that is been supplied by the developer.
- mimeTypes - Is an array with one entry for each MIME type supported by the plug-in.
You can make use of all these properties listed above in a script to find out the installed plug-ins and then using JavaScript, you can as well play multimedia file.
Example
Try the following example below.
<html>
<head>
<title>Using Plug-Ins</title>
</head>
<body>
<script type = "text/javascript">
media = navigator.mimeTypes[ "video/quicktime" ];
if ( media ) {
document.write("<embed src = 'quick.mov' height = 90 width = 90>" );
} else {
document.write("<img src = 'quick.gif' height = 90 width = 90>" );
}
</script>
</body>
</html>
<head>
<title>Using Plug-Ins</title>
</head>
<body>
<script type = "text/javascript">
media = navigator.mimeTypes[ "video/quicktime" ];
if ( media ) {
document.write("<embed src = 'quick.mov' height = 90 width = 90>" );
} else {
document.write("<img src = 'quick.gif' height = 90 width = 90>" );
}
</script>
</body>
</html>
Output
Below is the output of the above example.
You can also read our tutorial post on: Regular Expressions in JavaScript with examples
Controlling Multimedia
Let us now take a look at one real example that works in almost all the modern browsers -
Example
Try the following example below.
<html>
<head>
<title>Using Embed Objects</title>
<script type = "text/javascript">
<!--
function play() {
if ( !document.demo.IsPlaying() ) {
document.demo.Play();
}
}
function stop() {
if ( !document.demo.IsPlaying() ) {
document.demo.StopPlay();
}
}
function rewind() {
if ( !document.demo.IsPlaying() ) {
document.demo.StopPlay();
}
document.demo.rewind();
}
//-->
</script>
</head>
</body>
<embed id = "demo" name = "demo"
src = "http://www.amrood.com/games/kumite.swf"
width = "250" height = "280" play = "false" loop = "false"
pluginspage = "http://www.macromedia.com/go/getflashplayer"
swliveconnect = "true">
<form name = "form" id = "form" action = "#" method = "get">
<input type = "button" value = "Start" onclick = "play();" />
<input type = "button" value = "Stop" onclick = "stop();" />
<input type = "button" value = "Rewind" onclick = "rewind();" />
</form>
</body>
</html>
<head>
<title>Using Embed Objects</title>
<script type = "text/javascript">
<!--
function play() {
if ( !document.demo.IsPlaying() ) {
document.demo.Play();
}
}
function stop() {
if ( !document.demo.IsPlaying() ) {
document.demo.StopPlay();
}
}
function rewind() {
if ( !document.demo.IsPlaying() ) {
document.demo.StopPlay();
}
document.demo.rewind();
}
//-->
</script>
</head>
</body>
<embed id = "demo" name = "demo"
src = "http://www.amrood.com/games/kumite.swf"
width = "250" height = "280" play = "false" loop = "false"
pluginspage = "http://www.macromedia.com/go/getflashplayer"
swliveconnect = "true">
<form name = "form" id = "form" action = "#" method = "get">
<input type = "button" value = "Start" onclick = "play();" />
<input type = "button" value = "Stop" onclick = "stop();" />
<input type = "button" value = "Rewind" onclick = "rewind();" />
</form>
</body>
</html>
Output
Below is the output of the above example.
If you are using Mozilla, Firefox or Netscape then you will see a result because this plugin we just used in the above example is supported by those browsers.
If you are using Mozilla, Firefox or Netscape then you will see a result because this plugin we just used in the above example is supported by those browsers.
Alright guys! we have come to the end of this tutorial post on JavaScript multimedia. In my next tutorial post, i will be discussing about how to debug JavaScript codes.
Follow us on our various social media handles and also subscribe to our newsletter to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now
Follow us on our various social media handles and also subscribe to our newsletter to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now