Optimizing video for web distribution

As various forms of expression increase, we are seeing a significant rise in cases where video is used specifically on websites.

Users seek diverse and new forms of expression, but they also demand a "comfortable" experience during use.
To maintain the quality of expression without degrading usability, it is necessary to apply appropriate settings for all user environments.
Now that we are in an era where anyone can easily film and edit at a low cost and share it with a large audience, video has become a standardized method of expression.
Similarly, video expression on websites is now frequently used to create a sense of storytelling that cannot be achieved with static images like photos or illustrations.
For this reason, demand from clients and end-users is on the rise.

This is the method for implementing video on the web.
In this example, we will use the currently standard MP4 and WebM formats.

<video autoplay poster="filename.jpg">
<source src="filename.mp4">
<source src="filename.webm">
</video>

The above shows the implementation method in HTML.
In the example, the autoplay attribute within the <video> tag specifies that the video should play automatically when the page is loaded. The poster attribute designates a fallback image to be displayed if the video cannot be shown due to the user's environment.
Furthermore, the src attribute within the <source> tags specifies the loading order of the video files. These are listed from the top in order of priority.

Below are the main types of attributes used:

The reason we specify the same video content with different extensions in the src attribute is that each extension has specific compatible browsers, and multiple video files must be designated to accommodate them.

Let's look at the compatibility status for each file type and browser.
Here, we will look at the two formats currently in main use:

As shown in the following lists, the supported formats for MP4 and WebM differ by browser. By providing fallback options for each browser, you can ensure that users can see the video from any browser environment.

*As of July 2018

As of late 2014, MP4 video files are supported by almost all browsers.
As shown in the tables above, it is essential to prepare video files tailored to each browser environment and load them in the source.
However, even if supported by various browsers, there is a possibility that the video may not play depending on the user's specific environment. Therefore, it is advisable to use the poster attribute to specify a fallback image using a frame from the video.

When placing video on a website, make sure to optimize it for lightweight delivery.
This is because if a video is heavy and takes too long to load, it will degrade the UX and potentially cause users to leave the site, no matter how good the content is.

The length of loading time is an important factor when considering SEO.
Here are the findings from a study regarding the abandonment rate of users watching videos:
Videos under 30 seconds: 20% abandonment
Videos under 60 seconds: 30% abandonment
Videos under 300 seconds (5 mins): 40% abandonment
(Source: Wistia study)

Based on these findings, a length of 30 seconds or less is considered optimal for the web.
If the video is long but you want users to see the entire site while considering abandonment rates, try to keep it within 30 seconds.
Conversely, if a video is too short but set to loop, it can feel repetitive and annoying without conveying the storytelling unique to video. Therefore, a duration of about 10 to 30 seconds is appropriate for websites.
Keeping the video at an appropriate length directly helps minimize the file size.
Additionally, the major factors in determining file size are the codec and bitrate. Properly setting the codec and bitrate can suppress file size, which ultimately leads to improved usability.

A codec is an algorithm for compressing video and audio data.

The combinations above are standard and trouble-free.

The higher the bitrate, the more accurately information is assigned to pixels, resulting in higher image quality; however, it also increases the file size.
Bitrate settings include:

CBR (Constant Bitrate) maintains a consistent bitrate throughout, while VBR (Variable Bitrate) adjusts to a bitrate appropriate for the scene.
CBR tends to result in larger file sizes, so when setting video for the web, it is better to use VBR (Variable Bitrate).

What did you think of this overview?
As devices become more diverse and commonplace, using video has become a mainstream technique for creatively presenting site content.
A 10 to 30-second video on the web is not long, so the key is how to captivate people within that short window. Ensuring video compatibility and making it lightweight is an essential part of user-centered design.

Reference: Playing videos on homepages using the video element

Reference: Audio and video media formats in HTML

Reference: Browser Compatibility

Reference: Types and differences of video codecs

Reference: Differences between CBR, VBR, and ABR