HTML VIDEO

« Previous Next »

HTML Video

The HTML <video> element allows you to embed video content directly in web pages. 

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

The HTML <video> element provides a straightforward way to embed video content in a web page. Here’s how it works:

1. Basic Structure

The <video> tag acts as a container for video files. You specify one or more <source> elements to indicate the video files in different formats.

2. Loading the Video

When a web page is loaded, the browser reads the <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:

                         i. none: Do not preload the video.
                        ii. metadata: Load only metadata (e.g., duration).
                       iii. auto: Load the entire vedio file.

5. Cross-Browser Compatibility

Including multiple formats ensures that your video is playable across different browsers. While MP4 is widely supported, some browsers may prefer WebM or OGG formats.

6. Accessibility

Adding captions or subtitles enhances accessibility, making content available to users with hearing impairments.

Example :

 <video controls width="640" height="360" preload="metadata">
  <source src="example-video.mp4" type="video/mp4">
  <source src="example-video.webm" type="video/webm">
  <source src="example-video.ogg" type="video/ogg">
  Your browser does not support the video element.
  </video>


 

Output:

« Previous Next »

More topic in HTML

 Topic