diff --git a/docs/uncompiled/artplayer-plugin-chapter/index.js b/docs/uncompiled/artplayer-plugin-chapter/index.js
index fefff8e01..534f03f22 100644
--- a/docs/uncompiled/artplayer-plugin-chapter/index.js
+++ b/docs/uncompiled/artplayer-plugin-chapter/index.js
@@ -6,7 +6,16 @@
 // anything defined in a previous bundle is accessed via the
 // orig method which is the require for previous bundles
 
-(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+(function (
+  modules,
+  entry,
+  mainEntry,
+  parcelRequireName,
+  externals,
+  distDir,
+  publicUrl,
+  devServer
+) {
   /* eslint-disable no-undef */
   var globalObject =
     typeof globalThis !== 'undefined'
@@ -25,6 +34,7 @@
     typeof globalObject[parcelRequireName] === 'function' &&
     globalObject[parcelRequireName];
 
+  var importMap = previousRequire.i || {};
   var cache = previousRequire.cache || {};
   // Do not use `require` to prevent Webpack from trying to bundle this call
   var nodeRequire =
@@ -35,6 +45,9 @@
   function newRequire(name, jumped) {
     if (!cache[name]) {
       if (!modules[name]) {
+        if (externals[name]) {
+          return externals[name];
+        }
         // if we cannot find the module within our internal map or
         // cache jump to the current global require ie. the last bundle
         // that was added to the page.
@@ -73,7 +86,7 @@
         localRequire,
         module,
         module.exports,
-        this
+        globalObject
       );
     }
 
@@ -81,7 +94,54 @@
 
     function localRequire(x) {
       var res = localRequire.resolve(x);
-      return res === false ? {} : newRequire(res);
+      if (res === false) {
+        return {};
+      }
+      // Synthesize a module to follow re-exports.
+      if (Array.isArray(res)) {
+        var m = {__esModule: true};
+        res.forEach(function (v) {
+          var key = v[0];
+          var id = v[1];
+          var exp = v[2] || v[0];
+          var x = newRequire(id);
+          if (key === '*') {
+            Object.keys(x).forEach(function (key) {
+              if (
+                key === 'default' ||
+                key === '__esModule' ||
+                Object.prototype.hasOwnProperty.call(m, key)
+              ) {
+                return;
+              }
+
+              Object.defineProperty(m, key, {
+                enumerable: true,
+                get: function () {
+                  return x[key];
+                },
+              });
+            });
+          } else if (exp === '*') {
+            Object.defineProperty(m, key, {
+              enumerable: true,
+              value: x,
+            });
+          } else {
+            Object.defineProperty(m, key, {
+              enumerable: true,
+              get: function () {
+                if (exp === 'default') {
+                  return x.__esModule ? x.default : x;
+                }
+                return x[exp];
+              },
+            });
+          }
+        });
+        return m;
+      }
+      return newRequire(res);
     }
 
     function resolve(x) {
@@ -93,6 +153,7 @@
   function Module(moduleName) {
     this.id = moduleName;
     this.bundle = newRequire;
+    this.require = nodeRequire;
     this.exports = {};
   }
 
@@ -101,6 +162,10 @@
   newRequire.modules = modules;
   newRequire.cache = cache;
   newRequire.parent = previousRequire;
+  newRequire.distDir = distDir;
+  newRequire.publicUrl = publicUrl;
+  newRequire.devServer = devServer;
+  newRequire.i = importMap;
   newRequire.register = function (id, exports) {
     modules[id] = [
       function (require, module) {
@@ -110,6 +175,10 @@
     ];
   };
 
+  // Only insert newRequire.load when it is actually used.
+  // The code in this file is linted against ES5, so dynamic import is not allowed.
+  // INSERT_LOAD_HERE
+
   Object.defineProperty(newRequire, 'root', {
     get: function () {
       return globalObject[parcelRequireName];
@@ -136,13 +205,9 @@
       define(function () {
         return mainExports;
       });
-
-      // <script>
-    } else if (globalName) {
-      this[globalName] = mainExports;
     }
   }
-})({"4OysR":[function(require,module,exports) {
+})({"4J69a":[function(require,module,exports,__globalThis) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "default", ()=>artplayerPluginChapter);
@@ -151,7 +216,7 @@ var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
 function artplayerPluginChapter(option = {}) {
     return (art)=>{
         const { $player } = art.template;
-        const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = art.constructor.utils;
+        const { setStyle, append, clamp, query, addClass, removeClass } = art.constructor.utils;
         const html = `
                 <div class="art-chapter">
                     <div class="art-chapter-inner">
@@ -161,27 +226,24 @@ function artplayerPluginChapter(option = {}) {
                     </div>
                 </div>
         `;
-        let titleTimer = null;
         let $chapters = [];
-        const $progress = art.query(".art-control-progress");
-        const $inner = art.query(".art-control-progress-inner");
+        const $inner = art.query('.art-control-progress-inner');
         const $control = append($inner, '<div class="art-chapters"></div>');
         const $title = append($inner, '<div class="art-chapter-title"></div>');
         function showTitle({ $chapter, width }) {
             const title = $chapter.dataset.title.trim();
             if (title) {
-                setStyle($title, "display", "flex");
-                $title.innerText = title;
+                $title.textContent = title;
                 const titleWidth = $title.clientWidth;
-                if (width <= titleWidth / 2) setStyle($title, "left", 0);
-                else if (width > $inner.clientWidth - titleWidth / 2) setStyle($title, "left", `${$inner.clientWidth - titleWidth}px`);
-                else setStyle($title, "left", `${width - titleWidth / 2}px`);
-            } else setStyle($title, "display", "none");
+                if (width <= titleWidth / 2) setStyle($title, 'left', 0);
+                else if (width > $inner.clientWidth - titleWidth / 2) setStyle($title, 'left', `${$inner.clientWidth - titleWidth}px`);
+                else setStyle($title, 'left', `${width - titleWidth / 2}px`);
+            }
         }
         function update(chapters = []) {
             $chapters = [];
-            $control.innerText = "";
-            removeClass($player, "artplayer-plugin-chapter");
+            $control.textContent = '';
+            removeClass($player, 'artplayer-plugin-chapter');
             if (!Array.isArray(chapters)) return;
             if (!chapters.length) return;
             if (!art.duration) return;
@@ -190,24 +252,24 @@ function artplayerPluginChapter(option = {}) {
                 const chapter = chapters[i];
                 const nextChapter = chapters[i + 1];
                 if (chapter.end === Infinity) chapter.end = art.duration;
-                if (typeof chapter.start !== "number" || typeof chapter.end !== "number" || typeof chapter.title !== "string") throw new Error("Illegal chapter data type");
-                if (chapter.start < 0 || chapter.end > art.duration || chapter.start >= chapter.end) throw new Error("Illegal chapter time point");
-                if (nextChapter && chapter.end > nextChapter.start) throw new Error("Illegal chapter time point");
+                if (typeof chapter.start !== 'number' || typeof chapter.end !== 'number' || typeof chapter.title !== 'string') throw new TypeError('Illegal chapter data type');
+                if (chapter.start < 0 || chapter.end > art.duration || chapter.start >= chapter.end) throw new Error('Illegal chapter time point');
+                if (nextChapter && chapter.end > nextChapter.start) throw new Error('Illegal chapter time point');
             }
             if (chapters[0].start > 0) chapters.unshift({
                 start: 0,
                 end: chapters[0].start,
-                title: ""
+                title: ''
             });
             if (chapters[chapters.length - 1].end < art.duration) chapters.push({
                 start: chapters[chapters.length - 1].end,
                 end: art.duration,
-                title: ""
+                title: ''
             });
             for(let i = 0; i < chapters.length - 1; i++)if (chapters[i].end !== chapters[i + 1].start) chapters.splice(i + 1, 0, {
                 start: chapters[i].end,
                 end: chapters[i + 1].start,
-                title: ""
+                title: ''
             });
             $chapters = chapters.map((chapter)=>{
                 const $chapter = append($control, html);
@@ -222,15 +284,15 @@ function artplayerPluginChapter(option = {}) {
                 $chapter.style.width = `${percentage * 100}%`;
                 return {
                     $chapter,
-                    $hover: query(".art-progress-hover", $chapter),
-                    $loaded: query(".art-progress-loaded", $chapter),
-                    $played: query(".art-progress-played", $chapter)
+                    $hover: query('.art-progress-hover', $chapter),
+                    $loaded: query('.art-progress-loaded', $chapter),
+                    $played: query('.art-progress-played', $chapter)
                 };
             });
-            addClass($player, "artplayer-plugin-chapter");
-            art.emit("setBar", "loaded", art.loaded || 0);
+            addClass($player, 'artplayer-plugin-chapter');
+            art.emit('setBar', 'loaded', art.loaded || 0);
         }
-        art.on("setBar", (type, percentage, event)=>{
+        art.on('setBar', (type, percentage)=>{
             if (!$chapters.length) return;
             for(let i = 0; i < $chapters.length; i++){
                 const { $chapter, $loaded, $played, $hover } = $chapters[i];
@@ -242,75 +304,60 @@ function artplayerPluginChapter(option = {}) {
                 if (!$target) return;
                 const width = $control.clientWidth * percentage;
                 const currentTime = art.duration * percentage;
-                const duration = parseFloat($chapter.dataset.duration);
-                const start = parseFloat($chapter.dataset.start);
-                const end = parseFloat($chapter.dataset.end);
-                if (currentTime < start) setStyle($target, "width", 0);
-                if (currentTime > end) setStyle($target, "width", "100%");
+                const duration = Number.parseFloat($chapter.dataset.duration);
+                const start = Number.parseFloat($chapter.dataset.start);
+                const end = Number.parseFloat($chapter.dataset.end);
+                if (currentTime < start) setStyle($target, 'width', 0);
+                if (currentTime > end) setStyle($target, 'width', '100%');
                 if (currentTime >= start && currentTime <= end) {
                     const percentage = (currentTime - start) / duration;
-                    setStyle($target, "width", `${percentage * 100}%`);
-                    if (isMobile) {
-                        if (type === "played" && event) {
-                            showTitle({
-                                $chapter,
-                                width
-                            });
-                            clearTimeout(titleTimer);
-                            titleTimer = setTimeout(()=>{
-                                setStyle($title, "display", "none");
-                            }, 500);
-                        }
-                    } else if (type === "hover") showTitle({
+                    setStyle($target, 'width', `${percentage * 100}%`);
+                    if (type === 'hover' && width > 0) showTitle({
                         $chapter,
                         width
                     });
                 }
             }
         });
-        if (!isMobile) art.proxy($progress, "mouseleave", ()=>{
-            if (!$chapters.length) return;
-            setStyle($title, "display", "none");
-        });
-        art.once("video:loadedmetadata", ()=>update(option.chapters));
+        art.once('video:loadedmetadata', ()=>update(option.chapters));
         return {
-            name: "artplayerPluginChapter",
+            name: 'artplayerPluginChapter',
             update: ({ chapters })=>update(chapters)
         };
     };
 }
-if (typeof document !== "undefined") {
-    const id = "artplayer-plugin-chapter";
+if (typeof document !== 'undefined') {
+    const id = 'artplayer-plugin-chapter';
     let $style = document.getElementById(id);
     if (!$style) {
-        $style = document.createElement("style");
+        $style = document.createElement('style');
         $style.id = id;
-        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", ()=>{
+        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', ()=>{
             document.head.appendChild($style);
         });
         else (document.head || document.documentElement).appendChild($style);
     }
     $style.textContent = (0, _styleLessDefault.default);
 }
-if (typeof window !== "undefined") window["artplayerPluginChapter"] = artplayerPluginChapter;
+if (typeof window !== 'undefined') window.artplayerPluginChapter = artplayerPluginChapter;
 
-},{"bundle-text:./style.less":"8SOjD","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"8SOjD":[function(require,module,exports) {
-module.exports = ".artplayer-plugin-chapter .art-control-progress-inner {\n  background-color: #0000 !important;\n  height: 100% !important;\n}\n\n.artplayer-plugin-chapter .art-control-progress-inner > .art-progress-hover, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-loaded, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-played {\n  display: none !important;\n}\n\n.artplayer-plugin-chapter .art-control-thumbnails {\n  bottom: calc(var(--art-bottom-gap)  + 64px) !important;\n}\n\n.artplayer-plugin-chapter .art-chapters {\n  z-index: 0;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  inset: 0;\n  transform: scaleY(1.25);\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter {\n  align-items: center;\n  height: 100%;\n  display: flex;\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter .art-chapter-inner {\n  cursor: pointer;\n  transition: height var(--art-transition-duration) ease;\n  background-color: var(--art-progress-color);\n  border-radius: 10px;\n  width: 100%;\n  height: 50%;\n  position: relative;\n  overflow: hidden;\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter:hover .art-chapter-inner {\n  height: 100%;\n}\n\n.artplayer-plugin-chapter .art-chapter-title {\n  z-index: 70;\n  border-radius: var(--art-border-radius);\n  white-space: nowrap;\n  background-color: var(--art-tip-background);\n  padding: 3px 5px;\n  font-size: 14px;\n  line-height: 1;\n  display: none;\n  position: absolute;\n  top: -50px;\n  left: 0;\n}\n";
+},{"bundle-text:./style.less":"fshgG","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"fshgG":[function(require,module,exports,__globalThis) {
+module.exports = ".artplayer-plugin-chapter .art-control-progress-inner {\n  background-color: #0000 !important;\n  height: 100% !important;\n}\n\n.artplayer-plugin-chapter .art-control-progress-inner > .art-progress-hover, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-loaded, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-played {\n  display: none !important;\n}\n\n.artplayer-plugin-chapter .art-control-thumbnails {\n  bottom: calc(var(--art-bottom-gap)  + 64px) !important;\n}\n\n.artplayer-plugin-chapter .art-chapters {\n  z-index: 0;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n  display: flex;\n  position: absolute;\n  inset: 0;\n  transform: scaleY(1.25);\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter {\n  align-items: center;\n  height: 100%;\n  display: flex;\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter .art-chapter-inner {\n  cursor: pointer;\n  width: 100%;\n  height: 50%;\n  transition: height var(--art-transition-duration) ease;\n  background-color: var(--art-progress-color);\n  border-radius: 10px;\n  position: relative;\n  overflow: hidden;\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter:hover .art-chapter-inner {\n  height: 100%;\n}\n\n.artplayer-plugin-chapter .art-chapter-title {\n  transform-origin: bottom;\n  opacity: 0;\n  z-index: 70;\n  border-radius: var(--art-border-radius);\n  white-space: nowrap;\n  background-color: var(--art-tip-background);\n  transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;\n  padding: 3px 5px;\n  font-size: 14px;\n  line-height: 1;\n  position: absolute;\n  top: -50px;\n  left: 0;\n  transform: scale(.5);\n}\n\n.artplayer-plugin-chapter.art-progress-hover .art-chapter-title {\n  opacity: 1;\n  transform: scale(1);\n}\n";
 
-},{}],"5dUr6":[function(require,module,exports) {
+},{}],"8oCsH":[function(require,module,exports,__globalThis) {
 exports.interopDefault = function(a) {
     return a && a.__esModule ? a : {
         default: a
     };
 };
 exports.defineInteropFlag = function(a) {
-    Object.defineProperty(a, "__esModule", {
+    Object.defineProperty(a, '__esModule', {
         value: true
     });
 };
 exports.exportAll = function(source, dest) {
     Object.keys(source).forEach(function(key) {
-        if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return;
+        if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) return;
         Object.defineProperty(dest, key, {
             enumerable: true,
             get: function() {
@@ -327,6 +374,6 @@ exports.export = function(dest, destName, get) {
     });
 };
 
-},{}]},["4OysR"], "4OysR", "parcelRequire4dc0")
+},{}]},["4J69a"], "4J69a", "parcelRequire4dc0", {})
 
 //# sourceMappingURL=index.js.map
diff --git a/docs/uncompiled/artplayer-plugin-chapter/index.js.map b/docs/uncompiled/artplayer-plugin-chapter/index.js.map
index b9b885c92..9b2c219ca 100644
--- a/docs/uncompiled/artplayer-plugin-chapter/index.js.map
+++ b/docs/uncompiled/artplayer-plugin-chapter/index.js.map
@@ -1 +1 @@
-{"mappings":"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","sources":["packages/artplayer-plugin-chapter/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e8c48f234731c5ef.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginChapter(option = {}) {\n    return (art) => {\n        const { $player } = art.template;\n        const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = art.constructor.utils;\n\n        const html = `\n                <div class=\"art-chapter\">\n                    <div class=\"art-chapter-inner\">\n                        <div class=\"art-progress-hover\"></div>\n                        <div class=\"art-progress-loaded\"></div>\n                        <div class=\"art-progress-played\"></div>\n                    </div>\n                </div>\n        `;\n\n        let titleTimer = null;\n        let $chapters = [];\n\n        const $progress = art.query('.art-control-progress');\n        const $inner = art.query('.art-control-progress-inner');\n        const $control = append($inner, '<div class=\"art-chapters\"></div>');\n        const $title = append($inner, '<div class=\"art-chapter-title\"></div>');\n\n        function showTitle({ $chapter, width }) {\n            const title = $chapter.dataset.title.trim();\n            if (title) {\n                setStyle($title, 'display', 'flex');\n                $title.innerText = title;\n                const titleWidth = $title.clientWidth;\n                if (width <= titleWidth / 2) {\n                    setStyle($title, 'left', 0);\n                } else if (width > $inner.clientWidth - titleWidth / 2) {\n                    setStyle($title, 'left', `${$inner.clientWidth - titleWidth}px`);\n                } else {\n                    setStyle($title, 'left', `${width - titleWidth / 2}px`);\n                }\n            } else {\n                setStyle($title, 'display', 'none');\n            }\n        }\n\n        function update(chapters = []) {\n            $chapters = [];\n            $control.innerText = '';\n            removeClass($player, 'artplayer-plugin-chapter');\n\n            if (!Array.isArray(chapters)) return;\n            if (!chapters.length) return;\n            if (!art.duration) return;\n\n            chapters = chapters.sort((a, b) => a.start - b.start);\n\n            for (let i = 0; i < chapters.length; i++) {\n                const chapter = chapters[i];\n                const nextChapter = chapters[i + 1];\n\n                if (chapter.end === Infinity) {\n                    chapter.end = art.duration;\n                }\n\n                if (\n                    typeof chapter.start !== 'number' ||\n                    typeof chapter.end !== 'number' ||\n                    typeof chapter.title !== 'string'\n                ) {\n                    throw new Error('Illegal chapter data type');\n                }\n\n                if (chapter.start < 0 || chapter.end > art.duration || chapter.start >= chapter.end) {\n                    throw new Error('Illegal chapter time point');\n                }\n\n                if (nextChapter && chapter.end > nextChapter.start) {\n                    throw new Error('Illegal chapter time point');\n                }\n            }\n\n            if (chapters[0].start > 0) {\n                chapters.unshift({ start: 0, end: chapters[0].start, title: '' });\n            }\n\n            if (chapters[chapters.length - 1].end < art.duration) {\n                chapters.push({ start: chapters[chapters.length - 1].end, end: art.duration, title: '' });\n            }\n\n            for (let i = 0; i < chapters.length - 1; i++) {\n                if (chapters[i].end !== chapters[i + 1].start) {\n                    chapters.splice(i + 1, 0, {\n                        start: chapters[i].end,\n                        end: chapters[i + 1].start,\n                        title: '',\n                    });\n                }\n            }\n\n            $chapters = chapters.map((chapter) => {\n                const $chapter = append($control, html);\n                const start = clamp(chapter.start, 0, art.duration);\n                const end = clamp(chapter.end, 0, art.duration);\n                const duration = end - start;\n                const percentage = duration / art.duration;\n                $chapter.dataset.start = start;\n                $chapter.dataset.end = end;\n                $chapter.dataset.duration = duration;\n                $chapter.dataset.title = chapter.title.trim();\n                $chapter.style.width = `${percentage * 100}%`;\n\n                return {\n                    $chapter,\n                    $hover: query('.art-progress-hover', $chapter),\n                    $loaded: query('.art-progress-loaded', $chapter),\n                    $played: query('.art-progress-played', $chapter),\n                };\n            });\n\n            addClass($player, 'artplayer-plugin-chapter');\n            art.emit('setBar', 'loaded', art.loaded || 0);\n        }\n\n        art.on('setBar', (type, percentage, event) => {\n            if (!$chapters.length) return;\n\n            for (let i = 0; i < $chapters.length; i++) {\n                const { $chapter, $loaded, $played, $hover } = $chapters[i];\n\n                const $target = {\n                    hover: $hover,\n                    loaded: $loaded,\n                    played: $played,\n                }[type];\n\n                if (!$target) return;\n\n                const width = $control.clientWidth * percentage;\n                const currentTime = art.duration * percentage;\n                const duration = parseFloat($chapter.dataset.duration);\n                const start = parseFloat($chapter.dataset.start);\n                const end = parseFloat($chapter.dataset.end);\n\n                if (currentTime < start) {\n                    setStyle($target, 'width', 0);\n                }\n\n                if (currentTime > end) {\n                    setStyle($target, 'width', '100%');\n                }\n\n                if (currentTime >= start && currentTime <= end) {\n                    const percentage = (currentTime - start) / duration;\n                    setStyle($target, 'width', `${percentage * 100}%`);\n\n                    if (isMobile) {\n                        if (type === 'played' && event) {\n                            showTitle({ $chapter, width });\n                            clearTimeout(titleTimer);\n                            titleTimer = setTimeout(() => {\n                                setStyle($title, 'display', 'none');\n                            }, 500);\n                        }\n                    } else {\n                        if (type === 'hover') {\n                            showTitle({ $chapter, width });\n                        }\n                    }\n                }\n            }\n        });\n\n        if (!isMobile) {\n            art.proxy($progress, 'mouseleave', () => {\n                if (!$chapters.length) return;\n                setStyle($title, 'display', 'none');\n            });\n        }\n\n        art.once('video:loadedmetadata', () => update(option.chapters));\n\n        return {\n            name: 'artplayerPluginChapter',\n            update: ({ chapters }) => update(chapters),\n        };\n    };\n}\n\nif (typeof document !== 'undefined') {\n    const id = 'artplayer-plugin-chapter';\n    let $style = document.getElementById(id);\n    if (!$style) {\n        $style = document.createElement('style');\n        $style.id = id;\n        if (document.readyState === 'loading') {\n            document.addEventListener('DOMContentLoaded', () => {\n                document.head.appendChild($style);\n            });\n        } else {\n            (document.head || document.documentElement).appendChild($style);\n        }\n    }\n    $style.textContent = style;\n}\n\nif (typeof window !== 'undefined') {\n    window['artplayerPluginChapter'] = artplayerPluginChapter;\n}\n","module.exports = \"644995735844259b\";","exports.interopDefault = function (a) {\n  return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n  Object.keys(source).forEach(function (key) {\n    if (\n      key === 'default' ||\n      key === '__esModule' ||\n      Object.prototype.hasOwnProperty.call(dest, key)\n    ) {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function () {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n};\n\nexports.export = function (dest, destName, get) {\n  Object.defineProperty(dest, destName, {\n    enumerable: true,\n    get: get,\n  });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"}
\ No newline at end of file
+{"mappings":"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","sources":["packages/artplayer-plugin-chapter/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-3c6e83237a7eb6ba.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less'\n\nexport default function artplayerPluginChapter(option = {}) {\n  return (art) => {\n    const { $player } = art.template\n    const { setStyle, append, clamp, query, addClass, removeClass } = art.constructor.utils\n\n    const html = `\n                <div class=\"art-chapter\">\n                    <div class=\"art-chapter-inner\">\n                        <div class=\"art-progress-hover\"></div>\n                        <div class=\"art-progress-loaded\"></div>\n                        <div class=\"art-progress-played\"></div>\n                    </div>\n                </div>\n        `\n\n    let $chapters = []\n\n    const $inner = art.query('.art-control-progress-inner')\n    const $control = append($inner, '<div class=\"art-chapters\"></div>')\n    const $title = append($inner, '<div class=\"art-chapter-title\"></div>')\n\n    function showTitle({ $chapter, width }) {\n      const title = $chapter.dataset.title.trim()\n      if (title) {\n        $title.textContent = title\n        const titleWidth = $title.clientWidth\n        if (width <= titleWidth / 2) {\n          setStyle($title, 'left', 0)\n        }\n        else if (width > $inner.clientWidth - titleWidth / 2) {\n          setStyle($title, 'left', `${$inner.clientWidth - titleWidth}px`)\n        }\n        else {\n          setStyle($title, 'left', `${width - titleWidth / 2}px`)\n        }\n      }\n    }\n\n    function update(chapters = []) {\n      $chapters = []\n      $control.textContent = ''\n      removeClass($player, 'artplayer-plugin-chapter')\n\n      if (!Array.isArray(chapters))\n        return\n      if (!chapters.length)\n        return\n      if (!art.duration)\n        return\n\n      chapters = chapters.sort((a, b) => a.start - b.start)\n\n      for (let i = 0; i < chapters.length; i++) {\n        const chapter = chapters[i]\n        const nextChapter = chapters[i + 1]\n\n        if (chapter.end === Infinity) {\n          chapter.end = art.duration\n        }\n\n        if (\n          typeof chapter.start !== 'number'\n          || typeof chapter.end !== 'number'\n          || typeof chapter.title !== 'string'\n        ) {\n          throw new TypeError('Illegal chapter data type')\n        }\n\n        if (chapter.start < 0 || chapter.end > art.duration || chapter.start >= chapter.end) {\n          throw new Error('Illegal chapter time point')\n        }\n\n        if (nextChapter && chapter.end > nextChapter.start) {\n          throw new Error('Illegal chapter time point')\n        }\n      }\n\n      if (chapters[0].start > 0) {\n        chapters.unshift({ start: 0, end: chapters[0].start, title: '' })\n      }\n\n      if (chapters[chapters.length - 1].end < art.duration) {\n        chapters.push({ start: chapters[chapters.length - 1].end, end: art.duration, title: '' })\n      }\n\n      for (let i = 0; i < chapters.length - 1; i++) {\n        if (chapters[i].end !== chapters[i + 1].start) {\n          chapters.splice(i + 1, 0, {\n            start: chapters[i].end,\n            end: chapters[i + 1].start,\n            title: '',\n          })\n        }\n      }\n\n      $chapters = chapters.map((chapter) => {\n        const $chapter = append($control, html)\n        const start = clamp(chapter.start, 0, art.duration)\n        const end = clamp(chapter.end, 0, art.duration)\n        const duration = end - start\n        const percentage = duration / art.duration\n        $chapter.dataset.start = start\n        $chapter.dataset.end = end\n        $chapter.dataset.duration = duration\n        $chapter.dataset.title = chapter.title.trim()\n        $chapter.style.width = `${percentage * 100}%`\n\n        return {\n          $chapter,\n          $hover: query('.art-progress-hover', $chapter),\n          $loaded: query('.art-progress-loaded', $chapter),\n          $played: query('.art-progress-played', $chapter),\n        }\n      })\n\n      addClass($player, 'artplayer-plugin-chapter')\n      art.emit('setBar', 'loaded', art.loaded || 0)\n    }\n\n    art.on('setBar', (type, percentage) => {\n      if (!$chapters.length)\n        return\n\n      for (let i = 0; i < $chapters.length; i++) {\n        const { $chapter, $loaded, $played, $hover } = $chapters[i]\n\n        const $target = {\n          hover: $hover,\n          loaded: $loaded,\n          played: $played,\n        }[type]\n\n        if (!$target)\n          return\n\n        const width = $control.clientWidth * percentage\n        const currentTime = art.duration * percentage\n        const duration = Number.parseFloat($chapter.dataset.duration)\n        const start = Number.parseFloat($chapter.dataset.start)\n        const end = Number.parseFloat($chapter.dataset.end)\n\n        if (currentTime < start) {\n          setStyle($target, 'width', 0)\n        }\n\n        if (currentTime > end) {\n          setStyle($target, 'width', '100%')\n        }\n\n        if (currentTime >= start && currentTime <= end) {\n          const percentage = (currentTime - start) / duration\n          setStyle($target, 'width', `${percentage * 100}%`)\n\n          if (type === 'hover' && width > 0) {\n            showTitle({ $chapter, width })\n          }\n        }\n      }\n    })\n\n    art.once('video:loadedmetadata', () => update(option.chapters))\n\n    return {\n      name: 'artplayerPluginChapter',\n      update: ({ chapters }) => update(chapters),\n    }\n  }\n}\n\nif (typeof document !== 'undefined') {\n  const id = 'artplayer-plugin-chapter'\n  let $style = document.getElementById(id)\n  if (!$style) {\n    $style = document.createElement('style')\n    $style.id = id\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', () => {\n        document.head.appendChild($style)\n      })\n    }\n    else {\n      (document.head || document.documentElement).appendChild($style)\n    }\n  }\n  $style.textContent = style\n}\n\nif (typeof window !== 'undefined') {\n  window.artplayerPluginChapter = artplayerPluginChapter\n}\n","module.exports = \"71df1ebf262c9f10\";","exports.interopDefault = function (a) {\n  return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n  Object.keys(source).forEach(function (key) {\n    if (\n      key === 'default' ||\n      key === '__esModule' ||\n      Object.prototype.hasOwnProperty.call(dest, key)\n    ) {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function () {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n};\n\nexports.export = function (dest, destName, get) {\n  Object.defineProperty(dest, destName, {\n    enumerable: true,\n    get: get,\n  });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"}
\ No newline at end of file
diff --git a/packages/artplayer-plugin-chapter/package.json b/packages/artplayer-plugin-chapter/package.json
index 780925b54..c382606a6 100644
--- a/packages/artplayer-plugin-chapter/package.json
+++ b/packages/artplayer-plugin-chapter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "artplayer-plugin-chapter",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "chapter plugin for ArtPlayer",
   "author": "Harvey Zack <laozhaochaguan@gmail.com>",
   "license": "MIT",
diff --git a/packages/artplayer-plugin-chapter/src/index.js b/packages/artplayer-plugin-chapter/src/index.js
index 0bbe4f893..29c2d41a3 100644
--- a/packages/artplayer-plugin-chapter/src/index.js
+++ b/packages/artplayer-plugin-chapter/src/index.js
@@ -3,7 +3,7 @@ import style from 'bundle-text:./style.less'
 export default function artplayerPluginChapter(option = {}) {
   return (art) => {
     const { $player } = art.template
-    const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = art.constructor.utils
+    const { setStyle, append, clamp, query, addClass, removeClass } = art.constructor.utils
 
     const html = `
                 <div class="art-chapter">
@@ -15,10 +15,8 @@ export default function artplayerPluginChapter(option = {}) {
                 </div>
         `
 
-    let titleTimer = null
     let $chapters = []
 
-    const $progress = art.query('.art-control-progress')
     const $inner = art.query('.art-control-progress-inner')
     const $control = append($inner, '<div class="art-chapters"></div>')
     const $title = append($inner, '<div class="art-chapter-title"></div>')
@@ -26,7 +24,6 @@ export default function artplayerPluginChapter(option = {}) {
     function showTitle({ $chapter, width }) {
       const title = $chapter.dataset.title.trim()
       if (title) {
-        setStyle($title, 'display', 'flex')
         $title.textContent = title
         const titleWidth = $title.clientWidth
         if (width <= titleWidth / 2) {
@@ -39,9 +36,6 @@ export default function artplayerPluginChapter(option = {}) {
           setStyle($title, 'left', `${width - titleWidth / 2}px`)
         }
       }
-      else {
-        setStyle($title, 'display', 'none')
-      }
     }
 
     function update(chapters = []) {
@@ -125,7 +119,7 @@ export default function artplayerPluginChapter(option = {}) {
       art.emit('setBar', 'loaded', art.loaded || 0)
     }
 
-    art.on('setBar', (type, percentage, event) => {
+    art.on('setBar', (type, percentage) => {
       if (!$chapters.length)
         return
 
@@ -159,32 +153,13 @@ export default function artplayerPluginChapter(option = {}) {
           const percentage = (currentTime - start) / duration
           setStyle($target, 'width', `${percentage * 100}%`)
 
-          if (isMobile) {
-            if (type === 'played' && event) {
-              showTitle({ $chapter, width })
-              clearTimeout(titleTimer)
-              titleTimer = setTimeout(() => {
-                setStyle($title, 'display', 'none')
-              }, 500)
-            }
-          }
-          else {
-            if (type === 'hover') {
-              showTitle({ $chapter, width })
-            }
+          if (type === 'hover' && width > 0) {
+            showTitle({ $chapter, width })
           }
         }
       }
     })
 
-    if (!isMobile) {
-      art.proxy($progress, 'mouseleave', () => {
-        if (!$chapters.length)
-          return
-        setStyle($title, 'display', 'none')
-      })
-    }
-
     art.once('video:loadedmetadata', () => update(option.chapters))
 
     return {
diff --git a/packages/artplayer-plugin-chapter/src/style.less b/packages/artplayer-plugin-chapter/src/style.less
index c2d22d657..0f0d01295 100644
--- a/packages/artplayer-plugin-chapter/src/style.less
+++ b/packages/artplayer-plugin-chapter/src/style.less
@@ -3,9 +3,9 @@
         height: 100% !important;
         background-color: transparent !important;
 
-        & > .art-progress-hover,
-        & > .art-progress-loaded,
-        & > .art-progress-played {
+        &>.art-progress-hover,
+        &>.art-progress-loaded,
+        &>.art-progress-played {
             display: none !important;
         }
     }
@@ -47,7 +47,9 @@
     }
 
     .art-chapter-title {
-        display: none;
+        transform-origin: bottom center;
+        transform: scale(0.5);
+        opacity: 0;
         position: absolute;
         z-index: 70;
         top: -50px;
@@ -58,5 +60,13 @@
         border-radius: var(--art-border-radius);
         white-space: nowrap;
         background-color: var(--art-tip-background);
+        transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
     }
-}
+
+    &.art-progress-hover {
+        .art-chapter-title {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}
\ No newline at end of file