添加监听视频卡顿的插件

docs/assets/example/index.js

@@ -21,6 +21,7 @@ var art = new Artplayer({
     subtitleOffset: true,
     miniProgressBar: true,
     localPreview: true,
+    networkMonitor: false,
     autoPip: true,
     mutex: true,
     theme: '#ffad00',

docs/document/README.md

@@ -617,6 +617,34 @@ var art = new Artplayer({
 });
 ```
 
+## networkMonitor
+
+-   Type: `Boolean`
+-   Default: `false`
+
+A network monitor is used to monitor the blocking of the video.
+
+[Run Code](/)
+
+```js
+var url = 'https://zhw2590582.github.io/assets-cdn';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    networkMonitor: true,
+});
+
+// Is the ratio of the time the video is blocked to the time the video has been played.
+// For example, when the ratio is equal to 0.3, it means that every ten seconds, it is blocked for three seconds.
+let notice = false;
+art.on('networkMonitor', ratio => {
+    if (ratio >= 0.5 && !notice) {
+        notice = true;
+        console.log('Current network condition is not good');
+    }
+});
+```
+
 ## subtitle
 
 -   Type: `Object`

docs/uncompiled/artplayer.js

@@ -576,6 +576,7 @@
     miniProgressBar: 'boolean',
     localPreview: 'boolean',
     autoPip: 'boolean',
+    networkMonitor: 'boolean',
     plugins: ['function'],
     whitelist: ['string|function|regexp'],
     layers: [{
@@ -1856,6 +1857,11 @@
         return $video.buffered.length ? $video.buffered.end($video.buffered.length - 1) / $video.duration : 0;
       }
     });
+    Object.defineProperty(player, 'loadedTime', {
+      get: function get() {
+        return $video.buffered.length ? $video.buffered.end($video.buffered.length - 1) : 0;
+      }
+    });
   }
 
   function seekMix$2(art, player) {
@@ -4213,6 +4219,53 @@
     };
   }
 
+  function networkMonitor(art) {
+    var waitTime = 0;
+    var playTime = 0;
+    var lastTime = 0;
+    var timer = null;
+
+    function resetTime() {
+      waitTime = 0;
+      playTime = 0;
+      lastTime = 0;
+      cancelAnimationFrame(timer);
+      timer = null;
+    }
+
+    function calculatingTime() {
+      if (timer) return;
+
+      (function loop() {
+        if (art.isDestroy) return;
+        timer = requestAnimationFrame(function () {
+          var nowTime = Date.now();
+
+          if (lastTime) {
+            var diffTime = nowTime - lastTime;
+            playTime += diffTime;
+
+            if (!art.player.playing) {
+              waitTime += diffTime;
+            }
+          }
+
+          lastTime = nowTime;
+          art.emit('networkMonitor', waitTime / playTime);
+          loop();
+        });
+      })();
+    }
+
+    art.on('play', calculatingTime);
+    art.on('pause', resetTime);
+    return {
+      name: 'networkMonitor',
+      reset: resetTime,
+      calculating: calculatingTime
+    };
+  }
+
   function autoPip(art) {
     var events = art.events,
         player = art.player,
@@ -4229,6 +4282,9 @@
       }
     }, 300);
     events.proxy(window, 'scroll', scrollDebounce);
+    return {
+      name: 'autoPip'
+    };
   }
 
   var Plugins =
@@ -4255,6 +4311,10 @@
         this.add(localPreview);
       }
 
+      if (option.networkMonitor) {
+        this.add(networkMonitor);
+      }
+
       if (option.autoPip) {
         this.add(autoPip);
       }
@@ -4464,6 +4524,7 @@
           miniProgressBar: false,
           localPreview: false,
           autoPip: false,
+          networkMonitor: false,
           layers: [],
           contextmenu: [],
           quality: [],

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/ArtPlayerError.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/setting/flip.js","../../packages/artplayer/src/setting/aspectRatio.js","../../packages/artplayer/src/setting/playbackRaLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/ArtPlayerError.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/setting/flip.js","../../packages/artplayer/src/setting/aspectRatio.js","../../packages/artplayer/src/setting/playbackRaLine truncated

packages/artplayer/src/index.js

@@ -125,6 +125,7 @@ class Artplayer extends Emitter {
             miniProgressBar: false,
             localPreview: false,
             autoPip: false,
+            networkMonitor: false,
             layers: [],
             contextmenu: [],
             quality: [],

packages/artplayer/src/player/loadedMix.js

@@ -3,4 +3,8 @@ export default function seekMix(art, player) {
     Object.defineProperty(player, 'loaded', {
         get: () => ($video.buffered.length ? $video.buffered.end($video.buffered.length - 1) / $video.duration : 0),
     });
+
+    Object.defineProperty(player, 'loadedTime', {
+        get: () => ($video.buffered.length ? $video.buffered.end($video.buffered.length - 1) : 0),
+    });
 }

packages/artplayer/src/plugins/autoPip.js

@@ -11,4 +11,8 @@ export default function autoPip(art) {
         }
     }, 300);
     events.proxy(window, 'scroll', scrollDebounce);
+
+    return {
+        name: 'autoPip',
+    }
 }

packages/artplayer/src/plugins/index.js

@@ -2,6 +2,7 @@ import { errorHandle, hasOwnProperty } from '../utils';
 import subtitleOffset from './subtitleOffset';
 import localPreview from './localPreview';
 import miniProgressBar from './miniProgressBar';
+import networkMonitor from './networkMonitor';
 import autoPip from './autoPip';
 
 export default class Plugins {
@@ -23,6 +24,10 @@ export default class Plugins {
             this.add(localPreview);
         }
 
+        if (option.networkMonitor) {
+            this.add(networkMonitor);
+        }
+
         if (option.autoPip) {
             this.add(autoPip);
         }

packages/artplayer/src/plugins/networkMonitor.js

@@ -0,0 +1,43 @@
+export default function networkMonitor(art) {
+    let waitTime = 0;
+    let playTime = 0;
+    let lastTime = 0;
+    let timer = null;
+
+    function resetTime() {
+        waitTime = 0;
+        playTime = 0;
+        lastTime = 0;
+        cancelAnimationFrame(timer);
+        timer = null;
+    }
+
+    function calculatingTime() {
+        if (timer) return;
+        (function loop() {
+            if (art.isDestroy) return;
+            timer = requestAnimationFrame(() => {
+                const nowTime = Date.now();
+                if (lastTime) {
+                    const diffTime = nowTime - lastTime;
+                    playTime += diffTime;
+                    if (!art.player.playing) {
+                        waitTime += diffTime;
+                    }
+                }
+                lastTime = nowTime;
+                art.emit('networkMonitor', waitTime / playTime);
+                loop();
+            });
+        })();
+    }
+
+    art.on('play', calculatingTime);
+    art.on('pause', resetTime);
+
+    return {
+        name: 'networkMonitor',
+        reset: resetTime,
+        calculating: calculatingTime,
+    };
+}

packages/artplayer/src/scheme/index.js

@@ -34,6 +34,7 @@ export default {
     miniProgressBar: 'boolean',
     localPreview: 'boolean',
     autoPip: 'boolean',
+    networkMonitor: 'boolean',
     plugins: ['function'],
     whitelist: ['string|function|regexp'],
     layers: [