feat: Add support for video chapters in artplayer-plugin-chapter

docs/assets/example/chapter.js

@@ -4,9 +4,18 @@
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
+    autoSize: true,
+	fullscreen: true,
+	fullscreenWeb: true,
     plugins: [
         artplayerPluginChapter({
-            //
+            chapters: [
+                { start: 0, end: 18, text: 'Chapter 1' },
+                { start: 18, end: 36, text: 'Chapter 2' },
+                { start: 36, end: 54, text: 'Chapter 3' },
+                { start: 54, end: 72, text: 'Chapter 4' },
+                { start: 72, end: 90, text: 'Chapter 5' },
+            ]
         }),
     ],
 });

docs/uncompiled/artplayer-plugin-chapter/index.js

@@ -0,0 +1,268 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// 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) {
+  /* eslint-disable no-undef */
+  var globalObject =
+    typeof globalThis !== 'undefined'
+      ? globalThis
+      : typeof self !== 'undefined'
+      ? self
+      : typeof window !== 'undefined'
+      ? window
+      : typeof global !== 'undefined'
+      ? global
+      : {};
+  /* eslint-enable no-undef */
+
+  // Save the require from previous bundle to this closure if any
+  var previousRequire =
+    typeof globalObject[parcelRequireName] === 'function' &&
+    globalObject[parcelRequireName];
+
+  var cache = previousRequire.cache || {};
+  // Do not use `require` to prevent Webpack from trying to bundle this call
+  var nodeRequire =
+    typeof module !== 'undefined' &&
+    typeof module.require === 'function' &&
+    module.require.bind(module);
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[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.
+        var currentRequire =
+          typeof globalObject[parcelRequireName] === 'function' &&
+          globalObject[parcelRequireName];
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error("Cannot find module '" + name + "'");
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = (cache[name] = new newRequire.Module(name));
+
+      modules[name][0].call(
+        module.exports,
+        localRequire,
+        module,
+        module.exports,
+        this
+      );
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x) {
+      var res = localRequire.resolve(x);
+      return res === false ? {} : newRequire(res);
+    }
+
+    function resolve(x) {
+      var id = modules[name][1][x];
+      return id != null ? id : x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [
+      function (require, module) {
+        module.exports = exports;
+      },
+      {},
+    ];
+  };
+
+  Object.defineProperty(newRequire, 'root', {
+    get: function () {
+      return globalObject[parcelRequireName];
+    },
+  });
+
+  globalObject[parcelRequireName] = newRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  if (mainEntry) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(mainEntry);
+
+    // CommonJS
+    if (typeof exports === 'object' && typeof module !== 'undefined') {
+      module.exports = mainExports;
+
+      // RequireJS
+    } else if (typeof define === 'function' && define.amd) {
+      define(function () {
+        return mainExports;
+      });
+
+      // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+})({"4OysR":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "default", ()=>artplayerPluginChapter);
+var _styleLess = require("bundle-text:./style.less");
+var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
+function artplayerPluginChapter({ chapters = [] }) {
+    return (art)=>{
+        const { setStyle, append, clamp, query } = art.constructor.utils;
+        const html = `
+                <div class="art-chapter">
+                    <div class="art-progress-hover"></div>
+                    <div class="art-progress-loaded"></div>
+                    <div class="art-progress-played"></div>
+                </div>
+        `;
+        let $chapters = [];
+        const $progress = art.query(".art-control-progress-inner");
+        const $control = append($progress, '<div class="art-chapters"></div>');
+        function setBar(type, percentage) {
+            const currentTime = art.duration * percentage;
+            const index = $chapters.findIndex(({ $chapter })=>{
+                const start = parseFloat($chapter.dataset.start);
+                const end = parseFloat($chapter.dataset.end);
+                return art.currentTime >= start && art.currentTime <= end;
+            });
+            if (index === -1) return;
+            for(let i = 0; i < $chapters.length; i++){
+                const { $chapter, $loaded, $played, $hover } = $chapters[i];
+                const $target = {
+                    hover: $hover,
+                    loaded: $loaded,
+                    played: $played
+                }[type];
+                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%");
+                if (currentTime >= start && currentTime <= end) {
+                    const _percentage = (currentTime - start) / duration;
+                    setStyle($target, "width", `${_percentage * 100}%`);
+                }
+            }
+        }
+        art.on("setBar", (type, percentage)=>{
+            setBar(type, percentage);
+        });
+        art.on("video:loadedmetadata", ()=>{
+            $control.innerHTML = "";
+            $chapters = chapters.map((chapter)=>{
+                const $chapter = append($control, html);
+                const start = clamp(chapter.start, 0, art.duration);
+                const end = clamp(chapter.end, 0, art.duration);
+                const duration = end - start;
+                const percentage = duration / art.duration;
+                $chapter.dataset.start = start;
+                $chapter.dataset.end = end;
+                $chapter.dataset.duration = duration;
+                $chapter.dataset.text = chapter.text;
+                $chapter.dataset.percentage = percentage;
+                $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)
+                };
+            });
+        });
+        return {
+            name: "artplayerPluginChapter"
+        };
+    };
+}
+if (typeof document !== "undefined") {
+    const id = "artplayer-plugin-chapter";
+    const $style = document.getElementById(id);
+    if ($style) $style.textContent = (0, _styleLessDefault.default);
+    else {
+        const $style = document.createElement("style");
+        $style.id = id;
+        $style.textContent = (0, _styleLessDefault.default);
+        document.head.appendChild($style);
+    }
+}
+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 = ".art-progress .art-control-progress-inner {\n  background-color: #0000 !important;\n  height: 100% !important;\n}\n\n.art-progress .art-control-progress-inner > .art-progress-hover, .art-progress .art-control-progress-inner > .art-progress-loaded, .art-progress .art-control-progress-inner > .art-progress-played {\n  display: none !important;\n}\n\n.art-progress .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.art-progress .art-chapters .art-chapter {\n  cursor: pointer;\n  transition: height var(--art-transition-duration) ease;\n  background-color: var(--art-progress-color);\n  border-radius: 10px;\n  height: 50%;\n  position: relative;\n  overflow: hidden;\n}\n\n.art-progress .art-chapters .art-chapter:hover {\n  height: 100%;\n}\n";
+
+},{}],"5dUr6":[function(require,module,exports) {
+exports.interopDefault = function(a) {
+    return a && a.__esModule ? a : {
+        default: a
+    };
+};
+exports.defineInteropFlag = function(a) {
+    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;
+        Object.defineProperty(dest, key, {
+            enumerable: true,
+            get: function() {
+                return source[key];
+            }
+        });
+    });
+    return dest;
+};
+exports.export = function(dest, destName, get) {
+    Object.defineProperty(dest, destName, {
+        enumerable: true,
+        get: get
+    });
+};
+
+},{}]},["4OysR"], "4OysR", "parcelRequire4dc0")
+
+//# sourceMappingURL=index.js.map

docs/uncompiled/artplayer-plugin-chapter/index.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6CAEwB;AAFxB;;AAEe,SAAS,uBAAuB,EAAE,WAAW,EAAE,EAAE;IAC5D,OAAO,CAAC;QACJ,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,WAAW,CAAC,KAAK;QAEhE,MAAM,OAAO,CAAC;;;;;;QAMd,CAAC;QAED,IAAI,YAAY,EAAE;QAClB,MAAM,YAAY,IAAI,KAAK,CAAC;QAC5B,MAAM,WAAW,OAAO,WAAW;QAEnC,SAAS,OAAO,IAAI,EAAE,UAAU;YAC5B,MAAM,cAAc,IAAI,QAAQ,GAAG;YAEnC,MAAM,QAAQ,UAAU,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE;gBAC3C,MAAM,QAAQ,WAAW,SAAS,OAAO,CAAC,KAAK;gBAC/C,MAAM,MAAM,WAAW,SAAS,OAAO,CAAC,GAAG;gBAC3C,OAAO,IAAI,WAAW,IAAI,SAAS,IAAI,WAAW,IAAI;YAC1D;YAEA,IAAI,UAAU,IAAI;YAElB,IAAK,IAAI,IAAI,GAAG,IAAI,UAAU,MAAM,EAAE,IAAK;gBACvC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,EAAE;gBAE3D,MAAM,UAAU;oBACZ,OAAO;oBACP,QAAQ;oBACR,QAAQ;gBACZ,CAAC,CAAC,KAAK;gBAEP,MAAM,WAAW,WAAW,SAAS,OAAO,CAAC,QAAQ;gBACrD,MAAM,QAAQ,WAAW,SAAS,OAAO,CAAC,KAAK;gBAC/C,MAAM,MAAM,WAAW,SAAS,OAAO,CAAC,GAAG;gBAE3C,IAAI,cAAc,OACd,SAAS,SAAS,SAAS;gBAG/B,IAAI,cAAc,KACd,SAAS,SAAS,SAAS;gBAG/B,IAAI,eAAe,SAAS,eAAe,KAAK;oBAC5C,MAAM,cAAc,AAAC,CAAA,cAAc,KAAI,IAAK;oBAC5C,SAAS,SAAS,SAAS,CAAC,EAAE,cAAc,IAAI,CAAC,CAAC;gBACtD;YACJ;QACJ;QAEA,IAAI,EAAE,CAAC,UAAU,CAAC,MAAM;YACpB,OAAO,MAAM;QACjB;QAEA,IAAI,EAAE,CAAC,wBAAwB;YAC3B,SAAS,SAAS,GAAG;YACrB,YAAY,SAAS,GAAG,CAAC,CAAC;gBACtB,MAAM,WAAW,OAAO,UAAU;gBAClC,MAAM,QAAQ,MAAM,QAAQ,KAAK,EAAE,GAAG,IAAI,QAAQ;gBAClD,MAAM,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,IAAI,QAAQ;gBAC9C,MAAM,WAAW,MAAM;gBACvB,MAAM,aAAa,WAAW,IAAI,QAAQ;gBAC1C,SAAS,OAAO,CAAC,KAAK,GAAG;gBACzB,SAAS,OAAO,CAAC,GAAG,GAAG;gBACvB,SAAS,OAAO,CAAC,QAAQ,GAAG;gBAC5B,SAAS,OAAO,CAAC,IAAI,GAAG,QAAQ,IAAI;gBACpC,SAAS,OAAO,CAAC,UAAU,GAAG;gBAC9B,SAAS,KAAK,CAAC,KAAK,GAAG,CAAC,EAAE,aAAa,IAAI,CAAC,CAAC;gBAC7C,OAAO;oBACH;oBACA,QAAQ,MAAM,uBAAuB;oBACrC,SAAS,MAAM,wBAAwB;oBACvC,SAAS,MAAM,wBAAwB;gBAC3C;YACJ;QACJ;QAEA,OAAO;YACH,MAAM;QACV;IACJ;AACJ;AAEA,IAAI,OAAO,aAAa,aAAa;IACjC,MAAM,KAAK;IACX,MAAM,SAAS,SAAS,cAAc,CAAC;IACvC,IAAI,QACA,OAAO,WAAW,GAAG,CAAA,GAAA,yBAAK,AAAD;SACtB;QACH,MAAM,SAAS,SAAS,aAAa,CAAC;QACtC,OAAO,EAAE,GAAG;QACZ,OAAO,WAAW,GAAG,CAAA,GAAA,yBAAK,AAAD;QACzB,SAAS,IAAI,CAAC,WAAW,CAAC;IAC9B;AACJ;AAEA,IAAI,OAAO,WAAW,aAClB,MAAM,CAAC,yBAAyB,GAAG;;;ACxGvC,OAAO,OAAO,GAAG;;;ACAjB,QAAQ,cAAc,GAAG,SAAU,CAAC;IAClC,OAAO,KAAK,EAAE,UAAU,GAAG,IAAI;QAAC,SAAS;IAAC;AAC5C;AAEA,QAAQ,iBAAiB,GAAG,SAAU,CAAC;IACrC,OAAO,cAAc,CAAC,GAAG,cAAc;QAAC,OAAO;IAAI;AACrD;AAEA,QAAQ,SAAS,GAAG,SAAU,MAAM,EAAE,IAAI;IACxC,OAAO,IAAI,CAAC,QAAQ,OAAO,CAAC,SAAU,GAAG;QACvC,IACE,QAAQ,aACR,QAAQ,gBACR,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,MAE3C;QAGF,OAAO,cAAc,CAAC,MAAM,KAAK;YAC/B,YAAY;YACZ,KAAK;gBACH,OAAO,MAAM,CAAC,IAAI;YACpB;QACF;IACF;IAEA,OAAO;AACT;AAEA,QAAQ,MAAM,GAAG,SAAU,IAAI,EAAE,QAAQ,EAAE,GAAG;IAC5C,OAAO,cAAc,CAAC,MAAM,UAAU;QACpC,YAAY;QACZ,KAAK;IACP;AACF","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({ chapters = [] }) {\n    return (art) => {\n        const { setStyle, append, clamp, query } = art.constructor.utils;\n\n        const html = `\n                <div class=\"art-chapter\">\n                    <div class=\"art-progress-hover\"></div>\n                    <div class=\"art-progress-loaded\"></div>\n                    <div class=\"art-progress-played\"></div>\n                </div>\n        `;\n\n        let $chapters = [];\n        const $progress = art.query('.art-control-progress-inner');\n        const $control = append($progress, '<div class=\"art-chapters\"></div>');\n\n        function setBar(type, percentage) {\n            const currentTime = art.duration * percentage;\n\n            const index = $chapters.findIndex(({ $chapter }) => {\n                const start = parseFloat($chapter.dataset.start);\n                const end = parseFloat($chapter.dataset.end);\n                return art.currentTime >= start && art.currentTime <= end;\n            });\n\n            if (index === -1) 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                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      Line truncated

docs/uncompiled/artplayer/index.js

@@ -242,7 +242,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2024-06-02 14:05:18";
+        return "2024-06-02 17:40:53";
     }
     static get config() {
         return 0, _configDefault.default;
@@ -3211,22 +3211,22 @@ function progress(options) {
                         (0, _utils.append)($highlight, html);
                     }
                 });
-                setBar("loaded", art.loaded);
                 art.on("setBar", (type, percentage)=>{
                     setBar(type, percentage);
                 });
                 art.on("video:progress", ()=>{
-                    setBar("loaded", art.loaded);
+                    art.emit("setBar", "loaded", art.loaded);
                 });
                 if (art.constructor.USE_RAF) art.on("raf", ()=>{
-                    setBar("played", art.played);
+                    art.emit("setBar", "played", art.played);
                 });
                 else art.on("video:timeupdate", ()=>{
-                    setBar("played", art.played);
+                    art.emit("setBar", "played", art.played);
                 });
                 art.on("video:ended", ()=>{
-                    setBar("played", 1);
+                    art.emit("setBar", "played", 1);
                 });
+                art.emit("setBar", "loaded", art.loaded);
                 if (!(0, _utils.isMobile)) {
                     proxy($control, "click", (event)=>{
                         if (event.target !== $indicator) setCurrentTime(art, event);
@@ -3247,7 +3247,7 @@ function progress(options) {
                     art.on("document:mousemove", (event)=>{
                         if (isDroging) {
                             const { second, percentage } = getPosFromEvent(art, event);
-                            setBar("played", percentage);
+                            art.emit("setBar", "played", percentage);
                             art.seek = second;
                         }
                     });

docs/uncompiled/artplayer/index.js.map

@@ -1 +1 @@
-{"mappings":"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 truncated
+{"mappings":"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 truncated

packages/artplayer-plugin-chapter/src/index.js

@@ -1,7 +1,87 @@
 import style from 'bundle-text:./style.less';
 
-export default function artplayerPluginChapter(option) {
+export default function artplayerPluginChapter({ chapters = [] }) {
     return (art) => {
+        const { setStyle, append, clamp, query } = art.constructor.utils;
+
+        const html = `
+                <div class="art-chapter">
+                    <div class="art-progress-hover"></div>
+                    <div class="art-progress-loaded"></div>
+                    <div class="art-progress-played"></div>
+                </div>
+        `;
+
+        let $chapters = [];
+        const $progress = art.query('.art-control-progress-inner');
+        const $control = append($progress, '<div class="art-chapters"></div>');
+
+        function setBar(type, percentage) {
+            const currentTime = art.duration * percentage;
+
+            const index = $chapters.findIndex(({ $chapter }) => {
+                const start = parseFloat($chapter.dataset.start);
+                const end = parseFloat($chapter.dataset.end);
+                return art.currentTime >= start && art.currentTime <= end;
+            });
+
+            if (index === -1) return;
+
+            for (let i = 0; i < $chapters.length; i++) {
+                const { $chapter, $loaded, $played, $hover } = $chapters[i];
+
+                const $target = {
+                    hover: $hover,
+                    loaded: $loaded,
+                    played: $played,
+                }[type];
+
+                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%');
+                }
+
+                if (currentTime >= start && currentTime <= end) {
+                    const _percentage = (currentTime - start) / duration;
+                    setStyle($target, 'width', `${_percentage * 100}%`);
+                }
+            }
+        }
+
+        art.on('setBar', (type, percentage) => {
+            setBar(type, percentage);
+        });
+
+        art.on('video:loadedmetadata', () => {
+            $control.innerHTML = '';
+            $chapters = chapters.map((chapter) => {
+                const $chapter = append($control, html);
+                const start = clamp(chapter.start, 0, art.duration);
+                const end = clamp(chapter.end, 0, art.duration);
+                const duration = end - start;
+                const percentage = duration / art.duration;
+                $chapter.dataset.start = start;
+                $chapter.dataset.end = end;
+                $chapter.dataset.duration = duration;
+                $chapter.dataset.text = chapter.text;
+                $chapter.dataset.percentage = percentage;
+                $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),
+                };
+            });
+        });
+
         return {
             name: 'artplayerPluginChapter',
         };

packages/artplayer-plugin-chapter/src/style.less

@@ -1,3 +1,37 @@
-.artplayer-plugin-chapter {
-    //
+.art-progress {
+    .art-control-progress-inner {
+        height: 100% !important;
+        background-color: transparent !important;
+
+        & > .art-progress-hover,
+        & > .art-progress-loaded,
+        & > .art-progress-played {
+            display: none !important;
+        }
+    }
+
+    .art-chapters {
+        position: absolute;
+        z-index: 0;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        height: 100%;
+        transform: scaleY(1.25);
+
+        .art-chapter {
+            position: relative;
+            cursor: pointer;
+            height: 50%;
+            border-radius: 10px;
+            overflow: hidden;
+            transition: height var(--art-transition-duration) ease;
+            background-color: var(--art-progress-color);
+
+            &:hover {
+                height: 100%;
+            }
+        }
+    }
 }

packages/artplayer/src/control/progress.js

@@ -108,30 +108,30 @@ export default function progress(options) {
                     }
                 });
 
-                setBar('loaded', art.loaded);
-
                 art.on('setBar', (type, percentage) => {
                     setBar(type, percentage);
                 });
 
                 art.on('video:progress', () => {
-                    setBar('loaded', art.loaded);
+                    art.emit('setBar', 'loaded', art.loaded);
                 });
 
                 if (art.constructor.USE_RAF) {
                     art.on('raf', () => {
-                        setBar('played', art.played);
+                        art.emit('setBar', 'played', art.played);
                     });
                 } else {
                     art.on('video:timeupdate', () => {
-                        setBar('played', art.played);
+                        art.emit('setBar', 'played', art.played);
                     });
                 }
 
                 art.on('video:ended', () => {
-                    setBar('played', 1);
+                    art.emit('setBar', 'played', 1);
                 });
 
+                art.emit('setBar', 'loaded', art.loaded || 0);
+
                 if (!isMobile) {
                     proxy($control, 'click', (event) => {
                         if (event.target !== $indicator) {
@@ -161,7 +161,7 @@ export default function progress(options) {
                     art.on('document:mousemove', (event) => {
                         if (isDroging) {
                             const { second, percentage } = getPosFromEvent(art, event);
-                            setBar('played', percentage);
+                            art.emit('setBar', 'played', percentage);
                             art.seek = second;
                         }
                     });