The video tag
The video tag allows you to add a video to an HTML page. It can also be used to manage this video. The path to the video file is specified via the src attribute or the nested source tag.
If you want to see the player to control video playback, you should add the controls attribute. Without it, you won't see anything - there won't be any sound or image.
Sometimes it is not very convenient to place a video on the site itself (for example, your hosting has a limit on the site size). In this case, the video can be uploaded to YouTube and connected using the tag iframe.
Attributes
| Attribute | Description |
|---|---|
src |
Specifies the path to the video file. But it is better to use the tag source (in this case, you can specify videos in different formats).
|
preload |
Used to load a video file simultaneously with loading a website page.
Accepted values: none (do not download the file, the default), metadata (download only service information: duration of the sound, etc.), auto (download the entire video when loading the HTML page).
|
autoplay |
The sound starts playing immediately after the page loads, and the presence of the preload attribute will be ignored.
Attribute without value. |
controls |
Adds a control panel to the video.
Attribute without value. By default (if there is no attribute) the panel is not added. |
loop |
Repeats the audio recording in a "loop": after finishing it will start playing again.
Attribute without value. By default (if there is no attribute) the recording will be played only 1 times.
|
poster |
Path to an image that will be displayed while the video is not available or playing. If the poster attribute is not specified, the browser will try to display the first frame of the video.
|
height |
The height attribute specifies the height of the video playback area (in pixels or percentages). The video itself changes its size up or down, adjusting to the specified height, but its proportions do not change.
Default value: height is taken from video parameters, if this value is not available, then the value of the attribute height is considered equal to the height of the image from the attribute poster. If poster is not specified - the height is set to 150 pixels.
|
width |
The width attribute specifies the width of the video playback area (in pixels or percentages). The video itself changes its size up or down, adjusting to the specified width, but its proportions do not change.
Default value: width is taken from video parameters, if this value is not available, then the value of the width attribute is considered equal to the width of the image from the poster attribute. If poster is not specified either, the width is set to 150 pixels.
|
Example . Player on the website page
Let's add a video player to the page. For those browsers that do not support the video tag, a special note about this is left:
<video src="moovie.mp4" controls>
Your browser does not support HTML5 video.
</video>
Example .
Let's add the source tag to the video tag:
<video>
<source src="moovie.mp4" controls>
Your browser does not support HTML5 video.
</video>
