Skip to content
Related Articles

Related Articles

ES6 | Multimedia
  • Last Updated : 29 Jan, 2020

JavaScript multimedia basically used to include any movies, audios, text, and music, etc in the web application. To use these multimedia objects in web application JavaScript provide a way, that is known as JavaScript multimedia. In this case, multimedia in JavaScript having a navigator object which includes child objects named plug-ins. These plug-ins are of array type and contain one entry of each plug-in installed on the browser. Plug-ins are small programs that extend the functionality of a browser.

Plug-ins: This are added to an HTML page using <embed> and <object> tag.

  • Using <embed> tag:
    <embed height="600" width="400" src="vd.mp4"> </embed>
  • Using <object> tag:
    <object height="600" width="400" src="vd.mp4"> </object>

Property values: The plug-in contain some property described below:

  • Name: This is a name of the field.
  • Filename: This is the name of the file which is being execute to install the plug-in.
  • Description: It is the description of the plug-in.
  • mimeTypes: It is an array with one entry for each MIME type supported by the plug-in.

To find all the plug-ins installed in a browser:

  • Program:




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Find all the plug-ins
            installed in a browser
        </title>
    </head>
      
    <body>
        <table border="2px" align ="center">
        <tr>
            <th>Name</th>
            <th>Filename</th>
            <th>Description</th>
        </tr>
          
        <script> 
            for (i = 0; i<navigator.plugins.length; i++) {
                  
                // Row wise preinting
                document.write("<tr><td>"); 
                document.write(navigator.plugins[i].name);
                  
                // Print name of the field 
                document.write("</td><td>"); 
                document.write(navigator.plugins[i].filename);
                  
                // Print the executable filename
                document.write("</td><td>"); 
                document.write(navigator.plugins[i].description );
                  
                // Print description of the plug-in 
                document.write("</td></tr>"); 
            
        </script> 
        </table>
    </body>
      
    </html>
  • Output:

    Playing a video using <video> tag: In this case, we need to add play, pause button to play and pause video. If we don’t add those button then the video is not being played or paused. The <video> tag is only used for add a video in a particular section in the HTML page.



    • Program:




      <!DOCTYPE html>
      <html>
         
      <head>
          <title>
              Playing a video using video tag
          </title>
      </head>
         
      <body>
          <script language="javascript">
              function playPause() {
                  var a = document.getElementsByTagName('video')[0];
                  if (a.paused)
                      a.play();
                  else
                      a.pause();
              }
          </script>
            
          <center>
              <video src=
                      width="600" height="200">
              </video>
              <br>
                
              <button type="button" onclick="playPause()">
                  Play and Pause
              </button>
          </center>
      </body>
         
      </html>
    • Output:

    Playing a video using <embed> tag: In this case, using <embed> tag is no need to add any types of button or option by which the video is played or paused. Using <embed> tag is automatically add the play or paused button in the video like YouTube. So this the advantage of using <embed> tag.

    Note: Below is the other two procedures where JavaScript is not required.

    Playing a video using <iframe> tag: We can also link YouTube video in a web page using <iframe> tag. Which is a part of <embed> tag:

    • Program:




      <!DOCTYPE html>
      <html>
      <body>
          <center>
              <iframe width="560" height="315" src=
                      frameborder="0" allow="accelerometer; autoplay; 
                 encrypted-media; gyroscope; 
                 picture-in-picture" allowfullscreen></iframe>
          </center>
      </body>
        
      </html>
    • Output:
    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :