Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a media resources for media elements, defined inside video or audio elements in HTML5
HTML5 supports five media elements, that are useful for creating media resources. The different media tags are <audio>, <source>, <video>, <track> and <embed>.
These tags are used to change the development, let us discuss each element in detail with an example ?
The <video> tag
To play videos on your web page, you can use the HTML <video> element. This element provides a standard way to embed videos in a webpage. The simple code to embed a video is as follows ?
<video controls="controls"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogg"> Your browser does not support the HTML5 Video element. </video>
Example
The following example demonstrates the usage of the <video> tag in HTML. This code creates a webpage with a blue heading "TutorialPoint," a paragraph "Using video tag," and an embedded video player that loads and plays a video from a specified URL.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<p>Using Video tag</p>
<video width="300" height="250" controls preload>
<source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</center>
</body>
</html>
The <audio> tag
The <audio> tag in HTML is used to specify audio content on a webpage. It allows us to play audio content on a webpage. It allows us to play audio files OGG, MP3, or WAV directly in the browser. This tag supports attributes such as pause, play, and volume. The <audio> element enables integration and the reaction of custom audio controls.
Syntax
Following is the usage of <audio> tag in HTML
<audio> <source src="demo.mp3" type="audio/mpeg"> </audio>
Example
This HTML code creates a webpage with a blue heading "TutorialPoint," a paragraph"Using Audio tag," and an embedded audio player that automatically plays an MP3 file with controls.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<p>Using Audio tag</p>
<audio controls autoplay>>
<source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3" type="audio/mpeg">
</audio>
</center>
</body>
</html>
The <source> tag
The <source> tag in HTML specifies multimedia files for elements like <audio>, <video>, and,<picture>. It defines attributes such as type and src for the URL source. All media elements use the <source> tag to attach multimedia files.
Syntax
Following is the usage of <source> tag ?
<source src=" " type= " "> text?. </source>
Example
The following example demonstrates the usage of the <source> tag. This HTML code creates a webpage with a blue heading "TutorialPoint," a red paragraph "Usage of Source Tag," and an embedded audio player that automatically plays an MP3 file with controls.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
font: 20px;
}
</style>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<p>Usage of Source tag</p>
<audio controls autoplay>>
<source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3" type="audio/mpeg">
</audio>
</center>
</body>
</html>
The <embed> tag
The <embed> tag in HTML is used to embed external content or media files(such as video, audio, or interactive elements) into a webpage, including plug-ins like Flash animation.
Syntax
Following is the usage of embed tags in HTML ?
<embed attribute>
Example
This HTML code creates a webpage with a blue heading "TutorialPoint," a red paragraph "Usage of Embed tag," and an embedded GIF from Giphy displayed in an iframe with controls.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
font: 20px;
}
</style>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<p>Usage of Embed tag</p>
<iframe src="https://giphy.com/embed/BfbUe877N4xsUhpcPc" width="250" height="150" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</center>
</body>
</html>
Multiple media resources
Now let us discuss multiple media resources in HTML5. There is a possibility of setting numerous media resources for media elements.
Syntax
Following is the usage of multiple media elements in HTML ?
<media_element> <source src="logo.jpg"> <source src="sample.mp3"> <source src="video.mp4"> </media_element>
Example
This HTML code creates a webpage with a blue heading "TutorialPoint," a red paragraph, and sections for audio and video players, embedding an MP3 file and an MP4 video with controls.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
font: 20px;
}
</style>
<title>Multiple Media Resources</title>
</head>
<body>
<center>
<h1>TutorialPoint</h1>
<div>
<h2>Multiple media resources in single HTML:</h2>
<div>
<audio controls>
<source src="sample.mp3">
<code>audio</code> element.
</audio>
</div>
<div>
<video width="300" height="250" controls preload>
<source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</div>
</div>
</center>
</body>
</html>
539 Views
