> ## Content Index
> Fetch the complete content index at: https://blog.addpipe.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 10 Advanced Features In The HTML5 <video> Player
- URL: https://blog.addpipe.com/10-advanced-features-in-html5-video-player/
- Published: 2018-05-31T21:12:57.000Z
- Updated: 2026-05-21T08:23:02.000Z
- Author: Remus
- Tags: Technology, #Import 2026-05-22 13:18

We’ve covered the basics of adding a video to your web page using the `<video>` element and briefly listed the `<video>` element’s more advanced features in an [earlier blog post](https://blog.addpipe.com/html5-video/).

In this blog post, we’ll take a deeper look at 10 of those advanced features and explain with code examples how you can use them on your website in your HTML video players.

We’ll cover:

1. [Specifying multiple sources for a video](#specifyingmultiplesourcesforavideo)
2. [Showing or hiding the video player’s controls](#showingorhidingthevideoplayerscontrols)
3. [Start or stop the video at a certain point or timestamp](#startorstopthevideoatacertainpointortimestamp)
4. [Show a video poster or thumbnail before the video is started](#showavideoposterorthumbnailbeforethevideoisstarted)
5. [Preload the video before playback](#preloadthevideobeforeplayback)
6. [Play a video inline in Safari in iOS](#playavideoinlineinsafarionios)
7. [Autoplay, loop and mute](#autoplayloopandmute)
8. [Showing captions or subtitles during playback](#showingcaptionsorsubtitlesduringplayback)
9. [Accessing more functionality through JavaScript](#accessingmorefunctionalitythroughjavascript)
10. [Fitting portrait videos in landscape players using the object-fit CSS property](#fittingportraitvideosinlandscapeplayersusingobjectfit)

### Specifying multiple sources for a video

Not all browsers support all video containers and codecs. To suit all browsers you can provide multiple video files as the source for one video player.

Multiple sources can be specified by using `<source>` elements. It is also recommended that you specify the MIME type using the optional `type` attribute.

Here’s an example:

```html
<video controls>
    <source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
    <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
</video>

```

The list of sources is tried from top to bottom.

If only one video format is available, it can be specified directly using the `src` attribute:

```html
<video src="vid1.mp4"></video>

```

### Showing or hiding the video player’s controls

Controls like play/pause, volume, full-screen toggle and the seek slider can easily be toggled using the `controls` attribute:

```html
<video controls="controls" preload="none" src="/static/short.mp4" width="600" height="360"></video>

```

If you don’t specify the attribute the controls won’t be shown.

Some specific controls can be hidden separately by using the `controlsList` attribute (Chrome 58+ only), for example:

```html
<video controls="controls" preload="none" controlsList="nofullscreen nodownload" src="/static/short.mp4" width="600" height="360"></video>

```

In the example above the fullscreen and download buttons have will be turned off or hidden but only if the user is on Chrome.

You can find more examples on how to control the default Chrome video player UI [here](https://googlechrome.github.io/samples/media/controlslist.html).

### Start or stop the video at a certain point or timestamp

Using **Media Fragments** (the `#t=` anchor in the `src`) you can specify the time at which the video should start playback and end playback. In this example, the video playback will start at second 15 and end at second 20:

```html
<video controls="controls" preload="metadata" src="/static/short.mp4#t=15,20" width="600" height="360"></video>

```

More examples:

`#t=10,20` \=> results in the time interval `[10,20)`  
`#t=,20` \=> results in the time interval `[0,20)`  
`#t=10` \=> results in the time interval `[10,end)`

### Show a video poster or thumbnail before the video is started

If the video is not played automatically it’s a good idea to show a video thumbnail and thus give viewers a glimpse of the content.

For the video to have a poster you simply need to add the `poster` attribute and the URL to the poster image:

```html
<video controls="controls" poster="/static/poster.png" preload="none" src="/static/short.mp4" width="600" height="360"> </video>

```

### Preload the video before playback

A video can be preloaded in multiple ways by adding the `preload` attribute.

The following options exist:

- none – no preload is done
- metadata – only the metadata is preloaded: dimensions, first frame, track list, duration, etc
- auto – the audio/video should start loading as soon as the page loads

In most of the above players we’ve used `preload="none"` to prevent the video from being loaded together with the web page because it might use considerable data even if the user will not play the video. We might thus receive a high data transfer bill from our hosting provider if this blog post gets a lot of views.

Here’s how to allow the browser to preload just the video metadata and show the 1st frame as the poster:

```html
<video controls="controls" preload="metadata" src="/static/short.mp4" width="600" height="360"></video>

```

### Play a video inline in Safari on iOS

Safari on iOS 10+ supports inline playback of videos. Up until and including iOS9, web videos, when played, would show full screen on the device. To enable inline playback need to use the `playsinline` attribute:

```html
<video playsinline src="/static/short.mp4"> </video>

```

### Autoplay, loop and mute

**Autoplay**

A video can be auto played as soon as it is ready by adding the `autoplay` attribute:

```html
<video autoplay controls src="/static/short.mp4"> </video>

```

Muted autoplay works in Safari on iOS10+ (while not in low power mode) and in Chrome 53+ on Android. Check [New <video> Policies for iOS](https://webkit.org/blog/6784/new-video-policies-for-ios/) and [Muted Autoplay on Mobile](https://developers.google.com/web/updates/2016/07/autoplay) for more details. On mobile devices, Google and Apple previously blocked videos from autoplaying.

**Loop**

If you wish the video to play in a loop you can use the `loop` attribute:

```html
<video loop controls src="/static/short.mp4"></video>

```

**Mute the sound**

Sometimes the audio of the video is not necessary. To turn off the audio of the video you can simply add the `muted` attribute to the `<video>` code:

```html
<video muted controls src="/static/short.mp4"> </video>

```

Here's the same video embedded but this time with the muted attribute added:

### Showing captions or subtitles during playback

By using the `<track>` element you can add subtitles, screen reader descriptions, and captions to the video.

The `<track>` element functions exactly like a `<source>` element within the `<video>` element. It has a `src` attribute that points to a file in [WebVTT format](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT%5FAPI). By using the `label` you can specify the name that will be displayed to the user in the UI. With `srclang` you can specify the language for the captions. The `kind` attribute will set how the track should be used with the following options: subtitles (default), captions, descriptions, chapters and metadata.

When loading cross origin captions you might have to specify [the crossorigin="anonymous" attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS%5Fsettings%5Fattributes). The web server serving the .vtt files might also have to provide the [Content-Type:text/vtt header for .vtt files](https://stackoverflow.com/a/15268843/813988).

```html
<video controls="" preload="metadata" width="422" height="253">
    <source src="/static/the-web-is-always-changing.webm" type="video/webm">
    <track label="English subtitles" kind="subtitles" srclang="en" src="/static/the-web-is-always-changing.vtt" default="">
</video>

```

For more info on the topic I recommend Ian Devlin's articles on the subject: [Help with WebVTT](https://iandevlin.com/blog/2016/05/html5/help-with-webvtt/), [Google Chrome supports WebVTT Subtitles](http://www.iandevlin.com/blog/2012/06/html5/google-chrome-supports-webvtt-subtitles/), [WebVTT and Audio](https://iandevlin.com/blog/2015/12/html5/webvtt-and-audio/) and [HTML5 Video Captions – Current Browser Status](https://iandevlin.com/blog/2015/04/html5/html5-video-captions-current-browser-status/).

### Accessing more functionality through JavaScript

The `<video>` element also has methods, properties and events that can only be accessed through JavaScript. These include controlling playback speed, finding out the buffered parts of the video, reading any error states and more. You can find the full list [here](https://www.w3schools.com/TagS/ref%5Fav%5Fdom.asp).

### Fitting portrait videos in landscape players using object-fit

The `object-fit` [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property specifies how the contents of [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) and [video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) elements should be resized to fit their container. `object-fit` can take several values:

- `contain` – the video will be scaled to fit the container while preserving the aspect ratio, letterboxing will be present around the video
- `cover` – the video is scaled to fill the container while preserving the aspect ratio, the video will be clipped
- `fill` – the video is scaled to fill the container without preserving the aspect ratio, the video will be stretched
- `none` – video is not resized

Here’s a portrait video placed in a landscape video player using the `object-fit:contain` CSS. The video is scaled down to fit the container. The portrait aspect ratio of the video is maintained so as to not distort the video resulting in letterboxing on the sides: