Different ways to add media in HTML page

Last Updated : 30 Jan, 2022

These days one of the most important things on the web is media. So all the developers and websites owners want to make their websites attractive and interactive. For they need to include media in their sites. There are lots of media types, audio, video, etc. There are different ways to include those media into the websites. Each type of media required a specific way. All the possible ways are mentioned and described below one by one.

Different ways to add media to the HTML page:

Using HTML Audio tag: This tag is used to include the audio media type into the websites.
Using HTML Video tag: This tag is used to include the video media type into the websites.

Example 1: Below example illustrate adding audio media type into the HTML page. The developer can use their own src file for implementation.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <p>Audio Sample</p> 
  
    <!-- Audio tag starts here -->
    <audio controls> 
        <source src="test.mp3" type="audio/mp3"> 
        <source src="test.ogg" type="audio/ogg"> 
    </audio> 
    <!-- Audio tag ends here -->
      
</body> 
  
</html> 

Output:

Using HTML Audio tag

Example 2: Below example illustrate adding video media type into the HTML page.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h3>HTML video tag</h3> 
  
        <p>Adding video on the webpage 
  
        <p> 
            <video width="450" height="250" 
                controls preload="auto"> 
                <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4"
                    type="video/mp4"> 
                      
                <source src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg"
                    type="video/ogg"> 
            </video> 
    </center> 
</body> 
  
</html> 