How to Optimize Video in Your Web Application to Make Users Happier

Video is an effective medium for informing, engaging, and entertaining users. However, low-quality files and videos that take too long to load are a sure way to alienate users. To prevent these issues, you need to optimize video files. You can do that in a variety of ways. In this article, you will learn about video embedding and video compression, including tips for optimizing videos for the web.

Video Embedding: What are the Options?

The first step to optimizing video in your applications is choosing the right video player. There are two main methods you can use for this — native HTML5 embedding and the use of iframes, such as those used by Youtube, Vimeo, and Wordpress.

HTML5 video player
The HTML5 player is a native player that supports a broad range of devices and browsers. To use it you use the <video> tag in your HTML with a link to your video source. When using this method, you can use three different video formats — OGG, WebM, and MP4.

Pros of HTML5 include:

• Built-in streaming functionality
• No need for middleware, like Flash
• Supported by all modern browsers

Cons of HTML5 include:

• Older browsers not supported
• You need to host videos
• Ensuring format compatibility requires extra work

YouTube (YT)
Embedding YouTube videos in an <iframe> is perhaps the most common method of including videos in sites. This is easily accomplished since you can gather all necessary code from the embed option in the share button displayed underneath each YT video. Additionally, YT has supported playback in both Flash and HTML5 since 2015.

Pros of YT include:

• Easy to embed
• Videos are hosted for you
• Offers options for video promotion and advertising
• Provides cross-platform playback.

Cons of YT include:

• Users may transition to YT away from your site after a video
• Unwanted ads may be added
• Reliant on YT hosting availability
• Minimal options for player customization

Vimeo
Vimeo offers an embedding option similar to YouTube. However, Vimeo also offers paid options for greater customization, privacy options, video management, and HD video uploading. You can still upload, host, and embed videos with the free option as well.

Pros of Vimeo include:

• Free hosting
• Polished player
• Supports most browsers
• Customizable web player

Cons of Vimeo include:

• Embedding HD videos requires paid account
• Lacking video promotion options
• Users may transition to Vimeo away from your site after a video

Wordpress web video player
WordPress, a popular blogging and site platform, also supports native embedding. It enables you to embed video and audio in the same way you include images. To use this option, you simply need to upload your video, in streaming format.

Pros:

• Fast and easy to embed video
• Allows you to use multiple video sources

Cons:

• 100 MB limit without premium account
• Requires self-hosting
• Player is not customizable

Video Optimization Tips for Web Applications

Once you’ve decided how you want to embed your videos, you can set about optimizing for the best possible user experience.

Compress your videos
Compress your videos to reduce your hosting burdens and the amount of bandwidth needed to transfer or receive videos. Smaller video file sizes load faster and consume less data. These are significant benefits when you consider that many of your users are likely using mobile devices and networks to access your app.

When compressing videos make sure to select your tool and codec carefully. The format you choose, amount of compression, and compression settings, all have an impact on the final quality of your videos. For the best experience, you need to find a balance between size and quality. You can also try using ready-made Artificial Intelligence (AI) software or Machine Learning algoritms to improve the resualts of your compression efforts.

Don’t use endless loops
With few exceptions, endlessly looping videos annoy users. These videos also require more CPU resources, slowing down your user’s client and your page. To avoid looping, you can set videos to stop playing after one time through. If you have a shorter video that you want to loop a few times, such as a banner video, set the video to stop after a few seconds or once the user scrolls.

Prioritize mobile compatibility
Mobile devices account for just over half of all browsing. This means that if you want to provide a positive app experience, you need to offer optimizations for mobile devices. When setting up videos, you need to make sure that you apply the same responsive principles you’ve applied to the rest of your app.

Make sure that responsive settings account for device dimensions, orientation, and specifications. Provide multiple versions of your video source to ensure that it is playable on all devices. To specify these settings, the easiest method is with media queries. However, keep in mind that older browsers may not support this method.

You can see an example media query below. For additional devices, you can add more queries with different width specifications:

@media screen and (max-width: 600px) {
    #video {
        display: none;
    }
}         

Provide video controls
Make sure that you provide unobtrusive video controls for your users. If a video cannot be paused or muted, users are more likely to get annoyed. Likewise, if a user is on your app for a video but they aren’t able to make it full screen, they may go elsewhere for content.

How you add controls depends on your embedding method. With <iframe> videos, you can add a controls parameter. Set this parameter to 0 if you want to hide controls and 1 to display controls (the default). With <video> content, you also include a controls parameter. However, you then also have the option of styling these controls with additional HTML/CSS.

You can see an example of this styling below:

<div id="video-control" class="controls" data-state="hidden"> 
      <button id="playpause" type="button" data-state="play">
      Play/Pause </button> 
      <button id="stop" type="button" data-state="stop"> Stop </button>
      <div class="progress"> 
           <progress id="progress" value="0" min="0"> 
                <span id="progress-bar"></span> 
           </progress> 
      </div> 
      <button id="mute" type="button" data-state="mute"> Mute/Unmute
      </button> 
</div>

.controls { 
     width:100%; 
     height:10%; /* of figure's height */ 
     position:relative; 
}

Conclusion
To ensure your users are happy with video quality and load time, you can apply a variety of video optimization techniques. Video embedding can help you to easily share videos on your site, but be sure to choose the right format for your video. If your video is hosted on YouTube, using YouTube embedding might be more optimal than an HTML player. Compress your files to provide fast-loading, and don’t use endless loops. There’s no need to waste resources on loops that most users don’t even like.