HTML5 Video: Autoplay, Controls, Events & Subtitles

The HTML5 video tag has been around for quite some time, making it easier than ever to embed and play recorded video on your website. Although it's a bit dated, there are still some cool and important features that are lesser-known and should be covered in detail.

In this article, we're going to explore the HTML5 video tag and all its features from autoplay and inline controls to accessibility options and compatibility options across desktop and mobile devices.

The Markup

We'll start by creating our first video tag markup:

<video controls>
	<source src="tutorial.mp4" type="video/mpeg" />
	<source src="tutorial.ogg" type="video/ogg" />
	<source src="tutorial.webm" type="video/webm" />
	
	Your browser does not support the video element. Please upgrade to a newer browser version and try again.
</video>

This code creates an embedded video player with basic controls (play, pause, volume) within our HTML page.

There are three source tags nested within the video tag. This is to illustrate each of the supported video formats and provides fallbacks for unsupported formats in the user's browser. For example, if the MP4 version is not supported, then it falls back to the OGG format, then the WebM format.

If none of the three video formats are supported, then a custom message is displayed to the user in place of the video player instructing them to upgrade their browser.

Attributes

There are many attributes available for the HTML5 video tag from enabling player controls and autoplay to video looping and default background image assignment.

Here are all of the attributes laid out in detail:

• width: A numeric value that assigns the width, in pixels, of the embedded video player.
• height: A numeric value that assigns the height, in pixels, of the embedded video player.
• controls: A boolean value that enables or disables the video player's controls, including the play button, pause button, and volume slider.
• autoplay: A boolean value that will play the video automatically once enough of the video has had time to buffer on load. iOS devices do not allow this feature readily. You'll need to also include the playsinline attribute for this to work properly.
• playsinline: A boolean value that determines whether or not the video should be played in an overlay screen. For mobile devices, the overlay screen is the default. So, if you want your video played within your web page or you want the autoplay feature to work, then enable this option.
• preload: Instructs the browser to preload the video for faster playback. Possible values include metadata which tells the browser that ther user is not expected to need the video, but to load dimensions, duration, track list, etc. just in case. auto which tells the browser to load the entire video. And none, disabling preloading altogether. Note that this property is ignored if the autoplay attribute is enabled.
• poster: Loads a background image into the video player which is shown to the user until they click the play button.
• loop: Restarts the video as soon as it has finished playing.
• muted: Mutes the video's volume by default.
• autoPictureinPicture: Instructs the browser to enter picture-in-picture mode automatically if enabled.

Media Fragments

Media fragments are URL parameters within your video URL that define the exact portion of the video you want to play.

To do so, you'll need to update your source tag's src value to include the start and end time, in seconds:

<source src="tutorial.ogg#t=10,20" type="video/ogg" />

The above code snippet loads the tutorial.ogg video and starts playback immediately at the 10-second mark, playing through to the 20-second mark, then pausing.

Captions, Subtitles, and Screen Reader Descriptions

The track tag provides a simple and standardized way to add captions, subtitles, and screen reader descriptions to your videos, improving accessibility and further allowing search engines to understand what your videos are about.

You can do so by nesting your track tag within your video tag:

<video controls>
	<source src="tutorial.mp4" type="video/mpeg" />
	<source src="tutorial.ogg" type="video/ogg" />
	<source src="tutorial.webm" type="video/webm" />
	
	<track src="subtitles-en.vtt" label="English subtitles" kind="subtitles" srclang="en" default />
</video>

This code snippet loads English subtitles within your video element in WebVTT format, which we'll cover shortly.

It's possible to specify multiple tracks within a single video element. This could be useful for supplying subtitles in multiple languages, in which case you could assign the default attribute to serve up subtitles for your site's primary language by default.

You can also specify a label value that will be displayed in the video player UI to the user.

Here are a few example lines from our WebVTT file that could be beneficial and help you write your own video captions and subtitles:

WEBVTT

1
00:00:00.500 --> 00:00:02.000 D:vertical A:start
Hello World

2
00:00:002.500 --> 00:00:07.500
That's what people usually say when they write their first script

3
00:00:08:000 --> 00:00:15.500
Have fun writing code and learning!

Enable Reduced Motion on Mac and iOS

With Apple devices, you can enable reduced motion, a feature that essentially tones down or removes motion that may be harmful to individuals with vestibular disorders or motion sensitivities.

This feature is only supported in Safari, but let's go over how to enable this feature on both a Mac and an iOS device.

How to enable reduced motion on a Mac:

1. Open Settings
2. Click on Accessibility
3. Click on Display
4. Check the Reduce Motion checkbox

How to enable reduced motion on an iOS device:

1. Open Settings
2. Tap on Accessibility
3. Tap on Motion
4. Toggle on Reduce Motion

JavaScript Properties

There are additional JavaScript properties that allow you to retrieve and control the state of the video player:

• currentTime: Gets or sets the current playback position of the video, in seconds.
• volume: Gets or sets the volume level for the video player. This should be a value between 0 and 1, where 0 is muted and 1 is turned up all the way.
• muted: Gets or sets the mute state of the video player.
• playbackRate: Gets or sets the playback rate. Setting a value of 1 sets the video speed to normal.
• currentSrc: Returns the current source location loaded up for the video player.
• videoWidth: Returns the width of the actual video dimensions, in pixels, not the player size.
• videoHeight: Returns the height of the actual video dimensions, in pixels, not the player size.

JavaScript Methods

Along with JavaScript properties, there are also methods we can call to change the state of the video player:

• load(): Loads or reloads the currently assigned video source and sets the playback position to the beginning.
• play(): Plays the video from its current position.
• pause(): Pauses the video at its current position.
• canPlayType(): Tests whether or not the browser can play a specific video format, returning probably if the browser more than likely can play it, maybe if it's unsure, and [empty-string] if the video is not playable at all.

JavaScript Events

You can also tell the current state of the video player with the following event flags:

• canplaythrough: This event is fired when enough data is available for the browser to begin playing the video without interruption.
• ended: The video playback has finished.
• error: There was an error loading or playing the video.
• playing: The video is currently playing.
• progress: This event fires periodically indicating the progress of the video download.
• waiting: This event fires when there is a temporary interruption in the video loading process.
• loadedmetadata: This event fires when the browser has finished loading only the metadata for the video.

Conclusion

I know we covered a lot with HTML5 video tags, but that's really all there is to it! I hope you learned something and take some time to play around with some of the features this powerful tag has to offer.

If you've enjoyed reading up on this feature, I'd appreciate it if you shared this article online. There are a few share buttons you can use below. Also, feel free to reach out to me on social media if you have any questions!