In today’s web development, videos are a popular and versatile medium for communication, marketing, education, and entertainment. In fact, according to the HTTP Archive, one in 20 web pages now include a <video> element, representing an increase of 18% year-over-year. While embedded videos are attractive, optimizing web pages for performance, accessibility, and user experience is crucial.
However, misusing videos in HTML creates several problems, including slow loading from large, unoptimized videos and high CPU/battery usage from videos autoplaying in high-resolution without controls.
In this article, we provide a comprehensive guide to using the HTML <video> element, including best practices and practical implementations for optimizing video delivery and leveraging Cloudinary for advanced video management.
In this article:
- Understanding the HTML <video> Element
- Optimizing Video Performance in HTML
- Enhancing User Experience with HTML Video
- Using Cloudinary for Advanced Video Management
Understanding the HTML <video> Element
The video element was introduced in HTML5 in 2007 for embedding video content in HTML web pages. It was designed to replace Adobe Flash, which was the de facto standard for playing video on the web. All major web browsers support video elements and offer extensive customization.
Basic Syntax and Structure
The video element has a simple syntax for embedding video content:
<video src="myvideo.mp4" controls> <p>Oops. Your browser doesn't support the video element</p> </video>
In the snippet above, the src attribute specifies the path to the video file, while the controls attribute provides functionalities for controlling the video’s behavior, including play, pause, volume, and seek. The paragraph displays a fallback text if the user’s browser lacks support for the element, just in case.
Supported Video Formats and Browser Compatibility
Different browsers have different capabilities for playing video content on the web, since not all browsers can play all types of video file types. To ensure cross-browser compatibility, you can specify multiple video sources using the sources element:
<video controls> <source src="myvideo.webm" type="video/webm"/> <source src="myvideo.mp4" type="video/mp4"/> <source src="myvideo.avi" type="video/avi"/> <p>Oops. Your browser doesn't support the video element</p> </video>
In the above example, three video sources are specified, which means if the first video format isn’t supported by the browser, the second source is tried, and so on. However, if you’re using the source element, then the src attribute in the video element becomes optional.
Common video Element Attributes
The video element supports several attributes to customize playback behavior. Some of these include:
controls: This is perhaps the most important attribute of the video element. It offers the controls to allow the user to control video playback, including volume, seeking, and pause/resume.autoplay: This accepts a Boolean value (trueorfalse) that specifies whether to begin playing the video as soon as the user navigates to the web page.poster: The poster attribute allows you to add placeholder images or thumbnails to display before the video is played. This can be useful for SEO to give viewers a sense of what the video content looks like or to pass across information about the video, such as title or branding elements. The poster attribute accepts either an image source or image URL.preload: When a video element is not in the initial viewport when users visit your page, you can use thepreloadattribute to defer the video from loading until the user reaches it. This can save a lot of bandwidth and improve initial page load time which are critical factors for performance and SEO. Acceptable values for the attribute includes:none: The video should not be preloaded.metadata: Only video metadata (like the dimensions or size) is fetched.auto: The whole video file can be downloaded.- empty string: A synonym of the
autovalue.
controlslist: This specifies which controls a browser displays for a video element. It works when thecontrolsattributes is set, and its allowed values arenodownload,nofullscreen, andnoremoteplayback.
Optimizing Video Performance in HTML
One of the major disadvantages of using video files in web design is their enormous file sizes, which can quickly take up significant storage space and network bandwidth.
For instance, a single HD video frame (1920×1080 pixels) uses 8.3 MB of data. Since HD video typically plays at 30 frames per second, one second requires roughly 249 MB of storage. This means a minute of HD video would take up about 14.93 GB. That’s not only impractical and too expensive in terms of storage, but it would also significantly impair the user experience.
To address these issues, there are several optimization techniques you can implement, depending on your specific use cases. Some of these are discussed below.
Use Multiple Source Formats for Compatibility
Every video file has a codec that determines its file’s format and influence factors like file size and quality. A video codec is a software or hardware tool that compresses and decompresses video data. It combines the functions of an encoder (which compresses video) and a decoder (which decompresses video).
There are several video codecs commonly used on the web for playing video content, with each having its own advantages and disadvantages. Some popular examples include, MPEG-1, MPEG-2, AVI, VP8 and VP9, HEVC (H.265), and so on.
Each codec uses different compression algorithms and produces different compression results compared to others when used for the same video. To minimize storage and bandwidth consumption, add multiple video types using the source element in video tags. Prioritize smaller file sizes by using video formats like WebM or AV1 when video quality is less important.
Implement Lazy Loading for Videos
Lazy loading is an optimization technique that defers video loading until the element enters or approaches the viewport, reducing initial page load times. By default, browsers load video elements eagerly as soon as the user lands on the web page. If a video doesn’t autoplay, you can use the preload attribute with a value of none to prevent browsers from preloading any video data and defer video loading until the video element is scrolled into view:
<video controls preload="none" poster="video-placeholder.jpg"> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> </video>
Additionally, you can use libraries like vanilla-lazyload, lozad.js or yall.js to help you lazy-load videos if you want a ready-made solution.
While lazy loading may yield results, you should always avoid lazy loading videos that are visible in the first viewport. To avoid delaying Largest Contentful Paint (LCP) and improve page load speed, avoid lazy loading videos that are immediately visible on page load.
Compress and Transcode Videos for Web Delivery
Since video files are typically much larger than other media assets on the web, reducing their size is crucial to ensure faster loading times and smoother playback.
You can shrink your video files without losing much visual quality through compression. For one-off or GUI-based compression, use Handbrake. For programmatic compression, use FFmpeg if you’re building a simple app and a media management solution like Cloudinary if your app is more complex.
Transcoding, on the other hand, involves converting a video from one format to another. As we mentioned earlier, not all browsers have the same capabilities for video playback. However, for cross-browser compatibility and efficient delivery, it’s recommended to use more than one video source in the video element.
Use Adaptive Streaming for High Quality Videos
When developing websites and applications, it’s important to acknowledge that your users access websites and apps with different devices and network conditions. This oversight could lead to a frustrating and disjointed user experience. Adaptive bitrate streaming is a performance optimization technique that adjusts the video quality in real-time based on the viewer’s network conditions.
This technology offers several key benefits, like:
- Wider Access to Content: Adaptive bitrate streaming makes videos accessible to a wider audience. This means users with low-end devices may not be able to watch high-quality videos.
- Enhanced User Experience: It drastically reduces frustrating buffering delays. By seamlessly switching to a lower-quality stream when bandwidth drops, adaptive bitrate streaming ensures a smoother, more continuous viewing experience with fewer interruptions.
Enhancing User Experience with HTML Video
User experience in web video design hinges on easy navigation and accessible design within the video element. Many issues frequently arise, especially for those without UX design experience.
Implement Responsive Video Layouts
Video elements that are larger or smaller than their designated display area can cause significant usability (and design) issues. This could cause various issues for users, such as inaccessible playback controls or cropped video content, potentially obscuring important visuals or text.
Responsive design ensures videos display correctly across devices, from desktops and tablets, to mobile phones. Today, there are several approaches used by developers to make videos responsive, including adding static width and height values to the video element. However, these methods present problems like aspect ratio distortion, which can often be difficult to deal with.
Customize Video Controls and Appearance
The appearance of the HTML5 video player varies considerably on different browsers and operating systems. This lack of uniformity can disrupt your brand’s visual identity and lead to an inconsistent user experience for your audience.
You can use CSS and JavaScript to create your own set of playback controls (buttons, sliders, progress bars, etc) that sit on top of or alongside the video element. Netflix and Amazon Prime, for instance, customize their video players’ appearance and functionality to reflect their branding.
Ensure Accessibility and SEO Best Practices
To maximize the reach and impact of your video content, it is important to implement both accessibility and SEO strategies. Accessibility ensures your videos are viewable by all audiences, including those with disabilities, while SEO improves discoverability by search engines. Some key practices you can adopt include:
- Use the
<track>element to provide captions or subtitles in WebVTT format to translate the video dialogue for viewers who don’t understand the spoken language or prefer to read along. - Offer navigation controls via keyboard by adding tabindex and handling key events (e.g., Enter or Space to play/pause).
- If possible, provide text transcripts of the entire video content as an alternative way to consume the information. Transcripts are valuable for those with accessibility needs, prefer reading, or want to quickly skim the content. Plus, they also impact SEO by giving something for crawlers to scan.
Using Cloudinary for Advanced Video Management
Cloudinary is a cloud-based media platform that provides developers with tools to manage, transform, optimize, and deliver videos and other media assets for websites and mobile applications. Cloudinary has a battery-included video player that you can embed in your website and application with minimal setup. It comes with features such as auto-transcripts, analytics, adaptive streaming, responsive layout, video transformation, live streaming, playlist, and a lot of other customization options.
You can use the video player in your website or application in three different ways:
- By installing the
cloudinary-video-playerlibrary in your application - By including the video player directly from a CDN provider
- By embedding a cloud hosted player using an iframe with all relevant configuration and dependencies already included.
The following example shows the HTML code for an embeddable video player created with Cloudinary’s Video Player Studio:
<style>
.cloudinary-video {
width: 100%;
max-width: 640px;
margin: auto auto;
}
</style>
<div class="cloudinary-video">
<iframe
src="https://player.cloudinary.com/embed/?cloud_name=cloudinarymich&public_id=samples%2Fcld-sample-video&player[showJumpControls]=true&player[aiHighlightsGraph]=true&player[posterOptions][transformation][start_offset]=5"
width="640"
height="360"
style="height: auto; width: 100%; aspect-ratio: 640 / 360"
allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
allowfullscreen
frameborder="0"
></iframe>
</div>
Here’s what the resulting video player looks like:
The advantages of using the Cloudinary video player extend beyond the extra functionalities that come pre-built into the player. Integrating Cloudinary into your application provides a complete video management and delivery solution, ideal for complex web applications with extensive video libraries.
You can find a list of all the functionalities you can add to the video player in this live example. You can also use Cloudinary Video Player Studio to design and customize your own video player from scratch.
Wrapping Up
Embedding and optimizing videos in HTML requires a multifaceted approach rather than just inserting video tags in every part of your code. To deliver a performant, accessible, and user-friendly experience, you must consider layout responsiveness, format compatibility, loading strategies, and optimization techniques.
By integrating platforms like Cloudinary into your application, you can automate much of the process, enabling you to optimize and deliver videos effortlessly.
If you want to enhance your HTML video workflow, sign up for a free Cloudinary account today and see how automated video optimization can transform your content delivery.
