How to Optimize The Impact of Your Videos
Our guest blogger today, Gilad David Maayan, explains how videos can help with web development and tips on how to optimize them for your readers
According to recent studies, there were more than 4 billion Internet users in 2019. Of these users, 92% watched videos online and 58% streamed TV content. These users are watching over 500 million hours of YouTube videos every day. For YouTube alone, that means nearly two billion users are spending an average of 20 minutes per day watching videos.
The massive popularity of video content makes its inclusion a key skill for web developers who are seeking to grab user attention. In this article, you’ll learn the importance of videos in web development. You’ll also learn how to optimize the impact of videos in your projects.
Role of Videos in Web Development
Humans are naturally drawn to movement. This instinctual draw makes video content an obvious way to catch and keep the attention of your users. Videos can be effective tools for engagement, regardless of the purpose of your site or application.
A video can enable you to incite a feeling in a user or simply to entertain in a more dynamic way than text or images. One valuable way to use video is as a means to quickly convey information. Videos have become particularly popular as a way to distribute class lectures, tutorials, or product reviews.
Videos can enable you to reach a wide variety of users via two types of stimuli—visual and auditory. This dual modality enables you to share information more effectively and makes your content more likely to be retained. By incorporating text, such as subtitles, you can more easily reach global audiences and possibly further increase increase retention.
Practices for Effective Video Use
To use videos effectively, you should follow certain guidelines. If videos are not your primary content, you need to ensure video content doesn’t overwhelm your user. You need to be careful not to include videos in a way that is too distracting or disorienting. Videos should complement your content and provide value in a way that text or interactivity cannot.
In general, you should make sure that the videos you include are short. Unless users are specifically seeking out a video, they are often unwilling or uninterested in watching videos longer than a few minutes. This time is even less for ambiance videos, such as those used in splash pages, backgrounds, or header bars. These videos should stick to shorter loops, generally without audio.
In particular, three aspects to pay attention to are video start-up time, playback consistency, and video quality. Users typically expect video to start within two seconds, after that they will begin abandoning content. Likewise, if a video stops mid-playback to buffer, users may give up trying to view it. Finally, if your video quality is too low, users are likely to be distracted by artifacts, like pixelation or garbled audio.
Areas of Optimization
The following are areas you should be focusing on if you want to optimize the positive impacts of your videos.
Compression
Compressing your videos reduces the amount of storage and bandwidth needed to host, deliver, and playback your content. Smaller video sizes can help speed load times and reduce buffering. When compressing your videos, remember that video compression is often a trade-off of size for quality. It’s important to find a balance of the two for your videos to have the greatest impact.
Compression is accomplished through codecs, software or hardware that encode and decode video data. There are multiple codecs you can use for a variety of compression levels and types. Choosing a codec depends on what formats you can use, what devices you need to support, and whether you want to offer multiple versions of a video.
After you’ve chosen a codec, you can compress video manually or you can use third-party solutions. Tools, such as video editing suites or content delivery networks, often have features that can automatically compress your video. These tools often enable you to perform compression and editing at the same time and can be more efficient than manual codec use.
Streaming
Streaming is ideal for larger videos, as it eliminates the need to completely download a video before playback. Allowing users to stream video enables them to begin watching sooner and can prevent wasted bandwidth if a video is abandoned part way through. Streaming is also useful for real-time video, such as video conferences or live events, which cannot be downloaded in advance.
Although streaming uses bandwidth more efficiently, you should still use compression to reduce video file sizes. The smaller your video size, the less bandwidth your user needs and the less likely they are to have to wait for buffering. When users have to repeatedly wait for videos to buffer they are more likely to abandon content and your site or application.
Responsive Design
Responsive design adapts your site or application to the specs of your user’s device. It can ensure that your content is comfortable to view and that content is visible with minimal side scrolling or manipulation.
When making your content responsive, you should optimize the size of your videos for your user device’s display size. The easiest way to do this is by setting your video width to 100% and the height to auto in your CSS styling.
It is also a good idea to specify fallback content in case your video element fails to load or your video format is unsupported. For example, a still image from the video or an error message for your user.
To make your videos more responsive, you can use the Media Capabilities API. This API enables you to determine the encoding and decoding abilities of a user’s device. It can tell you if the media is supported and what kind of performance your user can expect. It can also tell you about the supported color range and dynamic range abilities. You can use this information to optimize video quality, format, and streaming rates.
Adding Text
Adding text to your videos can make content accessible to a larger audience.
Text can be added in multiple ways:
- Subtitles—provide translations of video dialog. Subtitles are useful for non-native speakers and viewers who do not know the audio language.
- Captions—provide transcriptions of spoken words and sounds in your videos. Captions are particularly useful for viewers who can’t or don’t want to listen to video audio. Captions increase accessibility for hearing impaired users.
- Audio descriptions—provide text information describing visuals in your videos. This information is read aloud by the user’s device. Audio descriptions are typically used as an accessibility feature for users that are visually impaired.
- Overlay—text that doesn’t reflect audio content or is only used to highlight certain audio. Overlays are useful for adding information to videos, such as calls to action.
To add text, you can use the WebVTT file format and <track> element. This format includes metadata for timing, styling, and positioning. When you use WebVTT, you create a .vtt file which can then be linked with the <track> element inside your <video> tag. You should add this link after your video <source> elements. You can also add the ability to change text tracks using JavaScript.
Conclusion
Hopefully, this article helped you understand what roles video can play in web development and some ways to optimize video in your projects. If you’re ready to start adding video to your site and applications and aren’t sure where to start, check out Mozilla’s developer web docs. They have one on audio and video delivery that you should find particularly helpful.
Do you use video in your blog posts? On YouTube? For training purposes? Post your comments below and let's discuss!
