> For the complete documentation index, see [llms.txt](https://it2805.gitbook.io/curriculum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://it2805.gitbook.io/curriculum/web-and-multimedia/video.md).

# Video

The `<video>` element lets you embed a video on your site. You do so by writing:

```
<video src="path/to/videofile.mp4" controls>
    <p>Your browser doesn't support HTML5 video.</p>
</video>
```

As you see, the `<video>` element have two attributes, `src` and `controls`. The `src`, as with images, is the path to the video file. The `controls` attribute is a boolean attribute, meaning that when present the video controls are accessible (usually by hovering over the video element with your mouse). If you remove the `controls` attribute, users will not be able to play or pause the video.

The paragraph within the element is the fallback content, which will be displayed if the browser doesn't support the `<video>` element.

Not at browsers support all video formats. Thus you may need a fallback video. This is done by referencing several files, e.g.:

```
<video controls>
    <source src="path/to/videofile.mp4" type="video/mp4">
    <source src="path/to/videofile.ogg" type="video/ogg">
    <p>Your browser doesn't support HTML5 video.</p>
</video>
```

As you can see, instead of using the `src` attribute, the `<source>` element is used instead. As of February 2016, the following browser support these video formats:

| Browser           | MP4 | WebM | Ogg |
| ----------------- | --- | ---- | --- |
| Internet explorer | Yes | No   | No  |
| Chrome            | Yes | Yes  | Yes |
| Firefox           | Yes | Yes  | Yes |
| Safari            | Yes | No   | No  |
| Opera             | Yes | Yes  | Yes |
| Microsoft Edge    | Yes | Yes  | No  |

Why some formats are supported and others aren't is outside the scope of this course. You can read more about supported video formats [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats).

You already know about `src` and `controls`. Some other attributes you should know about are `autoplay`, `height`, `width`, `loop`, `muted` and `poster`.

`autoplay` is a boolean attribute, and if present the video automatically starts to play as soon as it can, without stopping to finish loading the data.

`height` and `width` behaves like with the `<img>` element. The height and width should be the same dimensions as the video file.

`loop` is a boolean attribute that will seek back to start when the video reaches the end.

`muted` is a boolean attribute which sets the default setting of the audio to silenced.

`poster` takes a URL to an image as a value. This image is displayed as a poster frame until the user plays or seeks. If this attribute is not present, the first frame of the video will be displayed. This attribute is used as shown:

```
<video controls poster="images/videofileposter.jpg">
    <source src="path/to/videofile.mp4" type="video/mp4">
    <source src="path/to/videofile.ogg" type="video/ogg">
    <p>Your browser doesn't support HTML5 video.</p>
</video>
```