HTML Video
Syntax:
<video width="600" height="400" controls>
<source src="path/to/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Video Formats
1. MP4 (.mp4):
-
Most popular video format; widely supported.
-
Good balance of quality and file size.
2. AVI (.avi):
-
Audio Video Interleave; older format.
-
Larger file sizes; less web-friendly.
3. MKV (.mkv):
-
Matroska Video; supports multiple audio and
subtitle tracks.
-
Popular for high-quality video.
4. MOV (.mov):
-
Apple's QuickTime format; high quality.
-
Best supported on Apple devices.
5. WMV (.wmv):
-
Windows Media Video; good compression.
-
Less compatible with non-Windows platforms.
6. WebM (.webm):
-
Open format optimized for the web.
-
Good for streaming and supported in modern
browsers.
7. FLV (.flv):
-
Flash Video; once popular for online
streaming.
-
Declining use due to the fall of Flash.
8. MPEG (.mpeg, .mpg):
-
Moving Picture Experts Group format; various
profiles.
-
Common for video storage and streaming.
9. 3GP (.3gp):
-
Multimedia container format for 3G mobile
phones.
-
Compressed video and audio.
How It Works
1. Basic Structure
2. Loading the Video
<video>
tag and checks for the
specified <source> files. It attempts to load the
first supported format it finds.3. Playback Controls
-
If you include the
controls
attribute, the browser will provide built-in playback controls, such as play, pause, volume, and fullscreen. - Users can interact with these controls to manage playback.
4. Attributes and Behavior
- controls: Displays playback controls (play, pause, volume).
- autoplay: Automatically starts playing the video (use sparingly for user experience).
- loop: Replays the video automatically after it ends.
- muted: Starts the video muted.
- preload: Indicates how the video should be loaded:
ii. metadata: Load only metadata (e.g., duration).
iii. auto: Load the entire vedio file.
5. Cross-Browser Compatibility
6. Accessibility
More topic in HTML