1

I am using some nice html5 video background for div, but on very slow connections, it is pausing for buffering every second. I want to create such logic: start playing after 10s buffered, and if playback is faster and it start buffering, smoothly seek video to begin (or to buffered range), to allow more buffering and don't stop playback (position doesn't matter much).

So the goal is have a forever-playing looping video, even if buffer is low

I found some code in this question: How to detect whether HTML5 video has paused for buffering?

And tried it in such way: 

var checkInterval  = 50.0
var lastPlayPos    = 0
var currentPlayPos = 0
var bufferingDetected = false

setInterval(checkBuffering, checkInterval)

function checkBuffering() {
    var player = document.getElementById('bgvideo')
    currentPlayPos = player.currentTime

    // checking offset, e.g. 1 / 50ms = 0.02
    var offset = 1 / checkInterval

    // if no buffering is currently detected,
    // and the position does not seem to increase
    // and the player isn't manually paused...
    if (
            !bufferingDetected 
            && currentPlayPos < (lastPlayPos + offset)
            && !player.paused
        ) {
        console.log("buffering")
        bufferingDetected = true
        player.currentTime=0; //seek to begin
    }

    // if we were buffering but the player has advanced,
    // then there is no buffering
    if (
        bufferingDetected 
        && currentPlayPos > (lastPlayPos + offset)
        && !player.paused
        ) {
        console.log("not buffering anymore")
        bufferingDetected = false
    }
    lastPlayPos = currentPlayPos
}

It doesn't work well, because when seeking to begin, buffer is flushed sometimes and it start buffering from begin. The seeking is not smooth and give a 2 sec pause, also this code don't resolve 10s prebuffer on beginning.

I've heared about MSE, but I am not sure it is supported everywhere and is very hard to understand.

Experts, please help!

Ural
  • 385
  • 4
  • 11
  • depending on the size of your video you may be able to use this technique - https://stackoverflow.com/questions/18251632/another-force-chrome-to-fully-buffer-mp4-video/18294706#18294706 - to fully load the video and play it back from a local buffer rather than stream... – Offbeatmammal Dec 13 '16 at 12:10
  • That's not an option, I need to have instant playback. But thanks for answer – Ural Feb 09 '17 at 09:24
  • a multi-bitrate format (ie HLS) will help get you started quickly and can step up/down quality as bitrate improves, but to get what you want you'll probably need a very low quality option in the stream. – Offbeatmammal Feb 09 '17 at 16:49
  • I know about DASH. but not all browsers support it. Can I use DASH with fallback, like keep in – Ural Feb 10 '17 at 12:01

0 Answers0