If we want to add a video in Html document, we have to follow the steps which are given below. Using these steps, we can easily show a video on the web page.
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to add a video.
<!Doctype Html>
<Html>
<Head>
<Title>
Add a video
</Title>
</Head>
<Body>
Hello JavaTpoint! <br>
Hello User! <br>
</Body>
</Html>
Step 2: Now, move the cursor to that point where we want to add a video. And then, type the <video> tag at that point. After it, we have to use the source tag between the starting and closing of the video tag.
<Body>
Hello JavaTpoint! <br>
Hello User! <br>
<video>
<source>
</video>
</Body> Step 3: Now, we have to add the attribute in the source tag whose name is “src“. So, type the src and type attributes within the <source> tag.
<source src="" type=""> Step 4: After that, we have to give the path of the video we want to add or insert. So, type the path of the video in the src attribute. If our video is stored in the same directory in which HTML file is stored so type the following path:
<img src=”videoname.extension”>
<source src="videoname.extension"> <br> If our video is stored in any other directory then type the correct path of that video, so that the browser can read the video easily as described in the following block.
<source src="/home/sumit/Desktop/images/googleimage.jpeg">Step 5: After that, we can also set the width and height of that video by using two different attributes as shown in the following block:
<video width="pixel" height="pixel"> Step 6: And, at last, we have to save the Html file or Html Code in the text editor. And then run the file.
<!Doctype Html>
<Html>
<Head>
<Title>
Add a video
</Title>
</Head>
<Body>
Hello JavaTpoint! <br>
<video width="320" height="240" controls autoplay>
<source src="path of a video" type="video/mp4">
</video>
Hello User! <br>
</Body>
</Html>