</HTML Video>

Attribute/tag	Details
width	Sets the element's width in pixels.
height	Sets the element's height in pixels.
<source>	Defines resources of the audio or video files
track	Defines the text track for media elements
controls	Displays controls
autoplay	Automatically start playing the media when page load
loop	Plays the media in a repeated cycle
muted	Plays the media without sound
poster	Assigns an image to display until a video is loaded

Using <video> element to display audio/video content

Use the HTML or <video> element to embed video/audio content in a document. The video/audio element contains one or more video/audio sources. To specify a source, use either the src attribute or the <source> element; the browser will choose the most suitable one.

Using src attribute to display audio/video content

				
 
<video src="videofile.webm" autoplay>
 Sorry, your browser doesn't support embedded videos,
 but don't worry, you can 
 <a href="videofile.webm">download it</a>
 and watch it with your favorite video player!
</video>

Try it Yourself

Using <source> tag to display audio/video content

The <source> tag allows you to specify multiple video format for the browser to choose from. The browser uses the first recognized format.

				
<video width="480" controls>
 <source src="videofile.webm" type="video/webm">
 <source src="video.mp4" type="video/mp4">
 Your browser doesn't support HTML5 video tag.
</video>

Try it Yourself

HTML <video> track

Defines the subtitles track for media elements

				
<video src="foo.webm">
 <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
 <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

HTML <video> controls attribute

The Controls attribute to display video controls, like play, pause, and volume.

				
<video width="450"  controls>
  <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Try it Yourself

HTML <video> autoplay attribute

A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.Automatically start playing the media when page load

				
<video width="450"  autoplay>
 //for chrome user you must have to add mute attribute to use autoplay 
  <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Try it Yourself

warning: In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.
For chrome user Video must be mute for autoplay
, Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

HTML <video> loop attribute

A Boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video.
Plays the media in a repeated cycle(loop)

				
<video width="450"  loop controls>
  <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Try it Yourself

HTML <video> muted attribute

A Boolean attribute that indicates the default setting of the audio contained in the video.If set, the audio will be initially silenced.Its default value is false, meaning that the audio will be played when the video is played
Plays the media without sound

				
<video width="450" muted controls>
  <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Try it Yourself

HTML <video> poster attribute

A URL for an image to be shown while the video is downloading.If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

				
<video width="450" poster="html5.png" controls>
  <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Try it Yourself

Note: It is a good idea to always include the width and height attributes. If the height and width are not set, the page may flicker while the video is loading.

Video header or background

Adding a video that will autoplay on a loop and has no controls or sound. Perfect for a video header or background

				
<!--
This CSS provides a fallback if the video cannot be loaded. Note that is it recomended to use the first frame of the
video as the poster video.jpg.				
-->
<style>
#videobg {
 background: url(html5.png) no-repeat;
 background-size: cover;
}
</style>
           
            

				
				
<video width="100%" height="720" autoplay muted loop poster="html5.png" id="videobg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

Try it Yourself

HTML Video

</HTML Video tag>

Vvideo tag in HTML

HTML5 provides a new standard for embedding an audio/video file on a web page. You can embed an audio file to a page using the <video> element:

</HTML Video>

Using <video> element to display audio/video content

Using src attribute to display audio/video content

Using <source> tag to display audio/video content

HTML <video> track

HTML <video> controls attribute

HTML <video> autoplay attribute

HTML <video> loop attribute

HTML <video> muted attribute

HTML <video> poster attribute

Video header or background