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 the 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, 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 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 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.

Contact us for AEM Integrations and Customizations

While AEM comes packed with features and functionalities that make the life of developers and marketers easier, it can be enhanced to offer top-notch experiences to your users. Learn more about such AEM personalizations that can enhance your users’ digital experience from certified Adobe Experience Cloud experts at Argil DX.