How to play Video in HTML

How to Play / embed videos in HTML?

Friends, today I will show you how you can play or embed your video in HTML by following the steps shown below, before getting started let's know a little about HTML??

What is HTML?

HTML stands for HyperText Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content

It is very easy to learn.

How Play /embed videos on the website?

or

How to play/embed videos in the HTML?

or

How to add videos to the website using HTML?

Let's learn how to add or embed or play videos in HTML. Follow the steps given below:

Open any text editor like notepad, VS code, etc
Now create a simple webpage using the following code.

Press Ctrl + S or click the File and then click save as.
Type the name of the and at the end of the file type .htm or HTML also click save as file type and click on All Files (*.*), then click on save.

Now go to the location and open the above saved HTML file, it will look like this

Now let's learn how to play/embed or add video in HTML?

add the following code to the above code

You can change the width and height as per your choice and set the URL of the video you want to add to your webpage, you can also add videos from your computer.

Now let's see

How to add video from our Computer to the webpage?

As we have already learned how to add online videos to our webpage, we will use the same code for adding videos from our computer i.e from our hard drive or SSD, etc.

but modifying src=" "

copy the location of the video inside your computer and paste that location inside double commas of src. for example if I want to add a video (my video) which is in the drive of my computer and inside e drive video is in the folder videos the location of this video would be

E:/vidoes/my video.mp4

you can also copy the path or location of the video by right-clicking on it and then click on properties.

or if you are using Windows 11 then it is very easy to copy the path or location of the video. Right-click on the video which you are going to add to your webpage, click on the copy as path.

now open your editor and in src paste your path as shown in the image below.

Full code

now save the above code reload your webpage, it will look like this now.

How to copy the path of video on windows 10?

In windows 11, it is very easy to copy the path of any file, for example, if you want to copy the path of the video, right-click on that video and click on a copy as path.

A little info about HTML tags used in this code : -

This tag <!DOCTYPE> tag is used to inform the browser about the version of HTML used in the document. It is called the document type declaration (DTD).

Technically <!DOCTYPE > is not a tag/element, it is just an instruction to the browser about the document type. It is a null element that does not contain the closing tag, and must not include any content within it.

The <html> tag represents root of an HTML document hence also called as root element. It is a container of all elements (except <!Doctype> ) such as <body>, <head> and each element which appears in an HTML document. It tells the browser that the document is an HTML document.

Before the < html > tag we can only use <!Doctype> declaration which gives information about the HTML version to the browser.

<header> tag is a container of header elements like title if we want to set title for our webpage we need to write that inside a tag < title> and this title tag should be inside a header tag.

<body> tag acts as a container for all the elements that we see on the webpage like headin, paragraphs, or everything we see on that webpage is added inside this body tag.

Every tag starts with < > and closes </ >. forexample <title> < /titile >