Embedding Multimedia in HTML
A complete guide to images, audio and video
Embedding Multimedia in HTML is the process of adding multimedia content such as images, audio, video and documents directly on a webpages. Through this, users can view these multimedia content without needing to go to a separate link or downloading these images. We embed multimedia into the HTML document using specific HTML tags. Embedding Multimedia enhances the user experience and makes the site more engaging. These are some of the processes through which we can add multimedia content to our website.
Adding image:
For adding image ,we need <img> tag. We can add image directly from the folder where we are doing HTML and also we can add image from other folder
.For adding from the same folder,we have to import the image to that folder.Then inside the body tag we will use the “img” tag.For attaching image the tag must have this kind of format
<img src=”folder’s name”>
The picture we want to attach can be of any format like-.png,.jpg.The format through which you saved the image,it should be used inside the image tag.Otherwise,the image won’t be imported.We can also add Gif to the webpage likewise we are adding image.
For example-if we want to import image from the same folder and the name of the picture we want to add is “lyrics” which is in .png format then we can write it in the following way:
<img src=”lyrics.png”>
We can also import image from different folder .But in that case we have to mention the folder’s name along with the picture’s name .
For example-if we want to import image from a folder name “photos” and the name of the picture we want to add is “lyrics” which is in .png format then we can write it in the following way:
<img src=”images/lyrics.png”>
We can also change the height and width of the image which we want to add.For that we will specify the height and width inside the image tag like —
<img src=”lyrics.png”
height=”300”
width=”200”>
Moreover,we can also add hyperlink with the image .For that we have to add the hyperlink before the image tag.
Alternate text:
Alternate text is a detailed and specific description of images for the users of webpages. Alt text works by adding my text tag to HTML code on embedded images. The user doesn't see these tags. However, the search engine bots do. The better the tags, the higher the search ranking for these web pages. Webpages miss out on around 20% of google searches because of their lack of use of alternate or alt text. Alt text is not only good for SEO, but it is absolutely essential for people with visual impairment disabilities. Alt texts should be cohesive and specific. The alt attribute should be used with the <img> tag like the one below
<img src="path_to_image.jpg" alt="Description of the image">
Adding audio:
Adding Audio is somewhat like adding image.We have two options for adding image.One of the approaches is adding audio directly from the working folder by importing audio to that folder and the other approach is adding audio from a different folder.
For adding audio we need “<audio control >” tag which is written like the following way:
<audio control>
</audio>
Inside the audio control tag we will use another tag which is source tag.It can be written in the mentioned way:
<audio control>
<source src=”Name of the audio file”>
</audio>
The audio can be of any format like .mp3 etc.
If we consider the name of the file which is directly taken from the working folder is “Night changes” and video format is mp3 then we can write in this way:
<audio control>
<source src=”Night changes.mp3”>
</audio>
Moreover ,we can add the option of autoplay in the audio .For that we have to just do the following thing:
<audio control autoplay>
<source src=”Night changes.mp3”>
</audio>
Furthermore ,we can add the option of mute in the audio .For that we have to just do the following thing:
<audio control muted>
<source src=”Night changes.mp3”>
</audio>
Again,we can add the option of autoplay and muted togetherin the audio .For that we have to just do the following thing:
<audio control autoplay muted>
<source src=”Night changes.mp3”>
</audio>
Moreover ,we can add the option of playing the audio in loop .For that we have to just do the following thing:
<audio control autoplay loop>
<source src=”Night changes.mp3”>
</audio>
We can also use different types of audio at a time. Just in that case we have to mention the type of the audio file .Like-we want to attach the wav version of that file just in case our web browser doesnot support mp3 file,then it will work.
We can implement in the described way :
<audio control autoplay loop muted>
<source src=”Night changes.mp3” type=”audio/mpeg”>
<source src=”Night changes.wav” type=”audio/wav”>
</audio>
Adding video:
Adding video to webpage is similar to adding audio to webpage.
Here we will news two tag like we used at the time of adding audio .Those tags are -<video control> tag and <source> tag.
We can write in the same way we write in case of adding audio which is
<video control autoplay loop muted>
<source src=”Night changes.mkv” type=”video/mkv”>
</video>
We can also change the width of the video according to our wish .For this we have to make change in the <video> tag
We can do the following thing:
<video width=”500px” controls autoplay loop muted>
<source src=”Night changes.mkv” type=”video/mkv”>
</video>
