HTML5 introduced the <video>
element for embedding videos in web pages. The <video>
element allows for displaying videos in different formats and resolutions and provides controls for playback, volume, and other settings.
Example:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
In this example, the width
and height
attributes set the dimensions of the video player, while the controls
attribute enables playback controls such as play, pause, and volume. The <source>
element provides the video files in different formats to ensure compatibility with different browsers. If the browser does not support the <video>
element, the text “Your browser does not support the video tag.” will be displayed.
Other attributes that can be used with the <video>
element include:
autoplay
: starts playing the video automatically.loop
: replays the video when it reaches the end.muted
: starts the video with the sound muted.poster
: sets an image that will be displayed while the video is loading.
Additionally, JavaScript can be used to manipulate the video playback and interact with other elements on the page.