HTML Video: The Beginner‘s Guide to Embedding Video on the Web

Online video is dominating the web. According to Cisco, video will make up 82% of all internet traffic by 2022. As a web developer or content creator, you need to know how to effectively embed videos on your pages. HTML5 makes this easier than ever with the <video> element.

In this beginner‘s guide, you‘ll learn everything you need to start embedding HTML video like a pro. I‘ll cover:

• How the <video> element works
• Supported attributes to customize playback
• Embedding videos with multiple sources
• Accessible video best practices
• Browser support and troubleshooting
• Performance optimization techniques

Whether you‘re a seasoned developer looking to brush up your skills or a complete beginner, this guide will set you on the path to HTML video mastery. Let‘s jump in!

Introducing the HTML5 <video> Element

The <video> element is one of the most impactful additions to HTML5. It allows you to embed video directly into a web page without relying on plugins like Flash. Here‘s the basic syntax:

<video src="video.mp4" controls>
  Sorry, your browser doesn‘t support embedded videos.
</video>

Let‘s break this down:

• <video> – This tag indicates an embedded video.
• src – The URL of the video file to embed.
• controls – Shows default playback controls (play/pause, volume, etc.)
• The content between the tags is fallback text shown if the browser doesn‘t support <video>.

That‘s all it takes to embed a functional video player in your page! Of course, there‘s a lot more we can do to customize and optimize the experience. Keep reading to learn how.

Specifying Multiple Video Sources

To ensure maximum compatibility, it‘s best to provide multiple video sources in different formats. You can do this with the <source> element nested inside <video>.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  Sorry, your browser doesn‘t support embedded videos.
</video>

The browser will play the first source file it recognizes. The type tells the browser what format the file is. According to CanIUse, providing both MP4 and WebM covers 96% of users, with OGG as an extra fallback.

Essential

The <video> element supports several attributes to customize playback functionality and UI. Here are some of the most commonly used:

• autoplay – Start playing the video as soon as it loads. Note: browsers increasingly restrict autoplay, especially with audio.
• loop – Replay the video continuously.
• muted – Mute the audio. Required to autoplay in many browsers.
• poster – URL of an image to show before playback begins.
• preload – Hint to the browser how much of the video file to preload. Accepts auto, metadata, or none.
• width & height – Set the dimensions of the video player. Defaults to the intrinsic size of the video file.

For example, here‘s a muted background video that autoplays and loops:

<video autoplay loop muted>
  <source src="background.mp4" type="video/mp4">
</video>

Use these attributes strategically to create the experience you want. Avoid autoplaying unexpected video/audio, as this can be disruptive. Give users control whenever possible.

Making Your Videos Accessible

Accessibility is critical to an inclusive user experience. The Web Content Accessibility Guidelines (WCAG) lay out specific requirements for accessible video. Here are some key considerations:

Captions

Captions are a text version of dialogue and important audio, displayed in time with the video. They‘re essential for deaf and hard-of-hearing users, but benefit everyone.

Provide captions using the <track> element with WebVTT:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>  

According to 3Play Media, 80% of people who use captions aren‘t deaf or hard of hearing. Captions improve comprehension and engagement for all.

Transcripts

In addition to captions, provide a text transcript of the video content. This helps people who prefer reading to watching/listening, or want to quickly scan the content. It‘s also great for SEO.

Ideally, include the transcript directly in the page HTML. If that‘s not feasible, link to a separate transcript file. Indicate languages for multilingual transcripts.

Audio Descriptions

Audio description provides key visual content to blind and low vision users. It can be challenging to implement, but is required for WCAG conformance at higher levels.

The upcoming <track> attribute kind="descriptions" aims to make this easier by allowing an additional audio track with descriptions. Browser support is currently limited.

Don‘t Rely Solely on Sound

Per WCAG Success Criterion 1.2.1, video with audio should not automatically play for more than 3 seconds without a way to pause/stop it or control volume. Users should be able to comprehend content without relying solely on sound. Avoid unexpected audio.

Browser Support & Troubleshooting

HTML5 video has widespread support, but there are still some inconsistencies and quirks to be aware of. Here‘s the current global browser usage share and <video> support, per StatCounter and CanIUse:

