How to set the URL of the media file in HTML?


In this article, we are going to learn about how to set the URL of the media fiel in HTML.

Here, we'll look at how to use HTML to establish a media file's URL. We utilise the <source> tag to specify a media file's URL. Multimedia files, including audio, video, and image files, are attached using this tag. The <source> element is contained in the <audio>, <video>, and <image> elements.

Syntax

Following is the syntax for <source>element

<source src="" type="">…….</source>

Let’s dive into the following examples to understand more about how to set the URL of the media file in HTML.

Example 1

In the following examples we are using <source>tag for audio.

<!DOCTYPE html>
<html>
<body style="text-align: center;">
   <audio id="varma" controls>
      <source src="https://samplelib.com/lib/preview/mp3/sample-3s.mp3" type="audio/mpeg">
   </audio>
</body>
</html>

When the script gets executed, it will generate an output displaying the audio file uploaded to the webpage using <source> tag.

Example 2

Consider the following example we are using tag with video.

<!DOCTYPE html>
<html>
<body>
   <video width="400" height="350" controls>
      <source src="https://static.videezy.com/system/resources/previews/000/052/918/original/21.mp4"">
   </video>
</body>
</html>

On running the above script, it will generate an output consisting of text used in the script along with the colspan on the webpage.

Example 3

Let’s look another example, where we are using tag with image.

<!DOCTYPE html>
<html>
<body>
   <h1>ELEPHANTS</h1>
   <p>Elephants are the largest existing land animals.</p>
   <p><br><img src="https://www.tutorialspoint.com/assets/questions/media/500267-1671169181.png"></p>
</body>
</html>

If the script gets executed, the output window will pop up, displaying an image uploaded using the <source> tag to the webpage.

Updated on: 16-Dec-2022

487 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements