Open In App

HTML | DOM Video mediaGroup Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The Video mediaGroup property is used for setting or returning the name of the media group the video is a part of. Two or more <video> elements can be synchronized together using a media group. The Video mediaGroup property returns a string which represents the media group of the video. Syntax:

  • Returning the mediaGroup property:
videoObject.mediaGroup
  • Setting the mediaGroup property:
videoObject.mediaGroup = group

Note: This property has been DEPRECATED and is no longer recommended.

Property Values:

  • group: It is used to specify the media group of the video.

Below program illustrates the Video mediaGroup property : 

Example: Setting the video to loop. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Video mediaGroup Property
    </title>
    <style>
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
 
    <h1>GeeksforGeeks</h1>
    <h2>Video mediaGroup Property</h2>
    <br>
 
    <video id="Test_Video1"
           width="360"
           height="240"
           controls>
        <source src="samplevideo.mp4"
                type="video/mp4">
        <source src="movie.ogg"
                type="video/ogg">
    </video>
 
    <video id="Test_Video2"
           width="360"
           height="240"
           controls>
        <source src="sample2.mp4"
                type="video/mp4">
        <source src="movie.ogg"
                type="video/ogg">
    </video>
 
    <p>
      For setting the media group on the videos,
      double click the "Set mediaGroup" button.
    </p>
    <p>
      For returning the mediaGroup of the video,
      double click the "Return mediaGroup" button.
    </p>
 
    <button ondblclick="set()"
            type="button">
      Set mediaGroup
    </button>
    <button ondblclick="get()"
            type="button">
      Return mediaGroup
    </button>
 
    <script>
        var v1 = document.getElementById(
          "Test_Video1");
        var v2 = document.getElementById(
          "Test_Video2");
 
        function set() {
            v1.mediaGroup = "Heap Sort";
            v2.mediaGroup = "Quick Sort";
        }
 
        function get() {
            alert("Media group of Video 1 is : "
                  + v1.mediaGroup +
                ". Media group of Video 2 is : "
                  + v2.mediaGroup);
        }
    </script>
 
</body>
 
</html>


Output:

  • Before clicking the Set mediaGroup button:
  • After clicking the Set mediaGroup button:

Supported Browsers: The browser supported by HTML | DOM Video mediaGroup Propertyare listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari


Last Updated : 16 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads