Seeking Smoothness Issue with HLS.js – Buffering Interruptions

I’m currently experiencing buffering interruptions when seeking forward or backward in a video streamed using HLS.js with Cloudflare Stream. Despite configuring HLS.js with various optimizations, I’m still facing this issue, particularly during seek operations. My goal is to implement a smooth seeking feature without buffering interruptions.

HLS Configuration:

const hls = new Hls({
  startFragPrefetch: true,
  // abrMaxWithRealBitrate: true,
  // abrBandWidthUpFactor: 2,
  initialLiveManifestSize: 10,
  abrBandWidthFactor: 0.1,
  maxBufferLength: 120,
  maxFragLookUpTolerance: 0.05,
});

Description:

I’m using HLS.js to stream videos from Cloudflare Stream, and while the playback itself is generally smooth, I encounter buffering interruptions when seeking forward or backward in the video. These interruptions occur every 2-4 seconds after seeking, leading to a suboptimal viewing experience for users.

I’ve tried adjusting various HLS.js configurations, such as increasing the buffer length (maxBufferLength) and adjusting the Adaptive Bitrate (ABR) parameters (abrBandWidthFactor). However, these changes haven’t resolved the buffering issue during seek operations.

Objective:

My primary objective is to implement a smooth seeking feature that allows users to navigate through the video timeline without encountering buffering interruptions. I’m seeking advice or suggestions on how to achieve this using HLS.js and Cloudflare Stream, whether through configuration optimizations, code adjustments, or other techniques.

Request for Assistance:

  • Are there any specific HLS.js configurations or optimizations that I should consider for implementing smooth seeking functionality?
  • Are there any best practices or techniques for reducing buffering interruptions during seek operations in HLS video streams?
  • Is there any additional information or context that I should provide to better diagnose and address this issue?