Modern websites are composed of HTML, dynamic JavaScript elements, images, video, and other rich media. On most websites, rich media accounts for most of page load time and are the heaviest elements the user needs to retrieve over their limited bandwidth.
Videos on the web are a double edged sword. On the one hand, they can make a website much more compelling and engaging for users. On the other hand, they can create usability issues, performance problems and security concerns.
In this article I’ll explain several ways to optimize videos, to ensure they contribute to the user experience, without harming it. I’ll cover how to select the right video format for your website and web application, and several tips to improve usability and performance for video content.
Selecting Video File Formats for the Web
Video optimization starts with selecting the right format. There are many video formats out there, but many are not suitable for use on the web, due to performance issues, user experience, or security concerns.
Let’s review a few modern formats that are suitable for websites, and understand their pros, cons, and technical properties. Here are the main video formats you should consider using in your website or web application.
Progressive video file formats:
- H264/AVC - this format uses an mp4 container and H264/AVC encoding. The majority of browsers and systems support this format, including applications developed for iOS and Android.
- H265/HEVC - this format uses an mp4 container and H265/HEVC encoding. H265/HEVC formats achieve high compression efficiency, which is approximately 50% lighter than H264/AVC. However, H265/HEVC is supported only by Apple devices.
- VP9 - this format was built by Google to provide an open-source and royalty-free format alternative to H265. VP9 can reduce video size with minimal blurriness, if at all. However, it supports only Chrome and Android and it is slightly less efficient than H265.
- AV1 - this format uses mappings for both MKV and MP4 containers. AV1 is license-free and achieves higher or similar compression efficiency when compared to H265.
Adaptive bitrate (ABR) file formats:
- HLS - is an ABR protocol developed by Apple. It is supported by Apple devices, Safari, and iOS applications, and can be adapted for open source. The protocol can split both H264 and H265 into chunks that are served as mp4, but H264 yields significantly better results.
- MPEG-DASH - is a codec-agnostic ABR protocol. It supports many encoding types, including VP9, AV1, H265, and H264. This format currently comes with less support than HLS, and is, therefore, less recommended for business websites and especially eCommerce stores.
Other Video Optimization Tips for Websites and Web Applications
Note that the following tips are useful if you are hosting your own video and streaming it directly from your web server. If you opt to host your video on an online video platform (OVP) such as YouTube or Vimeo, the platform will take care of most of these issues.
Make Videos Usable
The most important thing to remember when optimizing online video is to provide users with a good experience. Here are a few key points to consider for improving user engagement:
- Resize video for mobile devices - if you resize page content for mobile devices, you need to resize video content as well. Prepare multiple versions of video files, adapted to the most common screen sizes used by your visitors.
- Do not autoplay - it is not a common practice on the web not to autoplay video, because it is disruptive and annoying for users. However, in some cases you may want to autoplay a silent, background video, giving users the option to turn on audio.
- Support low-bandwidth users - not everyone watches videos over high-speed broadband connections. Provide viewers with slow connections the option to watch a more compressed version of the file. You can do this dynamically with adaptive bitrate streaming protocols.
- Don’t take over the screen - videos should be part of a website layout and should not take over the layout. Users should have an option to expand the video if they want to.
Deliver Video Using HTML5
Today it is extremely common to deliver videos over HTML5, which allows you to serve video content to your website visitors without requiring a plugin. You’ll need to use an HTML5-supported format.
MP4 files are the most popular and are supported by all browsers, while Chrome, Firefox and Opera also support other formats such as WebM and Ogg.
Here is how to embed an HTML5 video into a web page, providing two versions of the file, WebM and MP4:
<video controls>
<source src="{FILENAME}.webm" type="video /webm">
<source src="{FILENAME}.mp4" type="video /mp4">
Sorry, your browser does not support video content.
</video >Here are attributes you can use as part of the <video> tag to control the video experience:
- defines whether play/pause button and volume slider are displayed to the usercontrols
- if set to true, the video will start playing as soon as enough of it is bufferedautoplay
- preview image for the videoposter
You can also use HTML5-enabled video players like Video.js or the Cloudinary video player.
Use CDN
You can use a content delivery network (CDN) to stream video content and make it instantly available to users. Users don't have to wait for the video to be downloaded and buffered. CDNs are built into OVPs, but you can also use a CDN for videos you stream directly from your servers.
CDN uses a variety of caching techniques to ensure fast delivery of media. Popular video content is cached, and can then be quickly accessed by other users in the same location. The infrastructure and geographic coverage provided by the CDN allows users to access video from any device and location, without affecting video quality or web page performance.
Optimize Streaming Startup
When streaming video, a best practice is to start with the lowest quality stream to get the fastest playback speed. For long videos, it is recommended to use a medium quality stream at the start to deliver a sharper result and avoid disappointing viewers.
When requesting a video stream, the server provides a manifest file so that the player can list all available streams (including size and bitrate information). In HLS streaming, the player usually starts playing by selecting the first stream in the list.
You can leverage this by optimizing the first stream placed in the manifest file, making sure it runs optimally for the relevant device. You should provide alternative manifest files for mobile and desktop devices.
You can allow users to start streaming faster by providing a low quality stream as the first stream in the manifest. Later on, as the client-side player better understands the available throughput, it will download additional clips and can upgrade to a higher-quality stream. This means the user will initially see the video with some pixelation, and then it will become sharper. This can prevent a delay of 5-20 seconds that can happen in many streaming scenarios.
Conclusion
In this article I covered a few video formats that can provide a good experience for websites and web applications, including progressive formats like H264/AVC, H265/HEVC, and bitrate streaming protocols like HLS and MPEG-DASH.
In addition, I provided a few tips and tricks for improving performance and user experience for videos on your site:
- Ensure videos are mobile optimized and avoid disrupting users
- Deliver video using HTML5 to eliminate the need for plugins and compatibility issues
- Use CDN to improve performance and reduce the load on web servers
- For streaming bitrate formats, optimize streaming startup to ensure videos start faster
I hope this will help you improve the delivery of rich media files to your users, improve page load time and create a better user experience.