JSFiddle - React, Tailwind, and code Playground

by Abid Shaik

HTML

<!-- Video Buffering on Low Bandwith -->
<video autobuffer controls autoplay loop id="myv">
<source src="http://babcockranch.brightdoor.com/kioskapp/videos/babcock-intro.mp4" type="video/mp4" preload="auto">
</video>

CSS

video{
  width: 80%;
}

JavaScript

var checkInterval  = 15000
var lastPlayPos    = 0
var currentPlayPos = 0
var bufferingDetected = false
var player = document.getElementById('myv')
checkBuffering(); 

setInterval(checkBuffering, checkInterval)
var i =0; 

function checkBuffering() {
    currentPlayPos = player.currentTime; 
    console.log(currentPlayPos); 
    console.log(i); 
 i++; 
 if (i >=5)
{
i=0; 
	player.play(); 
}
    // 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.pause(); 
    }

    // 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
        player.play();
    }
    lastPlayPos = currentPlayPos
}