HTML video

video element

video element can embed video in a web page. The media can be controlled using attributes in video tag. Src attribute specifies the location of the video.

src attribute specifies the location (address) of the video.

height and width attributes decide the vertical and horizontal dimensions of the video.

video related attributes

controls attribute

controls attribute adds the controls such as play, pause, and volume change.

<p>This media would contain controls.</p>
<video src="files/Hummingbird.mp4" controls>
</video>

Try </>

autoplay attribute

autoplay attribute plays the video automatically after the page is loaded.

<p>The media would play automatically.</p>
<video src="files/Hummingbird.mp4" autoplay>
</video>

Try </>

muted attribute

muted attribute sets the volume of video to zero by default.

<p>The media is muted initially.</p>
<video src="files/Hummingbird.mp4" muted>
</video>

Try </>

The volume is muted automatically when the video playback.

loop attribute

The video seeks back to the start upon reaching at the end.

<p>The media would play again after reaching at the end.</p>
 <video src="files/Hummingbird.mp4" loop>
 </video>

Try </>

The video playback from the start upon reaching at the end.

source element

There is another method to add a video in a page.

We can add more than one videos of different types using <source> tags. source tag is used as a child of the video element.

<video>
 <source src="files/Hummingbird.mp4" type="video/mp4" />
 <source src="files/Hummingbird.mp4" type="video/ogg" />
</video>

In this case, if a browser does not support video of one type then the video of other type will be played. These videos are same but with different types.

file path problems (video)

In all the above examples, the src attribute contains the name of video with type (1 is name and .mp4 is type).

If the video and the page (where we want to add a video) are in the same folder then the only name is enough in the src attribute.

If the video and the page (where we want to add a video) are at different locations then absolute (complete) address should be present with the name in the src attribute.

The following example defines the absolute address of the video.

<p>Here src attribute contains the absolute address of media.</p>
 <video src="http://www.codingb.com/html/files/Hummingbird.mp4" loop>
 </video>