Today’s topic is How to Add Videos in HTML. 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 on web pages.
How to Add Videos in HTML
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. 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 the 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. You can see that a video is 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 an 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 questions related to this, you can hit me up in the comments section and I’ll be there for you.
