- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
<!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
<!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.