HTML Media - Adding Photos and videos to Webpages
HTML

HTML Media – Adding Photos and videos to Webpages

Every website today, is very rich in media content. Be it photos, videos or some other forms of media. All of this is made possible by placing media in web pages.

Every website today, is very rich in media content. Be it photos, videos or some other forms of media. All of this is made possible by placing media in web pages.

usage of videos in webpages youtube

usage of videos in webpages

So in this article, let us have a look at some media tags and how we can use photos and videos in our webpages.

Using Images in a webpage

The <img> tag can be used to insert images in a webpage. It is an empty tag so you don’t need to close it. Here is an example of how to use the image tag.

<img src=”salman.jpeg”>

The above code outputs the following in my browser.

use image in html

In case you are wondering, that is Salman Khan(My favorite actor). And from the code, you can make out that we have used the img tag and the src=”salman.jpeg” specifies the name of the file which is salman.jpeg in our case.

There is a whole bunch of stuff that you can do with images. You can see that I have set a custom width and height of the image and placed it in the center.

<img src="salman.jpg" width="400px" height="250px" alt="salman khan">

Also, there is this piece of code that says alt=”salman khan”. So sometimes your image may not load due to poor connectivity issues. The alt attribute is used to store a piece of text that best describes the image and that text is displayed when the image cannot be loaded.

Using Videos in a Web Page

Videos can be used in a web page very similar to images.

<video width="400" height="300" src="cartoon.webm" type="video" controls>

The above code produces the following output.

use videos in html

You can see that a video is displayed on the screen and there are some control buttons for volume control, full-screen and play/pause.

I have supplied the width and height of the element, so the video gets contained within that dimension. We have the src="cartoon.webm" that tells HTML where our video file is located.

Finally, we have a control attribute that enables various controls like the volume and plays pause control.

Though the above-given code works perfectly fine, there will be instances when the user’s internet connection will not be stable or there might be other reasons that the video may not load at all. At such times it is better off to display some text in place of the video. You can do that with the following code.

<video width="400" height="300" controls>

<source src="cartoon.webm" type="video/webm">

Unable to load video

</video>

You will also notice that i have added a type=”video/webm” attribute in the source element to specify what type of video we are dealing with.

Similarly, you could also insert audio files simply by replacing the video tag with audio tag.

Conclusion

Media files have become the major mode of consumption and HTML is very rich in integrating photos and videos in webpages. The img, audio and video tags are used to insert photos, audio, and videos into webpages respectively.  If you have any question related to this, you can hit me up in the comments section and I’ll be there for you.

HTML Media – Adding Photos and videos to Webpages
Comments
To Top