Skip to content
Related Articles

Related Articles

ES6 | Multimedia

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 23 Mar, 2022

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: 

javascript




<!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 printing
            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: 

html




<!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.

  • Program: 

javascript




<!DOCTYPE html>
<html>
 
<body>
    <center>
        <embed src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200110154656/20191210_115921.mp4"
               width="600" height="400">
    </center>
</body>
 
</html>

  • Output:

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: 

javascript




<!DOCTYPE html>
<html>
<body>
    <center>
        <iframe width="560" height="315" src=
"https://www.youtube.com/embed/lcJzw0JGfeE"
                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 :

Start Your Coding Journey Now!