HTML Video
HTML Video:
The HTML
<video> element is used to show a video on a web page.
HTML Video:
Key attributes:
width
and height: Set the video dimensions.
controls:
Displays playback controls.
src:
Specifies the video file’s source.
type:
Indicates the video file’s MIME type (e.g., “video/mp4” for MP4).
Commonly supported video formats:
MP4 (MPEG
4)
WebM
Ogg
Additional notes:
Autoplay:
Use autoplay attribute to start playback automatically.
Looping:
Use loop attribute to repeat the video.
Poster:
Use poster attribute to display a placeholder image before playback.
JavaScript
control: Use JavaScript to control audio and video playback programmatically.
Compatibility:
Always
provide multiple video sources in different formats to ensure compatibility
across browsers.
Consider
using a video hosting service or CDN to handle different formats and ensure
optimal delivery.
Example:
<video
width=“320”
height=“240”
controls>
<source
src=“myvideo.mp4”
type=“video/mp4”>
Your browser does not
support the video element.
</video>
Multiple
Video Sources with different formats:
Example:
<video
width=“400”
height=“300”
controls>
<source
src=“myvideo.mp4”
type=“video/mp4”>
<source
src=“myvideo.webm”
type=“video/webm”>
<source
src=“myvideo.ogg”
type=“video/ogg”>
Your browser does not
support the video tag.
</video>
Autoplay and Looping:
<video
width=“320”
height=“240”
autoplay loop
muted>
<source
src=“myvideo.mp4”
type=“video/mp4”>
</video>
Poster Image:
<video
width=“320”
height=“240”
poster=“preview.jpg”
controls>
<source
src=“myvideo.mp4”
type=“video/mp4”>
</video>
Video with captions:
<video
width=“320”
height=“240”
poster=“preview.jpg”
controls>
<source
src=“myvideo.mp4”
type=“video/mp4”>
</video>
ALL THE BEST
(Lucky Techzone)