How to Embed Audio and Video in HTML?
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen. So, in this article, we will learn to embedded audio and video in HTML. In order to insert multimedia files on web pages, we already know to insert images in HTML.
How to embed audio in HTML?
To embed audio in HTML, we use the <audio> tag. Before HTML5, audio can not be added to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash. After the release of HTML5, it is possible. This tag supports Chrome, Firefox, Safari, Opera, and Edge in three audio formats – MP3, WAV, OGG. Only Safari browser doesn’t support OGG audio format.
<audio> <source src="file_name" type="audio_file_type"> </audio>
Attributes of <audio> tag auto metadata none
Attribute Value Description autoplay autoplay When the page is loaded. It specifies to play audio as soon as possible. controls controls It displays audio control. loop loop It will start the audio again when it is finished. muted muted When the page is loaded audio will be automatically muted. preload It specifies how the author thinks the audio will be loaded when the page is ready. src URL It specifies the URL of the audio file.
In this example, we will add an audio file to a webpage. To add audio files on the webpage, we need a notepad or another text editor.
Step 1: Open your notepad by searching notepad in your application list.
Step 2: Save a new file with a valid name following with .html extension.
Step 3: Once the HTML file is saved, you can write HTML code inside this file. In this example, we have to embed an audio file so first keep ready an audio file and save the same directory where your HTML is saved. Then we write HTML code as shown below code snippet following by HTML code format.
Note: Before adding an audio source must be sure that the audio file is in the same directory and specified name.
How to embed video in HTML?
To embed video in HTML, we use the <video> tag. It contains one or more video sources at a time using <source> tag. It supports MP4, WebM, and Ogg in all modern browsers. Only Ogg video format doesn’t support in Safari browser.
<video> <source src="file_name" type="video_file_type"> </video>
Attributes of <video> tag
Attribute Value Description autoplay autoplay When the page is loaded. It specifies to play video as soon as possible. controls controls It displays video control such as play, pause, and stop. loop loop It will start the video again when it is finished. muted muted When the page is loaded video will be automatically muted. poster URL It specifies an image will be shown until video play. preload auto
It specifies how the author thinks the video will be loaded when the page is ready. src URL It specifies the URL of the audio file. width pixels It specifies the width of the video area. The default value of width is ‘auto’. height pixels It specifies the height of the video area. The default value of width is ‘auto’.
In this example, we will add a video to our webpage. To add video, we will use the <video> tag defining source using <source> tag. Create an HTML file just like an audio file example and save the video file in the same directory. Suppose a video file name test.mp4 save in the same directory where your HTML file was saved.
or you can use the following code:
Attention reader! All those who say programming isn’t for kids, just haven’t met the right mentors yet. Join the Demo Class for First Step to Coding Course, specifically designed for students of class 8 to 12.
The students will get to learn more about the world of programming in these free classes which will definitely help them in making a wise career choice in the future.