优化视频事件

docs/lab/js/artplayer.js

@@ -590,13 +590,13 @@
     plugins: {
       type: 'array',
       child: {
-        type: 'string|function|regexp'
+        type: 'function'
       }
     },
     whitelist: {
       type: 'array',
       child: {
-        type: 'function'
+        type: 'string|function|regexp'
       }
     },
     layers: {
@@ -782,6 +782,7 @@
       'Video info': '视频统计信息',
       Close: '关闭',
       'Video load failed': '视频加载失败',
+      'Video loading is aborted': '视频加载被中止',
       Volume: '音量',
       Play: '播放',
       Pause: '暂停',
@@ -815,6 +816,7 @@
       'Video info': '影片統計訊息',
       Close: '關閉',
       'Video load failed': '影片載入失敗',
+      'Video loading is aborted': '影片加載被中止',
       Volume: '音量',
       Play: '播放',
       Pause: '暫停',
@@ -947,54 +949,36 @@
     proxy($video, 'click', function () {
       player.toggle();
     });
-    art.on('video:loadstart', function () {
+    config.video.events.forEach(function (eventName) {
-      art.loading.show();
+      proxy($video, eventName, function (event) {
+        art.emit("video:".concat(event.type), event);
+      });
     });
-    art.on('video:loadedmetadata', function () {
+    art.on('video:abort', function () {
-      if (option.autoSize) {
+      notice.show("".concat(i18n.get('Video loading is aborted')));
-        player.autoSize();
-      }
-    });
-    art.on('video:loadeddata', function () {
-      art.loading.hide();
-    });
-    art.on('video:waiting', function () {
-      art.loading.show();
-    });
-    art.on('video:seeking', function () {
-      art.loading.show();
     });
     art.on('video:canplay', function () {
-      reconnectTime = 0;
-
       if (!firstCanplay) {
         firstCanplay = true;
+
+        if (option.autoplay) {
+          player.play();
+        }
+
         art.emit('firstCanplay');
       }
 
+      reconnectTime = 0;
       art.controls.show();
       art.mask.show();
       art.loading.hide();
+    }); // art.on('video:canplaythrough', () => {
+    // });
+    // art.on('video:durationchange', () => {
+    // });
+    // art.on('video:emptied', () => {
+    // });
 
-      if (option.autoplay) {
-        player.play();
-      }
-    });
-    art.on('video:timeupdate', function () {
-      art.isPlaying = true;
-      art.controls.hide();
-      art.mask.hide();
-    });
-    art.on('video:playing', function () {
-      art.isPlaying = true;
-      art.controls.hide();
-      art.mask.hide();
-    });
-    art.on('video:pause', function () {
-      art.isPlaying = false;
-      art.controls.show();
-      art.mask.show();
-    });
     art.on('video:ended', function () {
       art.isPlaying = false;
       art.controls.show();
@@ -1022,11 +1006,55 @@
           art.destroy();
         });
       }
+    }); // art.on('video:loadeddata', () => {
+    // });
+
+    art.on('video:loadedmetadata', function () {
+      if (option.autoSize) {
+        player.autoSize();
+      }
     });
-    config.video.events.forEach(function (eventName) {
+    art.on('video:loadstart', function () {
-      proxy($video, eventName, function (event) {
+      art.loading.show();
-        art.emit("video:".concat(event.type), event);
+    });
-      });
+    art.on('video:pause', function () {
+      art.isPlaying = false;
+      art.controls.show();
+      art.mask.show();
+    });
+    art.on('video:play', function () {
+      art.isPlaying = true;
+      art.controls.hide();
+      art.mask.hide();
+    });
+    art.on('video:playing', function () {
+      art.isPlaying = true;
+      art.controls.hide();
+      art.mask.hide();
+    }); // art.on('video:progress', () => {
+    // });
+    // art.on('video:ratechange', () => {
+    // });
+
+    art.on('video:seeked', function () {
+      art.loading.hide();
+    });
+    art.on('video:seeking', function () {
+      art.loading.show();
+    }); // art.on('video:stalled', () => {
+    // });
+    // art.on('video:suspend', () => {
+    // });
+
+    art.on('video:timeupdate', function () {
+      art.isPlaying = true;
+      art.controls.hide();
+      art.mask.hide();
+    }); // art.on('video:volumechange', () => {
+    // });
+
+    art.on('video:waiting', function () {
+      art.loading.show();
     });
   }
 
@@ -5071,6 +5099,7 @@
       value: function hide() {
         var $loading = this.art.refs.$loading;
         setStyle($loading, 'display', 'none');
+        console.log('hide');
         this.art.emit('loading:hide', $loading);
       }
     }, {
@@ -5078,6 +5107,7 @@
       value: function show() {
         var $loading = this.art.refs.$loading;
         setStyle($loading, 'display', 'flex');
+        console.log('show');
         this.art.emit('loading:show', $loading);
       }
     }]);

docs/lab/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.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.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/pauseMin.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/switchQualityMix.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/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/mse.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.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.jLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.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.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/pauseMin.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/switchQualityMix.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/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/mse.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.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.jLine truncated

packages/artplayer/src/i18n.js

@@ -6,6 +6,7 @@ let i18nMap = {
         'Video info': '视频统计信息',
         Close: '关闭',
         'Video load failed': '视频加载失败',
+        'Video loading is aborted': '视频加载被中止',
         Volume: '音量',
         Play: '播放',
         Pause: '暂停',
@@ -39,6 +40,7 @@ let i18nMap = {
         'Video info': '影片統計訊息',
         Close: '關閉',
         'Video load failed': '影片載入失敗',
+        'Video loading is aborted': '影片加載被中止',
         Volume: '音量',
         Play: '播放',
         Pause: '暫停',

packages/artplayer/src/loading.js

@@ -14,12 +14,14 @@ export default class Loading {
     hide() {
         const { $loading } = this.art.refs;
         setStyle($loading, 'display', 'none');
+        console.log('hide');
         this.art.emit('loading:hide', $loading);
     }
 
     show() {
         const { $loading } = this.art.refs;
         setStyle($loading, 'display', 'flex');
+        console.log('show');
         this.art.emit('loading:show', $loading);
     }
 }

packages/artplayer/src/player/eventInit.js

@@ -17,60 +17,42 @@ export default function eventInit(art, player) {
         player.toggle();
     });
 
-    art.on('video:loadstart', () => {
+    config.video.events.forEach(eventName => {
-        art.loading.show();
+        proxy($video, eventName, event => {
+            art.emit(`video:${event.type}`, event);
+        });
     });
 
-    art.on('video:loadedmetadata', () => {
+    art.on('video:abort', () => {
-        if (option.autoSize) {
+        notice.show(`${i18n.get('Video loading is aborted')}`);
-            player.autoSize();
-        }
-    });
-
-    art.on('video:loadeddata', () => {
-        art.loading.hide();
-    });
-
-    art.on('video:waiting', () => {
-        art.loading.show();
-    });
-
-    art.on('video:seeking', () => {
-        art.loading.show();
     });
 
     art.on('video:canplay', () => {
-        reconnectTime = 0;
         if (!firstCanplay) {
             firstCanplay = true;
+            if (option.autoplay) {
+                player.play();
+            }
             art.emit('firstCanplay');
         }
 
+        reconnectTime = 0;
         art.controls.show();
         art.mask.show();
         art.loading.hide();
-        if (option.autoplay) {
-            player.play();
-        }
     });
 
-    art.on('video:timeupdate', () => {
+    // art.on('video:canplaythrough', () => {
-        art.isPlaying = true;
-        art.controls.hide();
-        art.mask.hide();
-    });
 
-    art.on('video:playing', () => {
+    // });
-        art.isPlaying = true;
-        art.controls.hide();
-        art.mask.hide();
-    });
 
-    art.on('video:pause', () => {
+    // art.on('video:durationchange', () => {
-        art.isPlaying = false;
+
-        art.controls.show();
+    // });
-        art.mask.show();
+
-    });
+    // art.on('video:emptied', () => {
+
+    // });
 
     art.on('video:ended', () => {
         art.isPlaying = false;
@@ -101,9 +83,73 @@ export default function eventInit(art, player) {
         }
     });
 
-    config.video.events.forEach(eventName => {
+    // art.on('video:loadeddata', () => {
-        proxy($video, eventName, event => {
+        
-            art.emit(`video:${event.type}`, event);
+    // });
-        });
+
+    art.on('video:loadedmetadata', () => {
+        if (option.autoSize) {
+            player.autoSize();
+        }
+    });
+
+    art.on('video:loadstart', () => {
+        art.loading.show();
+    });
+
+    art.on('video:pause', () => {
+        art.isPlaying = false;
+        art.controls.show();
+        art.mask.show();
+    });
+
+    art.on('video:play', () => {
+        art.isPlaying = true;
+        art.controls.hide();
+        art.mask.hide();
+    });
+
+    art.on('video:playing', () => {
+        art.isPlaying = true;
+        art.controls.hide();
+        art.mask.hide();
+    });
+
+    // art.on('video:progress', () => {
+
+    // });
+
+    // art.on('video:ratechange', () => {
+
+    // });
+
+    art.on('video:seeked', () => {
+        art.loading.hide();
+    });
+
+    art.on('video:seeking', () => {
+        art.loading.show();
+    });
+
+    // art.on('video:stalled', () => {
+        
+    // });
+
+    // art.on('video:suspend', () => {
+        
+    // });
+
+    art.on('video:timeupdate', () => {
+        art.isPlaying = true;
+        art.controls.hide();
+        art.mask.hide();
+    });
+
+    // art.on('video:volumechange', () => {
+        
+    // });
+
+    art.on('video:waiting', () => {
+        art.loading.show();
     });
 }

packages/artplayer/src/scheme/index.js

@@ -37,13 +37,13 @@ export default {
     plugins: {
         type: 'array',
         child: {
-            type: 'string|function|regexp',
+            type: 'function',
         },
     },
     whitelist: {
         type: 'array',
         child: {
-            type: 'function',
+            type: 'string|function|regexp',
         },
     },
     layers: {