diff --git a/packages/artplayer/src/config/index.js b/packages/artplayer/src/config/index.js
index b99a9ffe7..42311163d 100644
--- a/packages/artplayer/src/config/index.js
+++ b/packages/artplayer/src/config/index.js
@@ -1,5 +1,5 @@
 export default {
-    propertys: [
+    properties: [
         'audioTracks',
         'autoplay',
         'buffered',
diff --git a/packages/artplayer/src/control/airplay.js b/packages/artplayer/src/control/airplay.js
index 315e18c9f..d2f3c7b18 100644
--- a/packages/artplayer/src/control/airplay.js
+++ b/packages/artplayer/src/control/airplay.js
@@ -1,6 +1,6 @@
 import { append } from '../utils';
 
-export default function pip(option) {
+export default function airplay(option) {
     return (art) => ({
         ...option,
         tooltip: art.i18n.get('AirPlay'),
diff --git a/packages/artplayer/src/control/progress.js b/packages/artplayer/src/control/progress.js
index d22688ab3..78ee5b25a 100644
--- a/packages/artplayer/src/control/progress.js
+++ b/packages/artplayer/src/control/progress.js
@@ -42,7 +42,7 @@ export default function progress(options) {
             `,
             mounted: ($control) => {
                 let tipTimer = null;
-                let isDroging = false;
+                let isDragging = false;
 
                 const $hover = query('.art-progress-hover', $control);
                 const $loaded = query('.art-progress-loaded', $control);
@@ -95,7 +95,7 @@ export default function progress(options) {
                 }
 
                 function setBar(type, percentage, event) {
-                    const isMobileDroging = type === 'played' && event && isMobile;
+                    const isMobileDragging = type === 'played' && event && isMobile;
 
                     if (type === 'loaded') {
                         setStyle($loaded, 'width', `${percentage * 100}%`);
@@ -110,7 +110,7 @@ export default function progress(options) {
                         setStyle($indicator, 'left', `${percentage * 100}%`);
                     }
 
-                    if (isMobileDroging) {
+                    if (isMobileDragging) {
                         setStyle($tip, 'display', 'flex');
                         const width = $control.clientWidth * percentage;
                         const time = secondToTime(percentage * art.duration);
@@ -170,11 +170,11 @@ export default function progress(options) {
                     });
 
                     proxy($control, 'mousedown', (event) => {
-                        isDroging = event.button === 0;
+                        isDragging = event.button === 0;
                     });
 
                     art.on('document:mousemove', (event) => {
-                        if (isDroging) {
+                        if (isDragging) {
                             const { second, percentage } = getPosFromEvent(art, event);
                             art.emit('setBar', 'played', percentage, event);
                             art.seek = second;
@@ -182,8 +182,8 @@ export default function progress(options) {
                     });
 
                     art.on('document:mouseup', () => {
-                        if (isDroging) {
-                            isDroging = false;
+                        if (isDragging) {
+                            isDragging = false;
                         }
                     });
                 }
diff --git a/packages/artplayer/src/control/volume.js b/packages/artplayer/src/control/volume.js
index 4218cb9d0..60c34f449 100644
--- a/packages/artplayer/src/control/volume.js
+++ b/packages/artplayer/src/control/volume.js
@@ -52,23 +52,23 @@ export default function volume(option) {
             if (isMobile) {
                 setStyle($panel, 'display', 'none');
             } else {
-                let isDroging = false;
+                let isDragging = false;
 
                 proxy($slider, 'mousedown', (event) => {
-                    isDroging = event.button === 0;
+                    isDragging = event.button === 0;
                     art.volume = getVolumeFromEvent(event);
                 });
 
                 art.on('document:mousemove', (event) => {
-                    if (isDroging) {
+                    if (isDragging) {
                         art.muted = false;
                         art.volume = getVolumeFromEvent(event);
                     }
                 });
 
                 art.on('document:mouseup', () => {
-                    if (isDroging) {
-                        isDroging = false;
+                    if (isDragging) {
+                        isDragging = false;
                     }
                 });
             }
diff --git a/packages/artplayer/src/events/gestureInit.js b/packages/artplayer/src/events/gestureInit.js
index 233b63c56..86007247e 100644
--- a/packages/artplayer/src/events/gestureInit.js
+++ b/packages/artplayer/src/events/gestureInit.js
@@ -33,7 +33,7 @@ export default function gestureInit(art, events) {
         const { $video, $progress } = art.template;
 
         let touchTarget = null;
-        let isDroging = false;
+        let isDragging = false;
         let startX = 0;
         let startY = 0;
         let startTime = 0;
@@ -44,7 +44,7 @@ export default function gestureInit(art, events) {
                     setCurrentTime(art, event);
                 }
 
-                isDroging = true;
+                isDragging = true;
                 const { pageX, pageY } = event.touches[0];
                 startX = pageX;
                 startY = pageY;
@@ -53,7 +53,7 @@ export default function gestureInit(art, events) {
         };
 
         const onTouchMove = (event) => {
-            if (event.touches.length === 1 && isDroging && art.duration) {
+            if (event.touches.length === 1 && isDragging && art.duration) {
                 const { pageX, pageY } = event.touches[0];
                 const direction = GetSlideDirection(startX, startY, pageX, pageY);
                 const isHorizontal = [3, 4].includes(direction);
@@ -73,11 +73,11 @@ export default function gestureInit(art, events) {
         };
 
         const onTouchEnd = () => {
-            if (isDroging) {
+            if (isDragging) {
                 startX = 0;
                 startY = 0;
                 startTime = 0;
-                isDroging = false;
+                isDragging = false;
                 touchTarget = null;
             }
         };
diff --git a/packages/artplayer/src/player/autoSizeMix.js b/packages/artplayer/src/player/autoSizeMix.js
index 54450123b..bfe5c9c9e 100644
--- a/packages/artplayer/src/player/autoSizeMix.js
+++ b/packages/artplayer/src/player/autoSizeMix.js
@@ -1,6 +1,6 @@
 import { setStyle, def, getRect } from '../utils';
 
-export default function resizeMix(art) {
+export default function autoSizeMix(art) {
     const { $container, $player, $video } = art.template;
 
     def(art, 'autoSize', {
diff --git a/packages/artplayer/src/player/loadedMix.js b/packages/artplayer/src/player/loadedMix.js
index 25e98da2f..a4bbe2dbc 100644
--- a/packages/artplayer/src/player/loadedMix.js
+++ b/packages/artplayer/src/player/loadedMix.js
@@ -1,6 +1,6 @@
 import { def } from '../utils';
 
-export default function seekMix(art) {
+export default function loadedMix(art) {
     const { $video } = art.template;
 
     def(art, 'loaded', {
diff --git a/packages/artplayer/src/player/miniMix.js b/packages/artplayer/src/player/miniMix.js
index b3095f9d9..761508a09 100644
--- a/packages/artplayer/src/player/miniMix.js
+++ b/packages/artplayer/src/player/miniMix.js
@@ -8,7 +8,7 @@ export default function miniMix(art) {
         template: { $player, $video },
     } = art;
 
-    let isDroging = false;
+    let isDragging = false;
     let lastPageX = 0;
     let lastPageY = 0;
 
@@ -59,14 +59,14 @@ export default function miniMix(art) {
             art.on('video:timeupdate', () => initState($play, $pause));
 
             proxy($mini, 'mousedown', (event) => {
-                isDroging = event.button === 0;
+                isDragging = event.button === 0;
                 lastPageX = event.pageX;
                 lastPageY = event.pageY;
             });
 
             art.on('document:mousemove', (event) => {
-                if (isDroging) {
-                    addClass($mini, 'art-mini-droging');
+                if (isDragging) {
+                    addClass($mini, 'art-mini-dragging');
                     const x = event.pageX - lastPageX;
                     const y = event.pageY - lastPageY;
                     setStyle($mini, 'transform', `translate(${x}px, ${y}px)`);
@@ -74,9 +74,9 @@ export default function miniMix(art) {
             });
 
             art.on('document:mouseup', () => {
-                if (isDroging) {
-                    isDroging = false;
-                    removeClass($mini, 'art-mini-droging');
+                if (isDragging) {
+                    isDragging = false;
+                    removeClass($mini, 'art-mini-dragging');
                     const rect = getRect($mini);
                     storage.set('left', rect.left);
                     storage.set('top', rect.top);
diff --git a/packages/artplayer/src/player/optionInit.js b/packages/artplayer/src/player/optionInit.js
index 0b5f2a9aa..8169716e7 100644
--- a/packages/artplayer/src/player/optionInit.js
+++ b/packages/artplayer/src/player/optionInit.js
@@ -1,6 +1,6 @@
 import { clamp, setStyle } from '../utils';
 
-export default function attrInit(art) {
+export default function optionInit(art) {
     const {
         option,
         storage,
diff --git a/packages/artplayer/src/player/thumbnailsMix.js b/packages/artplayer/src/player/thumbnailsMix.js
index 30252ff48..c9857edfe 100644
--- a/packages/artplayer/src/player/thumbnailsMix.js
+++ b/packages/artplayer/src/player/thumbnailsMix.js
@@ -60,9 +60,9 @@ export default function thumbnailsMix(art) {
         const { url, scale } = option.thumbnails;
         if (!$thumbnails || !url) return;
 
-        const isMobileDroging = type === 'played' && event && isMobile;
+        const isMobileDragging = type === 'played' && event && isMobile;
 
-        if (type === 'hover' || isMobileDroging) {
+        if (type === 'hover' || isMobileDragging) {
             if (!loading) {
                 loading = true;
                 image = await loadImg(url, scale);
@@ -82,7 +82,7 @@ export default function thumbnailsMix(art) {
                 }
             }
 
-            if (isMobileDroging) {
+            if (isMobileDragging) {
                 clearTimeout(timer);
                 timer = setTimeout(() => {
                     setStyle($thumbnails, 'display', 'none');
diff --git a/packages/artplayer/src/setting/index.js b/packages/artplayer/src/setting/index.js
index 36ab2d1ea..a09177fb2 100644
--- a/packages/artplayer/src/setting/index.js
+++ b/packages/artplayer/src/setting/index.js
@@ -212,7 +212,7 @@ export default class Setting extends Component {
             this.inactivate(item);
             Object.assign(item, target);
             this.format();
-            this.creatItem(item, true);
+            this.createItem(item, true);
             this.render();
             return item;
         } else {
@@ -223,12 +223,12 @@ export default class Setting extends Component {
     add(item, option = this.option) {
         option.push(item);
         this.format();
-        this.creatItem(item);
+        this.createItem(item);
         this.render();
         return item;
     }
 
-    creatHeader(item) {
+    createHeader(item) {
         if (!this.cache.has(item.$option)) return;
         const $panel = this.cache.get(item.$option);
 
@@ -253,7 +253,7 @@ export default class Setting extends Component {
         append($panel, $item);
     }
 
-    creatItem(item, isUpdate = false) {
+    createItem(item, isUpdate = false) {
         if (!this.cache.has(item.$option)) return;
         const $panel = this.cache.get(item.$option);
         const oldItem = item.$item;
@@ -531,11 +531,11 @@ export default class Setting extends Component {
             inverseClass($panel, 'art-current');
 
             if (option[0]?.$parent) {
-                this.creatHeader(option[0]);
+                this.createHeader(option[0]);
             }
 
             for (let index = 0; index < option.length; index++) {
-                this.creatItem(option[index]);
+                this.createItem(option[index]);
             }
         }
         this.resize();
diff --git a/packages/artplayer/src/style/mini.less b/packages/artplayer/src/style/mini.less
index 1272d35e2..08d9f28f7 100644
--- a/packages/artplayer/src/style/mini.less
+++ b/packages/artplayer/src/style/mini.less
@@ -50,7 +50,7 @@
         }
     }
 
-    &.art-mini-droging {
+    &.art-mini-dragging {
         opacity: 0.9;
     }