添加muted功能

docs/lab/js/artplayer.js

@@ -591,6 +591,7 @@
     mimeCodec: 'string',
     theme: 'string',
     volume: 'number',
+    muted: 'boolean',
     autoplay: 'boolean',
     autoSize: 'boolean',
     loop: 'boolean',
@@ -865,6 +866,10 @@
       $video[key] = option.moreVideoAttr[key];
     });
 
+    if (option.muted) {
+      $video.muted = option.muted;
+    }
+
     if (option.volume) {
       $video.volume = clamp(option.volume, 0, 1);
     }
@@ -1070,12 +1075,13 @@
         }
       }
     });
-    Object.defineProperty(player, 'mute', {
+    Object.defineProperty(player, 'muted', {
       get: function get() {
-        return player.volume === 0;
+        return $video.muted;
       },
-      set: function set(mute) {
-        player.volume = mute ? 0 : storage.get('volume');
+      set: function set(muted) {
+        $video.muted = muted;
+        art.emit('volumeChange', $video.volume);
       }
     });
   }
@@ -3578,46 +3584,35 @@
       value: function apply(art, $control) {
         var _this = this;
 
+        this.art = art;
         var _art$events = art.events,
             proxy = _art$events.proxy,
             hover = _art$events.hover,
             player = art.player,
-            i18n = art.i18n,
-            storage = art.storage;
+            i18n = art.i18n;
         this.$volume = append($control, icons.volume);
         this.$volumeClose = append($control, icons.volumeClose);
         this.$volumePanel = append($control, '<div class="art-volume-panel"></div>');
         this.$volumeHandle = append(this.$volumePanel, '<div class="art-volume-slider-handle"></div>');
         tooltip(this.$volume, i18n.get('Mute'));
         setStyle(this.$volumeClose, 'display', 'none');
-        art.on('volumeChange', function (percentage) {
-          if (percentage === 0) {
-            setStyle(_this.$volume, 'display', 'none');
-            setStyle(_this.$volumeClose, 'display', 'flex');
-          } else {
-            setStyle(_this.$volume, 'display', 'flex');
-            setStyle(_this.$volumeClose, 'display', 'none');
-          }
-        });
+        this.setVolumeHandle(player.volume);
         art.on('video:volumechange', function () {
           _this.setVolumeHandle(player.volume);
         });
         proxy(this.$volume, 'click', function () {
-          player.mute = true;
+          player.muted = true;
         });
         proxy(this.$volumeClose, 'click', function () {
-          player.mute = false;
+          player.muted = false;
         });
         hover($control, function () {
           _this.$volumePanel.classList.add('art-volume-panel-hover');
-
-          sleep(200).then(function () {
-            _this.setVolumeHandle(player.volume);
-          });
         }, function () {
           _this.$volumePanel.classList.remove('art-volume-panel-hover');
         });
         proxy(this.$volumePanel, 'click', function (event) {
+          player.muted = false;
           player.volume = _this.volumeChangeFromEvent(event);
         });
         proxy(this.$volumeHandle, 'mousedown', function () {
@@ -3625,6 +3620,7 @@
         });
         proxy(this.$volumeHandle, 'mousemove', function (event) {
           if (_this.isDroging) {
+            player.muted = false;
             player.volume = _this.volumeChangeFromEvent(event);
           }
         });
@@ -3651,10 +3647,23 @@
       key: "setVolumeHandle",
       value: function setVolumeHandle() {
         var percentage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.7;
-        var panelWidth = getStyle(this.$volumePanel, 'width');
-        var handleWidth = getStyle(this.$volumeHandle, 'width');
-        var width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
-        setStyle(this.$volumeHandle, 'left', "".concat(width, "px"));
+        var player = this.art.player;
+
+        if (player.muted || percentage === 0) {
+          setStyle(this.$volume, 'display', 'none');
+          setStyle(this.$volumeClose, 'display', 'flex');
+          setStyle(this.$volumeHandle, 'left', '0');
+        } else {
+          // TODO...
+          var panelWidth = getStyle(this.$volumePanel, 'width') || 60;
+          var handleWidth = getStyle(this.$volumeHandle, 'width');
+          console.log('panelWidth', panelWidth);
+          console.log('handleWidth', handleWidth);
+          var width = handleWidth / 2 + (panelWidth - handleWidth) * percentage - handleWidth / 2;
+          setStyle(this.$volume, 'display', 'flex');
+          setStyle(this.$volumeClose, 'display', 'none');
+          setStyle(this.$volumeHandle, 'left', "".concat(width, "px"));
+        }
       }
     }]);
 
@@ -5537,6 +5546,7 @@
           mimeCodec: '',
           theme: '#f00',
           volume: 0.7,
+          muted: false,
           autoplay: false,
           autoSize: false,
           loop: false,

docs/lab/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../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/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/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.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/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/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/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.js","../../../packages/artplayer/src/contextmenu/info.js","../../../packages/artplayer/src/contextmenu/version.js","..Line truncated
+{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../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/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/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.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/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/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/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.js","../../../packages/artplayer/src/contextmenu/info.js","../../../packages/artplayer/src/contextmenu/version.js","..Line truncated

docs/lab/js/index.js

@@ -5,7 +5,8 @@ var art = new Artplayer({
   title: '【新海诚动画】『秒速5センチメートル』',
   poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
   volume: 0.5,
-  autoplay: true,
+  muted: false,
+  autoplay: false,
   pip: true,
   autoSize: true,
   screenshot: true,
@@ -96,20 +97,23 @@ var art = new Artplayer({
   ]
 });
 
-art.on('resize', $player => {
-  art.controls.quality.show();
-  art.controls.setting.show();
-  art.controls.subtitle.show();
-  art.controls.pip.show();
 
-  var playerWidth = $player.clientWidth;
-  if (playerWidth < 480) {
-    art.controls.quality.hide();
-    art.controls.setting.hide();
-  } 
+art.on('firstCanplay', () => {
+  art.on('resize', $player => {
+    art.controls.quality.show();
+    art.controls.setting.show();
+    art.controls.subtitle.show();
+    art.controls.pip.show();
   
-  if (playerWidth < 360) {
-    art.controls.subtitle.hide();
-    art.controls.pip.hide();
-  }
+    var playerWidth = $player.clientWidth;
+    if (playerWidth < 480) {
+      art.controls.quality.hide();
+      art.controls.setting.hide();
+    } 
+    
+    if (playerWidth < 360) {
+      art.controls.subtitle.hide();
+      art.controls.pip.hide();
+    }
+  });
 });