HTML Video

❮ Prev Next ❯

HTML Video is a multimedia element used to embed videos in web pages. The videoelement allows you to specify the source sourceof the video, add captions, define the video size, and control playback.

This element can stream video, using a webcam via getUserMedia()or WebRTCit can play a video source which you reference using the src attribute: 

<video src="file.mp4"></video>

Controls

By default the browser does not show any controls for this element, just the video.

Which means the video will play only if set to autoplay (more on this later) and the user can't see how to stop it, pause it, control the volume or skip to a specific position in the video.

To show the built-in controls, you can add the controlsattribute: 

<video src="file.mp4" controls></video>

Controls can have a custom skin.

Type

You can specify the MIME type of the video file using the typeattribute. If not set, the browser will try to automatically determine it: 

<video src="file.mp4" controls type="video/mp4"></video>

Autoplay

A video file by default does not play automatically. Add the autoplay attribute to play the video automatically: 

<video src="file.mp4" controls autoplay></video>

Muted

Some browsers also require the muted attribute to autoplay. The video autoplays only if mutedand it sets the video to play without sound. ends. 

<video src="file.mp4" controls autoplay muted></video>

Loop

The loop attribute restarts the video playing at 0:00 if set; otherwise, if not present, the video stops at the end of the file: 

<video src="file.mp4" controls autoplay loop></video>

Poster

You can set an image to be the poster image, that is shown before the video starts playing. 

<video src="file.mp4" poster="picture.mp4"></video>

If not present, the browser will display the first frame of the video as soon as it's available.

Width and Height

You can set the width and height attributes to set the space that the element will take so that the browser can account for it and it does not change the layout when it's finally loaded. It takes a numeric value, expressed in pixels. 

<video src="file.mp4" width="200px" height="150px"></video>

Subtitles

Adds subtitles or closed captions to the video. 

<video src="file.mp4" width="200px" height="150px">
  <track src="mysubtitles.vtt" kind="subtitles" srclang="en" label="english"></track>
</video>

Source

Allows you to specify multiple video sources for different file types or quality levels. 

<video src="file.mp4" width="200px" height="150px">
  <source src="myVideo.mp4" type="video/mp4" >
  <source src="myVideo.mp4" type="video/webm" >
</video>

Example 

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Title of the Document</title>
</head>
<body>
  <h1>HTML Video</h1>
  <video src="http://surl.li/gzvdy" width="200px" height="150px">
    <source src="http://surl.li/gzvdy" type="video/mp4" >
    <source src="http://surl.li/gzvdy" type="video/webm" >
  </video>
  </body>
</html>

Using JavaScript you can listen for various events happening on an video element, the most basic of which are:

  • playwhen the file starts playing.
  • pausewhen the video was paused.
  • playingwhen the video is resumed from a pause.
  • endedwhen the end of the video file was reached.

These are just a few examples of HTML multimedia elements. There are many other attributes and elements available that you can use to add multimedia content to your web pages. now let learn about HTML Audio in the next chapter.

❮ Prev Next ❯