Browser	Usage	<video> Support
Chrome	63.8%	95.9%
Safari	19.4%	95.6%
Firefox	4.3%	96.8%
Edge	4.1%	96.5%
IE	1.7%	80.6%
Others	7.7%	95%+

As you can see, global support is extremely high. However, older browsers like IE have more limited support, especially for newer codecs.

The main issue you‘ll likely encounter is a particular video format not playing. To troubleshoot this:

1. Check that you‘ve provided the video in multiple formats (MP4, WebM, OGG).
2. Make sure the MIME type matches the file format in the type attribute of <source>.
3. Verify the video files are encoded properly and not corrupted.
4. Test in multiple browsers and devices. Focus on platforms your audience uses.
5. Consider a video service like YouTube, Vimeo, or Wistia as a fallback. Their embedded players have excellent compatibility.

Remember, the fallback text you provide between <video></video> is a last resort. Ideally, users should never see it. Thorough cross-browser testing is key.

Optimizing Video Performance

Video files are often quite large, which can negatively impact page load times and bandwidth costs if not handled properly. Fortunately, there are several ways to optimize video performance:

Compress Your Videos

Reducing video file size is the best way to improve performance. Use a compression tool to find the ideal balance between visual quality and file size. Some popular options:

• FFmpeg (CLI)
• HandBrake (GUI)
• Miro Video Converter (GUI)

Videos should be no larger than 10 MB for optimal page speed. Per HTTPArchive, the median video size across the web is currently 3.9 MB.

Stream With HLS/DASH

For longer videos, consider streaming via HTTP Live Streaming (HLS) or Dynamic Adaptive Streaming over HTTP (DASH). These protocols break the video into small segments that load individually, allowing for faster startup and adaptive quality.

HLS and DASH are widely supported by browsers and video hosting platforms. They do require some server-side setup, but many services handle this for you.

Lazy Load Video

Lazy loading defers loading video files until the user is likely to play them, based on factors like viewport visibility and user interaction. This can significantly reduce initial page weight.

You can lazy load video with vanilla JavaScript using the Intersection Observer API to detect when the video enters the viewport. Libraries like LazySizes provide an easier implementation.

According to Backlinko, lazy loading video can improve page load times by ~10%. Every bit helps!

Host on a Fast, Reliable CDN

Where you host your video files matters. Ideally, use a Content Delivery Network (CDN) to serve video from high-speed servers close to your users.

Many video platforms like YouTube, Vimeo, and Wistia provide free hosting and handle delivery optimization for you. Self-hosting gives you more control but requires more technical resources to match a CDN‘s speed and reliability.

The Future of HTML Video

As web technologies evolve, the capabilities of HTML video continue to expand. Some exciting developments to watch:

• AV1 Codec – A new open format that promises 30%+ better compression than VP9/HEVC with no royalties. Early hardware support is promising.
• – Upcoming APIs like HTMLVideoElement.requestVideoFrameCallback() enable more precise control and analysis.
• WebCodecs – An API to encode/decode video directly in the browser. Opens up new possibilities for web-based video editing.
• Virtual/Augmented Reality – Experimental APIs like WebXR enable immersive 360° and VR video experiences.
• Web Monetization – Micropayment APIs could allow new ways to monetize video directly in the browser.

Whatever the future holds, the principles of this guide will remain evergreen. Focus on the fundamentals – compatibility, accessibility, and performance – to deliver excellent video experiences for your users.

Become an HTML Video Expert

Whew, that was a lot to cover! Let‘s recap what you‘ve learned:

• How to use the HTML <video> element to embed video
• Providing multiple <source> files for compatibility
• Customizing playback with <video> attributes
• Accessibility best practices like captions and transcripts
• Optimizing performance with compression, streaming, and lazy loading

You‘re now equipped to use HTML video with confidence. It‘s an incredibly powerful tool for creating engaging, immersive web experiences.

Of course, there‘s always more to learn. Continue exploring advanced techniques, staying on top of browser support, and monitoring emerging standards to level up your video skills.

Most importantly, put this knowledge into practice. Embed a video in your next project. Experiment with different attributes and sources. Prioritize accessibility and performance. Solicit feedback from colleagues and users.

That‘s the path to HTML video mastery. You‘ve got the foundation – now go build something amazing! If you have any questions or insights to share, leave a comment below. Happy coding!