 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 14.
In our previous lesson, we studied div tag and span tag.
Today we will study how to embed a video in a web page.
HTML Video tag
HTML5 provides a <video> tag to insert a video in a web page.Video tag has two attributes, width and height. It is a good practice to give these attributes, so that we can define exact dimensions of video and web browser displays video appropriately. There is another attribute "controls". This attribute adds controls like play, pause, and volume control.
Source element
Video element contains another element <source>, where we can give the name of video. "src" attribute of source element specifies name of the video. There is another attribute for <source> namely type. This defines the type of video file. Carefully see how <source> element is written.It should be
<source src="name of video" type="video/mp4">
Therefore, our code will be like this:
<video width="320" height="240" controls>
<source src="vid1.mp4" type="video/mp4">
Video is not supported by your browser.
</video>
Let us begin. Open a new Notepad file. In that file copy statements from first line to <body> from "Lesson-13". Then insert above code. Give </body> and </html>. See the following figure 14-1. Click on this figure for PDF file of source code.
 |
| Figure 14-1 HTML video tag, display video on a web page |
Now save this file as "Lesson-14". Again save this file as "Lesson-14.html".
 |
| Figure 14-2 HTML video tag, video in web page |
Double click on HTML document. Our video is displayed in the web page. Click on figure 14-2 to see actual output in web page. Click on play, maximize, volume and see it working.
Note that we can give second <source> element where we can mention name of another video. Browser will display second video if first cannot be displayed.
Text written in <video> and </video> ("Video is not supported by your browser") is not displayed. This is displayed if browser does not support <video> element.
Important Points:
1. HTML5 provides <video> tag to display a video in a web page.2. <video> tag has attributes width, height, and controls.
3. <source> element is used to specify the name of video file.
4. <source> element has "src" attribute where we can mention the name of video file. This element has another attribute type where we can mention the type of video.
Lesson-13 Lesson-15
