Add RAF flag

Fixes: videojs#5937
Issue originally found and explained by meikidd, see: videojs#5937 (comment)
Add requestAnimationFrame (RAF) flag to prevent RAF calls from stacking in background
This component's `update` method is called via a `setInterval` which runs when a tab is in the background.
Since `update` is continuously called, RAF calls are made each tick, but RAF does not fire in the background.
RAF calls stack while tab is in the background and will fire immediately when tab regains focus.
This causes a potentially huge number of RAF calls to attempt to immediately execute when tab regains focus, which can potentially lock up a tab entirely until all queued RAF's finish firing.
To prevent this issue, we can use a variable to track when an RAF call is made, and prevent additional calls from being made until the last queued RAF function executes.

src/js/control-bar/progress-control/load-progress-bar.js

@@ -28,6 +28,7 @@ class LoadProgressBar extends Component {
   constructor(player, options) {
     super(player, options);
     this.partEls_ = [];
+    this.needsRequestAnimationFrame = true;
     this.on(player, 'progress', this.update);
   }
 
@@ -72,6 +73,11 @@ class LoadProgressBar extends Component {
    * @listens Player#progress
    */
   update(event) {
+    // Prevent multiple RAF's from being called when tab is in background since setInterval runs in background, but RAF does not.
+    if (!this.needsRequestAnimationFrame) {
+      return;
+    }
+
     this.requestAnimationFrame(() => {
       const liveTracker = this.player_.liveTracker;
       const buffered = this.player_.buffered();
@@ -117,7 +123,13 @@ class LoadProgressBar extends Component {
         this.el_.removeChild(children[i - 1]);
       }
       children.length = buffered.length;
+
+      // Allow additional RAF's after update has completed
+      this.needsRequestAnimationFrame = true;
     });
+
+    // Prevent additional RAF's from being called
+    this.needsRequestAnimationFrame = false;
   }
 }