Video Buffer Optimization in AEM

Video is one of the most effective and easiest mediums of communicating information to your audience. If you’re looking to use this format of communication on your website, you would want it to work as seamlessly as possible. Video buffer optimization can help you considerably improve video playback and streaming capabilities on your website. Before diving into video buffer optimization and its implementation in AEM, let’s take a look at why it is required.

In the early days of the internet, web browsers played videos via embedded video players like RealPlayer and Windows Media Player. This required custom codecs and browser plugins. The trend then moved on to Flash and Quicktime, which slowed down our browsers and sometimes caused security concerns.

It took more than a decade to create <video> tag and achieve browser support for it. Today, most of the web is using <video> tag and as a result there are fewer browser crashes, less memory used, and smoother playback.

Basic <video> Tag Usage
Let’s look at an example of the use of <video> tag:

<video width="640" height="480" poster="sample-video.jpg" controls autoplay preload>
 <source src="sample-video.webm" type="video/webm">
 <source src="sample-video.ogv" type="video/ogg">
 <source src="sample-video.mp4" type="video/mp4">
</video>

Online Video Buffer
All these worked fine until we faced issues with <video> tag implementation. The function of this tag is to download all video data on page load by default. However, if the preload attribute is set to none, the video will not be downloaded by the browser on page load but only when a user clicks or plays the video. So, we are just delaying the process and not allowing a seamless video playback and stream. Also, what if we want the video to be downloaded in packets or chunks and save bandwidth e.g. online video buffering.

Why do we need video buffer optimization?
The HTML5 <video> tag is not flexible enough if you need to add extra features and customizations on it. For such purposes you will need to use third-party APIs. Video.js is one such API that provides extra features and theme options on our traditional <video> tag.

If we increase a video size, then the time is taken by the video to play or load will also increase. So, if we use a video of bigger size on a slow internet connection and we want to provide a smoother experience to end-user, we will have to optimize the video buffer process.

So, the workaround for this problem would be ‘play, pause, and progress’. This means every time the progress event is triggered, we can check if the video is buffered by some percent (say 10%). It will continue buffering only “what’s needed” when the video starts playing. That means the video will never be fully buffered.

Steps for Implementing the Video Buffer Optimization
Let’s take a look at how to implement video buffer optimization in AEM to allow a more seamless video playback and stream.

Player.on("progress", function () {
   // Get Current Video seek time.
    var currentTime = Player.currentTime();
    
    if (lastTime !== currentTime) {
        lastTime = currentTime;
    } else if (myPlayer.paused() === false) {
         // (this.paused() will return true even if it's buffering, so we have to check the time advancement)
        // Video is buffering/waiting.
        buffered = false;

        bufferPause = true; // To indicate pause was initiated by this buffer check

        lastBuffer = Player.bufferedPercent(); // To get the buffer percent of video.
        // This buffer greater then 10% of the video. (0.1 = 10%)
    } else if (!buffered && (Player.bufferedPercent() - lastBuffer > 0 || Player.bufferedPercent() > 0.1)) {
        buffered = true;


        // Resume playing if an additional 10% has been buffered.
        if (bufferPause) {
            Player.play();
        }
    }
})

So, now you can get working on providing smooth video playback or streaming for your users on your AEM website. Feel free to write to us for any queries on this video buffer optimization or anything related to AEM.