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)

Join Our Newsletter