We now have a youtube channel. Subscribe!

A Practical Guide to JavaScript Multimedia with examples



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.

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>        

Output

Below is the output of the above example.

List of Plug-Ins
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>        

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>        

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.

Using Embed Objects

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

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain