添加移动端用户手势

docs/uncompiled/artplayer.js

@@ -1414,7 +1414,7 @@
   function durationMix(art, player) {
     def(player, 'duration', {
       get: function get() {
-        return art.template.$video.duration || 0;
+        return art.template.$video.duration || Infinity;
       }
     });
   }
@@ -3511,6 +3511,40 @@
     $player.appendChild(object);
   }
 
+  function gestureInit(art, events) {
+    if (art.isMobile && !art.option.isLive) {
+      var player = art.player,
+          notice = art.notice,
+          $video = art.template.$video;
+      var isDroging = false;
+      var startX = 0;
+      var currentTime = 0;
+      events.proxy($video, 'touchstart', function (event) {
+        if (event.touches.length === 1) {
+          isDroging = true;
+          startX = event.touches[0].clientX;
+        }
+      });
+      events.proxy(document, 'touchmove', function (event) {
+        if (event.touches.length === 1 && isDroging) {
+          var widthDiff = event.touches[0].clientX - startX;
+          var proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
+          currentTime = clamp(player.currentTime + 60 * proportion, 0, player.duration);
+          notice.show = "".concat(secondToTime(currentTime), " / ").concat(secondToTime(player.duration));
+        }
+      });
+      events.proxy(document, 'touchend', function () {
+        if (isDroging && currentTime) {
+          player.seek = currentTime;
+        }
+
+        isDroging = false;
+        startX = 0;
+        currentTime = 0;
+      });
+    }
+  }
+
   var Events =
   /*#__PURE__*/
   function () {
@@ -3530,6 +3564,7 @@
           hoverInit(art, _this);
           mousemoveInitInit(art, _this);
           resizeInit(art, _this);
+          gestureInit(art, _this);
         });
       }
     }

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","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.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/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.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","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.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/urlMix.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/lightMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/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/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.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/layer.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../pacLine 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","../../node_modules/style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.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/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.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","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.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/urlMix.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/lightMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/@babel/runtime/helpers/superPropBase.js","../../node_modules/@babel/runtime/helpers/get.js","../../packages/artplayer/src/utils/component.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.js","../../packages/artplayer/src/control/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/light.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.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/gestureInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layer.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","..Line truncated

packages/artplayer/src/events/gestureInit.js

@@ -0,0 +1,40 @@
+import { clamp, secondToTime } from '../utils';
+
+export default function gestureInit(art, events) {
+    if (art.isMobile && !art.option.isLive) {
+        const {
+            player,
+            notice,
+            template: { $video },
+        } = art;
+
+        let isDroging = false;
+        let startX = 0;
+        let currentTime = 0;
+
+        events.proxy($video, 'touchstart', (event) => {
+            if (event.touches.length === 1) {
+                isDroging = true;
+                startX = event.touches[0].clientX;
+            }
+        });
+
+        events.proxy(document, 'touchmove', (event) => {
+            if (event.touches.length === 1 && isDroging) {
+                const widthDiff = event.touches[0].clientX - startX;
+                const proportion = clamp(widthDiff / $video.clientWidth, -1, 1);
+                currentTime = clamp(player.currentTime + 60 * proportion, 0, player.duration);
+                notice.show = `${secondToTime(currentTime)} / ${secondToTime(player.duration)}`;
+            }
+        });
+
+        events.proxy(document, 'touchend', () => {
+            if (isDroging && currentTime) {
+                player.seek = currentTime;
+            }
+            isDroging = false;
+            startX = 0;
+            currentTime = 0;
+        });
+    }
+}

packages/artplayer/src/events/index.js

@@ -2,6 +2,7 @@ import clickInit from './clickInit';
 import hoverInit from './hoverInit';
 import mousemoveInit from './mousemoveInit';
 import resizeInit from './resizeInit';
+import gestureInit from './gestureInit';
 
 export default class Events {
     constructor(art) {
@@ -16,6 +17,7 @@ export default class Events {
                 hoverInit(art, this);
                 mousemoveInit(art, this);
                 resizeInit(art, this);
+                gestureInit(art, this);
             });
         }
     }

packages/artplayer/src/player/durationMix.js

@@ -2,6 +2,6 @@ import { def } from '../utils';
 
 export default function durationMix(art, player) {
     def(player, 'duration', {
-        get: () => art.template.$video.duration || 0,
+        get: () => art.template.$video.duration || Infinity,
     });
 }