添加视频功能

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.2s59qd9m0j8"
+    "revision": "0.88abiq01ca8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package-lock.json

@@ -30,6 +30,7 @@
         "postcss-px2rem": "^0.3.0",
         "px2rem-loader": "^0.1.9",
         "query-string": "^8.1.0",
+        "tcplayer.js": "^4.8.0",
         "umi-request": "^1.4.0",
         "vite-plugin-pwa": "^0.16.4",
         "vudio.js": "^1.0.3",
@@ -3806,6 +3807,27 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3859,6 +3881,11 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/blueimp-md5": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
+      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz",
@@ -4017,6 +4044,14 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
@@ -4284,6 +4319,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/crypto-js": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
@@ -4534,6 +4577,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/dot-case/-/dot-case-3.0.4.tgz",
@@ -4688,6 +4736,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es5-shim": {
+      "version": "4.6.7",
+      "resolved": "https://registry.npmmirror.com/es5-shim/-/es5-shim-4.6.7.tgz",
+      "integrity": "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.17",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.17.tgz",
@@ -5594,6 +5650,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/global/-/global-4.3.2.tgz",
+      "integrity": "sha512-/4AybdwIDU4HkCUbJkZdWpe4P6vuw/CUtu+0I1YlLIPe7OlUO7KNJ+q/rO70CW2/NW6Jc6I62++Hzsf5Alu6rQ==",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      }
+    },
     "node_modules/global-modules": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/global-modules/-/global-modules-1.0.0.tgz",
@@ -5947,6 +6012,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
@@ -6249,6 +6319,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
@@ -6305,6 +6380,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
@@ -6690,6 +6770,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsencrypt": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.3.2.tgz",
+      "integrity": "sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A=="
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -7298,6 +7383,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "dependencies": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -7374,6 +7469,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
@@ -7664,7 +7767,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7972,6 +8074,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "node_modules/parse-node-version": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
@@ -8354,6 +8461,14 @@
         "node": "^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/process/-/process-0.5.2.tgz",
+      "integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -8835,6 +8950,14 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "dependencies": {
+        "individual": "^2.0.0"
+      }
+    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.8.1.tgz",
@@ -8863,6 +8986,14 @@
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
+    "node_modules/safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "dependencies": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "node_modules/safe-regex-test": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@@ -9111,6 +9242,27 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/store": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmmirror.com/store/-/store-2.0.12.tgz",
+      "integrity": "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/store2": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmmirror.com/store2/-/store2-2.14.2.tgz",
+      "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w=="
+    },
+    "node_modules/strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -9320,6 +9472,48 @@
       "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
       "dev": true
     },
+    "node_modules/tcplayer.js": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmmirror.com/tcplayer.js/-/tcplayer.js-4.8.0.tgz",
+      "integrity": "sha512-70nTne/YmLVlInhQ/5KpRfKG46zyu3uKxdT9Am9VVhPSciw+GjONbfZSZwgngK1Z4xtv/hE/U2RIyy5FZjjAWA==",
+      "dependencies": {
+        "babel-runtime": "^6.9.2",
+        "blueimp-md5": "^2.10.0",
+        "global": "4.3.2",
+        "jsencrypt": "^3.2.0",
+        "md5": "^2.3.0",
+        "query-string": "^5.0.1",
+        "safe-json-parse": "4.0.0",
+        "store": "^2.0.12",
+        "store2": "^2.7.1",
+        "tsml": "1.0.1",
+        "videojs-font": "2.1.0",
+        "videojs-ie8": "1.1.2",
+        "videojs-vtt.js": "0.12.4",
+        "xhr": "2.4.0"
+      }
+    },
+    "node_modules/tcplayer.js/node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/tcplayer.js/node_modules/query-string": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmmirror.com/query-string/-/query-string-5.1.1.tgz",
+      "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.0",
+        "object-assign": "^4.1.0",
+        "strict-uri-encode": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -9457,6 +9651,12 @@
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
+    "node_modules/tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha512-3KmepnH9SUsoOVtg013CRrL7c+AK7ECaquAsJdvu4288EDJuraqBlP4PDXT/rLEJ9YDn4jqLAzRJsnFPx+V6lg==",
+      "deprecated": "no longer maintained"
+    },
     "node_modules/tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmmirror.com/tsutils/-/tsutils-3.21.0.tgz",
@@ -9830,6 +10030,27 @@
         "vue": "^3.0.11"
       }
     },
+    "node_modules/videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
+    },
+    "node_modules/videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha512-0Zb2T4MLkpfZbeGMK/Z93b8Lrepr+rLFoHgQV1CoDeFqXvH7b+Vsd/VHoILGxQrgCSHFQ7mAODR6oyMjuiD4/g==",
+      "dependencies": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.12.4.tgz",
+      "integrity": "sha512-JQ5eozH5SLOL5xI8ALb1aWf9HjcewQmOytf1gPIsFBTQlSgtSdJ8E8x0GO0ZEXVtFCaPDFiYWAhrjuTI125tBQ==",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
     "node_modules/vite": {
       "version": "4.4.8",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.8.tgz",
@@ -10726,6 +10947,17 @@
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "node_modules/xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha512-TUbBsdAuJbX8olk9hsDwGK8P1ri1XlV+PdEWkYw+HQQbpkiBR8PLgD1F3kQDPBs9l4Px34hP9rCYAZOCCAENbw==",
+      "dependencies": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
@@ -10735,6 +10967,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",
@@ -13534,6 +13774,27 @@
         "@babel/helper-define-polyfill-provider": "^0.4.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -13578,6 +13839,11 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "blueimp-md5": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
+      "integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
+    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz",
@@ -13715,6 +13981,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
@@ -13939,6 +14210,11 @@
         "which": "^2.0.1"
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmmirror.com/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow=="
+    },
     "crypto-js": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.1.1.tgz",
@@ -14139,6 +14415,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/dot-case/-/dot-case-3.0.4.tgz",
@@ -14272,6 +14553,11 @@
         "is-symbol": "^1.0.2"
       }
     },
+    "es5-shim": {
+      "version": "4.6.7",
+      "resolved": "https://registry.npmmirror.com/es5-shim/-/es5-shim-4.6.7.tgz",
+      "integrity": "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ=="
+    },
     "esbuild": {
       "version": "0.18.17",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.17.tgz",
@@ -14986,6 +15272,15 @@
         "is-glob": "^4.0.3"
       }
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmmirror.com/global/-/global-4.3.2.tgz",
+      "integrity": "sha512-/4AybdwIDU4HkCUbJkZdWpe4P6vuw/CUtu+0I1YlLIPe7OlUO7KNJ+q/rO70CW2/NW6Jc6I62++Hzsf5Alu6rQ==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      }
+    },
     "global-modules": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/global-modules/-/global-modules-1.0.0.tgz",
@@ -15251,6 +15546,11 @@
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
@@ -15501,6 +15801,11 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
     "is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmmirror.com/is-callable/-/is-callable-1.2.7.tgz",
@@ -15542,6 +15847,11 @@
       "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
@@ -15835,6 +16145,11 @@
         "argparse": "^2.0.1"
       }
     },
+    "jsencrypt": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.3.2.tgz",
+      "integrity": "sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A=="
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz",
@@ -16325,6 +16640,16 @@
       "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
       "dev": true
     },
+    "md5": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/md5/-/md5-2.3.0.tgz",
+      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
+      "requires": {
+        "charenc": "0.0.2",
+        "crypt": "0.0.2",
+        "is-buffer": "~1.1.6"
+      }
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -16377,6 +16702,14 @@
       "resolved": "https://registry.npmmirror.com/mimic-response/-/mimic-response-3.1.0.tgz",
       "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ=="
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
@@ -16622,8 +16955,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-inspect": {
       "version": "1.12.3",
@@ -16864,6 +17196,11 @@
         "path-root": "^0.1.1"
       }
     },
+    "parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "parse-node-version": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
@@ -17146,6 +17483,11 @@
       "resolved": "https://registry.npmmirror.com/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
       "integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ=="
     },
+    "process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/process/-/process-0.5.2.tgz",
+      "integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
+    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -17524,6 +17866,14 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.8.1.tgz",
@@ -17549,6 +17899,14 @@
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "safe-regex-test": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
@@ -17765,6 +18123,21 @@
         "bl": "^5.0.0"
       }
     },
+    "store": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmmirror.com/store/-/store-2.0.12.tgz",
+      "integrity": "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw=="
+    },
+    "store2": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmmirror.com/store2/-/store2-2.14.2.tgz",
+      "integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w=="
+    },
+    "strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ=="
+    },
     "string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -17934,6 +18307,44 @@
       "integrity": "sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ==",
       "dev": true
     },
+    "tcplayer.js": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmmirror.com/tcplayer.js/-/tcplayer.js-4.8.0.tgz",
+      "integrity": "sha512-70nTne/YmLVlInhQ/5KpRfKG46zyu3uKxdT9Am9VVhPSciw+GjONbfZSZwgngK1Z4xtv/hE/U2RIyy5FZjjAWA==",
+      "requires": {
+        "babel-runtime": "^6.9.2",
+        "blueimp-md5": "^2.10.0",
+        "global": "4.3.2",
+        "jsencrypt": "^3.2.0",
+        "md5": "^2.3.0",
+        "query-string": "^5.0.1",
+        "safe-json-parse": "4.0.0",
+        "store": "^2.0.12",
+        "store2": "^2.7.1",
+        "tsml": "1.0.1",
+        "videojs-font": "2.1.0",
+        "videojs-ie8": "1.1.2",
+        "videojs-vtt.js": "0.12.4",
+        "xhr": "2.4.0"
+      },
+      "dependencies": {
+        "decode-uri-component": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+          "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
+        },
+        "query-string": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmmirror.com/query-string/-/query-string-5.1.1.tgz",
+          "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
+          "requires": {
+            "decode-uri-component": "^0.2.0",
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        }
+      }
+    },
     "temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -18048,6 +18459,11 @@
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha512-3KmepnH9SUsoOVtg013CRrL7c+AK7ECaquAsJdvu4288EDJuraqBlP4PDXT/rLEJ9YDn4jqLAzRJsnFPx+V6lg=="
+    },
     "tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmmirror.com/tsutils/-/tsutils-3.21.0.tgz",
@@ -18334,6 +18750,27 @@
         "evtd": "^0.2.2"
       }
     },
+    "videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
+    },
+    "videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha512-0Zb2T4MLkpfZbeGMK/Z93b8Lrepr+rLFoHgQV1CoDeFqXvH7b+Vsd/VHoILGxQrgCSHFQ7mAODR6oyMjuiD4/g==",
+      "requires": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "videojs-vtt.js": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.12.4.tgz",
+      "integrity": "sha512-JQ5eozH5SLOL5xI8ALb1aWf9HjcewQmOytf1gPIsFBTQlSgtSdJ8E8x0GO0ZEXVtFCaPDFiYWAhrjuTI125tBQ==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vite": {
       "version": "4.4.8",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.4.8.tgz",
@@ -19042,12 +19479,28 @@
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha512-TUbBsdAuJbX8olk9hsDwGK8P1ri1XlV+PdEWkYw+HQQbpkiBR8PLgD1F3kQDPBs9l4Px34hP9rCYAZOCCAENbw==",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "xml-name-validator": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
       "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
       "dev": true
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
     "yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -44,6 +44,7 @@
     "postcss-px2rem": "^0.3.0",
     "px2rem-loader": "^0.1.9",
     "query-string": "^8.1.0",
+    "tcplayer.js": "^4.8.0",
     "umi-request": "^1.4.0",
     "vite-plugin-pwa": "^0.16.4",
     "vudio.js": "^1.0.3",

src/custom-plugins/guide-page/attent-guide.tsx

@@ -16,8 +16,8 @@ export default defineComponent({
   name: 'attent-guide',
   emits: ['close'],
   setup(props, { emit }) {
-    const route = useRoute()
-    console.log(route.query)
+    const route = useRoute();
+    console.log(route.query);
     const data = reactive({
       box: {
         height: '0px'
@@ -40,11 +40,11 @@ export default defineComponent({
           imgStyle: {
             width: px2vw(647),
             height: px2vw(223),
-            left:px2vw(-647),
-            top:px2vw(-150)
+            left: px2vw(-647),
+            top: px2vw(-150)
           },
           btnsStyle: {
-            bottom:px2vw(180),
+            bottom: px2vw(180),
             left: px2vw(-490)
           },
           eleRectPadding: {
@@ -59,16 +59,16 @@ export default defineComponent({
           ele: '',
           img: getImage('attent2.png'),
           imgStyle: {
-            left:  px2vw(-290),
+            left: px2vw(-290),
             top: px2vw(20),
-            width:px2vw(477),
+            width: px2vw(477),
             height: px2vw(277)
           },
           btnsStyle: {
             bottom: px2vw(70),
             left: px2vw(-135)
           },
-          boxStyle:{
+          boxStyle: {
             borderRadius: '50%'
           },
           eleRectPadding: {
@@ -76,22 +76,23 @@ export default defineComponent({
             top: 7,
             width: 14,
             height: 14
-          },type:'bottom'
+          },
+          type: 'bottom'
         },
         {
           ele: '',
           img: getImage('attent3.png'),
           imgStyle: {
-            left:px2vw(-290),
+            left: px2vw(-290),
             top: px2vw(20),
-            width:px2vw(382),
+            width: px2vw(382),
             height: px2vw(277)
           },
           btnsStyle: {
             bottom: px2vw(70),
             left: px2vw(-135)
           },
-          boxStyle:{
+          boxStyle: {
             borderRadius: '50%'
           },
           eleRectPadding: {
@@ -99,22 +100,26 @@ export default defineComponent({
             top: 7,
             width: 14,
             height: 14
-          },type:'bottom'
+          },
+          type: 'bottom'
         },
         {
           ele: '',
-          img: route.query.type=='preview'? getImage('attent5.png'): getImage('attent4.png'),
+          img:
+            route.query.type == 'preview'
+              ? getImage('attent5.png')
+              : getImage('attent4.png'),
           imgStyle: {
             top: '100%',
-            left:  px2vw(-2),
-            width:   px2vw(515),
-            height:  px2vw(227)
+            left: px2vw(-2),
+            width: px2vw(515),
+            height: px2vw(227)
           },
           btnsStyle: {
             bottom: px2vw(30),
             left: px2vw(-20)
           },
-          boxStyle:{
+          boxStyle: {
             borderRadius: '50px'
           },
           eleRectPadding: {
@@ -150,22 +155,22 @@ export default defineComponent({
           width: eleRect.width + width + 'px',
           height: eleRect.height + height + 'px'
         };
-        console.log(`coai-${data.step}`, data.box);
-      }else{
-        handleNext()
+        // console.log(`coai-${data.step}`, data.box);
+      } else {
+        handleNext();
       }
     };
     onMounted(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+    });
     const handleNext = () => {
       if (data.step >= 4) {
         endGuide();

src/custom-plugins/guide-page/class-guide.tsx

@@ -10,14 +10,14 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-import {px2vw,px2vwH} from '@/utils/index'
+import { px2vw, px2vwH } from '@/utils/index';
 export default defineComponent({
   name: 'coai-guide',
   emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
       box: {
-        height:'0px',
+        height: '0px'
       } as any,
       show: false,
       /**
@@ -35,19 +35,19 @@ export default defineComponent({
           },
           imgStyle: {
             top: px2vw(-4),
-            left:  px2vw(-294),
-            width:   px2vw(648),
-            height:  px2vw(227)
+            left: px2vw(-294),
+            width: px2vw(648),
+            height: px2vw(227)
           },
           btnsStyle: {
-            bottom:px2vw(30),
-            left: px2vw(-130),
+            bottom: px2vw(30),
+            left: px2vw(-130)
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
         },
         {
@@ -55,44 +55,42 @@ export default defineComponent({
           img: getImage('class2.png'),
           imgStyle: {
             top: px2vw(-4),
-            left:   px2vw(-276),
-            width:  px2vw(515),
-            height:px2vw(227)
+            left: px2vw(-276),
+            width: px2vw(515),
+            height: px2vw(227)
           },
           btnsStyle: {
-            bottom:px2vw(30),
-            left: px2vw(-110),
+            bottom: px2vw(30),
+            left: px2vw(-110)
           },
 
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
-
         },
         {
           ele: '',
           img: getImage('class3.png'),
           imgStyle: {
             top: px2vw(-4),
-            width:  px2vw(437),
-            height:   px2vw(227),
+            width: px2vw(437),
+            height: px2vw(227),
             left: px2vw(-276)
           },
           btnsStyle: {
-            bottom:  px2vw(30),
-            left:  px2vw(-113),
+            bottom: px2vw(30),
+            left: px2vw(-113)
           },
-          eleRectPadding:{
-            left:7,
-            top:7,
-            width:14,
-            height:14
+          eleRectPadding: {
+            left: 7,
+            top: 7,
+            width: 14,
+            height: 14
           }
-        },
-
+        }
       ],
       step: 0
     });
@@ -104,7 +102,6 @@ export default defineComponent({
       tipShow.value = true;
     }
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`class-${data.step}`)!;
 
       if (ele) {
@@ -113,29 +110,29 @@ export default defineComponent({
         const left = data.steps[data.step].eleRectPadding?.left || 0;
         const top = data.steps[data.step].eleRectPadding?.top || 0;
         const width = data.steps[data.step].eleRectPadding?.width || 0;
-        const height = data.steps[data.step].eleRectPadding?.height || 0
+        const height = data.steps[data.step].eleRectPadding?.height || 0;
         data.box = {
-          left: eleRect.x - left+ 'px',
-          top: eleRect.y - top +'px',
-          width: eleRect.width + width+'px',
-          height: eleRect.height +height+ 'px'
+          left: eleRect.x - left + 'px',
+          top: eleRect.y - top + 'px',
+          width: eleRect.width + width + 'px',
+          height: eleRect.height + height + 'px'
         };
-        console.log(`coai-${data.step}`,data.box);
-      }else{
-        handleNext()
+        // console.log(`coai-${data.step}`,data.box);
+      } else {
+        handleNext();
       }
     };
     onMounted(() => {
       getStepELe();
-      window.addEventListener("resize", resetSize);
+      window.addEventListener('resize', resetSize);
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+    });
 
     const handleNext = () => {
       if (data.step >= 4) {
@@ -148,7 +145,7 @@ export default defineComponent({
 
     const endGuide = () => {
       let guideInfo =
-        JSON.parse(localStorage.getItem('teacher-guideInfo')||'{}') || null;
+        JSON.parse(localStorage.getItem('teacher-guideInfo') || '{}') || null;
       if (!guideInfo) {
         guideInfo = { classGuide: true };
       } else {
@@ -175,25 +172,25 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={{...data.box,...data.steps[data.step].boxStyle}}
+                style={{ ...data.box, ...data.steps[data.step].boxStyle }}
                 id={`modeType-${data.step}`}>
-
                 {data.steps.map((item: any, index) => (
-
                   <div
                     onClick={(e: Event) => e.stopPropagation()}
                     class={styles.item}
-                    style={ item.type=='bottom'?  {
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                      top:`-${item.imgStyle?.height}`
-
-                    }:{
-                      display: index === data.step ? '' : 'none',
-                      left: `${item.eleRect?.left}px`,
-                     top: `${data.box?.height}`,
-
-                    }}>
+                    style={
+                      item.type == 'bottom'
+                        ? {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `-${item.imgStyle?.height}`
+                          }
+                        : {
+                            display: index === data.step ? '' : 'none',
+                            left: `${item.eleRect?.left}px`,
+                            top: `${data.box?.height}`
+                          }
+                    }>
                     <img
                       class={styles.img}
                       style={item.imgStyle}
@@ -207,7 +204,7 @@ export default defineComponent({
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                         <div
+                          <div
                             class={[styles.endBtn]}
                             onClick={() => endGuide()}>
                             完成
@@ -220,7 +217,6 @@ export default defineComponent({
                             }}>
                             再看一遍
                           </div>
-
                         </>
                       ) : (
                         <div class={styles.btn} onClick={() => handleNext()}>

src/shims-vue.d.ts

@@ -7,3 +7,5 @@ declare module '*.vue' {
 declare module 'vudio.js';
 
 declare module 'tim-profanity-filter-plugin';
+
+declare module 'tcplayer.js';

src/views/attend-class/component/video-play copy.tsx

@@ -0,0 +1,174 @@
+import { defineComponent, nextTick, onMounted, toRefs } from 'vue';
+import 'plyr/dist/plyr.css';
+import Plyr from 'plyr';
+import { ref } from 'vue';
+import styles from './video.module.less';
+import iconplay from '../image/icon-pause.png';
+import iconpause from '../image/icon-play.png';
+import iconReplay from '../image/icon-replay.png';
+
+export default defineComponent({
+  name: 'video-play',
+  props: {
+    item: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    isEmtry: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
+  setup(props, { emit, expose }) {
+    const { item, isEmtry } = toRefs(props);
+    const videoRef = ref();
+    const videoItem = ref<Plyr>();
+    const controlID = 'v' + Date.now() + Math.floor(Math.random() * 100);
+    const playBtnId = 'play' + Date.now() + Math.floor(Math.random() * 100);
+    const replayBtnId = 'replay' + Date.now() + Math.floor(Math.random() * 100);
+    const toggleHideControl = (isShow: false) => {
+      videoItem.value?.toggleControls(isShow);
+    };
+    const togglePlay = (e: Event) => {
+      e.stopPropagation();
+      videoItem.value?.togglePlay();
+    };
+    const toggleReplay = () => {
+      const replayBtn = document.getElementById(replayBtnId);
+      if (!replayBtn || !videoItem.value) return;
+      videoItem.value.restart();
+    };
+    const onDefault = () => {
+      document
+        .getElementById(controlID)
+        ?.addEventListener('click', (e: Event) => {
+          e.stopPropagation();
+          emit('reset');
+        });
+      document.getElementById(playBtnId)?.addEventListener('click', togglePlay);
+      document
+        .getElementById(replayBtnId)
+        ?.addEventListener('click', toggleReplay);
+    };
+
+    const changePlayBtn = (code: string) => {
+      const playBtn = document.getElementById(playBtnId);
+      if (!playBtn) return;
+      if (code == 'play') {
+        playBtn.classList.remove(styles.btnPause);
+        playBtn.classList.add(styles.btnPlay);
+      } else {
+        playBtn.classList.remove(styles.btnPlay);
+        playBtn.classList.add(styles.btnPause);
+      }
+    };
+    const controls = `
+            <div id="${controlID}" class="plyr__controls bottomFixed ${styles.controls}">
+                <div class="${styles.actions}">
+                    <div class="${styles.actionWrap}">
+                        <button id="${playBtnId}" class="${styles.actionBtn}">
+                            <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+                            <img class="${styles.playIcon}" src="${iconplay}" />
+                            <img class="${styles.playIcon}" src="${iconpause}" />
+                        </button>
+                    </div>
+                    <div class="${styles.time}">
+                        <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div><span class="${styles.line}">/</span>
+                        <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
+                    </div>
+                </div>
+                <div class="${styles.slider}">
+                    <div class="plyr__progress">
+                        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
+                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
+                        <span role="tooltip" class="plyr__tooltip">00:00</span>
+                    </div>
+
+                </div>
+                <div class="${styles.actions}" style="padding-right: 0;">
+                    <button id="${replayBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
+                        <img class="loop" src="${iconReplay}" />
+                    </button>
+                </div>
+            </div>`;
+
+    // <div class="${styles.actionWrap}">
+    //             <button id="${playBtnId}" class="${styles.actionBtn}">
+    //                 <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    //                 <img class="${styles.playIcon}" src="${iconplay}" />
+    //                 <img class="${styles.playIcon}" src="${iconpause}" />
+    //             </button>
+
+    //         </div>
+    //         <div>${item.value.name}</div>
+
+    onMounted(() => {
+      videoItem.value = new Plyr(videoRef.value, {
+        autoplay: false,
+        controls: controls,
+        autopause: true, // 一次只允许
+        ratio: '16:9', // 强制所有视频的纵横比
+        hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
+        clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停
+        fullscreen: { enabled: false, fallback: false, iosNative: false } // 不适用全屏
+      });
+      if (videoItem.value) {
+        videoItem.value.on('play', () => {
+          if (videoItem.value) {
+            videoItem.value.muted = false;
+            videoItem.value.volume = 1;
+          }
+
+          // console.log('开始播放', item.value)
+          if (
+            !item.value.autoPlay &&
+            !item.value.isprepare &&
+            videoItem.value
+          ) {
+            // 加载完成后,取消静音播放
+
+            console.log(videoItem.value);
+            videoItem.value.pause();
+          }
+          changePlayBtn('');
+          emit('togglePlay', videoItem.value?.paused);
+        });
+        videoItem.value.on('pause', () => {
+          changePlayBtn('play');
+          emit('togglePlay', videoItem.value?.paused);
+        });
+        videoItem.value.on('ended', () => {
+          emit('ended');
+          changePlayBtn('play');
+        });
+        videoItem.value.once('loadedmetadata', () => {
+          changePlayBtn('play');
+          if (item.value.autoPlay && videoItem.value) {
+            videoItem.value.play();
+          }
+          emit('loadedmetadata', videoItem.value);
+        });
+
+        nextTick(() => {
+          onDefault();
+        });
+      }
+    });
+    expose({
+      changePlayBtn,
+      toggleHideControl
+    });
+    return () => (
+      <div class={styles.videoWrap}>
+        <video
+          style={{ width: '100%', height: '100%' }}
+          src={isEmtry.value ? '' : item.value.content}
+          ref={videoRef}
+          playsinline="false"></video>
+      </div>
+    );
+  }
+});

src/views/attend-class/component/video-play.tsx

@@ -1,11 +1,14 @@
-import { defineComponent, nextTick, onMounted, toRefs } from 'vue';
-import 'plyr/dist/plyr.css';
-import Plyr from 'plyr';
+import { defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue';
+import TCPlayer from 'tcplayer.js';
+import 'tcplayer.js/dist/tcplayer.min.css';
+// import 'plyr/dist/plyr.css';
+// import Plyr from 'plyr';
 import { ref } from 'vue';
 import styles from './video.module.less';
 import iconplay from '../image/icon-pause.png';
 import iconpause from '../image/icon-play.png';
 import iconReplay from '../image/icon-replay.png';
+import { NSlider } from 'naive-ui';
 
 export default defineComponent({
   name: 'video-play',
@@ -24,141 +27,89 @@ export default defineComponent({
   emits: ['loadedmetadata', 'togglePlay', 'ended', 'reset'],
   setup(props, { emit, expose }) {
     const { item, isEmtry } = toRefs(props);
+    const videoFroms = reactive({
+      paused: true,
+      currentTimeNum: 0,
+      currentTime: '00:00',
+      durationNum: 0,
+      duration: '00:00',
+      showBar: true
+    });
     const videoRef = ref();
-    const videoItem = ref<Plyr>();
-    const controlID = 'v' + Date.now() + Math.floor(Math.random() * 100);
-    const playBtnId = 'play' + Date.now() + Math.floor(Math.random() * 100);
-    const replayBtnId = 'replay' + Date.now() + Math.floor(Math.random() * 100);
-    const toggleHideControl = (isShow: false) => {
-      videoItem.value?.toggleControls(isShow);
-    };
-    const togglePlay = (e: Event) => {
-      e.stopPropagation();
-      videoItem.value?.togglePlay();
-    };
-    const toggleReplay = () => {
-      const replayBtn = document.getElementById(replayBtnId);
-      if (!replayBtn || !videoItem.value) return;
-      videoItem.value.restart();
-    };
-    const onDefault = () => {
-      document
-        .getElementById(controlID)
-        ?.addEventListener('click', (e: Event) => {
-          e.stopPropagation();
-          emit('reset');
-        });
-      document.getElementById(playBtnId)?.addEventListener('click', togglePlay);
-      document
-        .getElementById(replayBtnId)
-        ?.addEventListener('click', toggleReplay);
-    };
+    const videoItem = ref();
+    const videoID = 'video' + Date.now() + Math.floor(Math.random() * 100);
 
-    const changePlayBtn = (code: string) => {
-      const playBtn = document.getElementById(playBtnId);
-      if (!playBtn) return;
-      if (code == 'play') {
-        playBtn.classList.remove(styles.btnPause);
-        playBtn.classList.add(styles.btnPlay);
+    // 对时间进行格式化
+    const timeFormat = (num: number) => {
+      if (num > 0) {
+        const m = Math.floor(num / 60);
+        const s = num % 60;
+        return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
       } else {
-        playBtn.classList.remove(styles.btnPlay);
-        playBtn.classList.add(styles.btnPause);
+        return '00:00';
       }
     };
-    const controls = `
-            <div id="${controlID}" class="plyr__controls bottomFixed ${styles.controls}">
-                <div class="${styles.actions}">
-                    <div class="${styles.actionWrap}">
-                        <button id="${playBtnId}" class="${styles.actionBtn}">
-                            <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-                            <img class="${styles.playIcon}" src="${iconplay}" />
-                            <img class="${styles.playIcon}" src="${iconpause}" />
-                        </button>
-                    </div>
-                    <div class="${styles.time}">
-                        <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div><span class="${styles.line}">/</span>
-                        <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
-                    </div>
-                </div>
-                <div class="${styles.slider}">
-                    <div class="plyr__progress">
-                        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
-                        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
-                        <span role="tooltip" class="plyr__tooltip">00:00</span>
-                    </div>
 
-                </div>
-                <div class="${styles.actions}" style="padding-right: 0;">
-                    <button id="${replayBtnId}" class="${styles.actionBtn} ${styles.loopBtn}">
-                        <img class="loop" src="${iconReplay}" />
-                    </button>
-                </div>
-            </div>`;
+    //
+    const toggleHideControl = (isShow: false) => {
+      videoFroms.showBar = isShow;
+    };
 
-    // <div class="${styles.actionWrap}">
-    //             <button id="${playBtnId}" class="${styles.actionBtn}">
-    //                 <div class="van-loading van-loading--circular" aria-live="polite" aria-busy="true"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(255, 255, 255);"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-    //                 <img class="${styles.playIcon}" src="${iconplay}" />
-    //                 <img class="${styles.playIcon}" src="${iconpause}" />
-    //             </button>
+    const onReplay = () => {
+      if (!videoItem.value) return;
+      videoItem.value.currentTime(0);
+    };
 
-    //         </div>
-    //         <div>${item.value.name}</div>
+    // 切换音频播放
+    const onToggleVideo = (e?: MouseEvent) => {
+      e?.stopPropagation();
+      if (videoFroms.paused) {
+        videoItem.value.play();
+        videoFroms.paused = false;
+      } else {
+        videoItem.value.pause();
+        videoFroms.paused = true;
+      }
+      emit('togglePlay', videoFroms.paused);
+    };
 
     onMounted(() => {
-      videoItem.value = new Plyr(videoRef.value, {
-        autoplay: false,
-        controls: controls,
-        autopause: true, // 一次只允许
-        ratio: '16:9', // 强制所有视频的纵横比
-        hideControls: false, // 在 2 秒没有鼠标或焦点移动、控制元素模糊（制表符退出）、播放开始或进入全屏时自动隐藏视频控件。只要移动鼠标、聚焦控制元素或暂停播放，控件就会立即重新出现。
-        clickToPlay: false, // 单击（或点击）视频容器将切换播放/暂停
-        fullscreen: { enabled: false, fallback: false, iosNative: false } // 不适用全屏
-      });
+      videoItem.value = TCPlayer(videoID, {
+        appID: '',
+        controls: false
+      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
       if (videoItem.value) {
-        videoItem.value.on('play', () => {
-          if (videoItem.value) {
-            videoItem.value.muted = false;
-            videoItem.value.volume = 1;
-          }
+        videoItem.value.src(isEmtry.value ? '' : item.value.content); // url 播放地址
+
+        // 初步加载时
+        videoItem.value.one('loadedmetadata', () => {
+          console.log(' Loading metadata');
 
-          // console.log('开始播放', item.value)
-          if (
-            !item.value.autoPlay &&
-            !item.value.isprepare &&
-            videoItem.value
-          ) {
-            // 加载完成后,取消静音播放
+          // 获取时长
+          videoFroms.duration = timeFormat(
+            Math.round(videoItem.value.duration())
+          );
+          videoFroms.durationNum = videoItem.value.duration();
 
-            console.log(videoItem.value);
-            videoItem.value.pause();
-          }
-          changePlayBtn('');
-          emit('togglePlay', videoItem.value?.paused);
+          emit('loadedmetadata', videoItem.value);
         });
-        videoItem.value.on('pause', () => {
-          changePlayBtn('play');
-          emit('togglePlay', videoItem.value?.paused);
+
+        // 视频播放时加载
+        videoItem.value.on('timeupdate', () => {
+          videoFroms.currentTime = timeFormat(
+            Math.round(videoItem.value?.currentTime() || 0)
+          );
+          videoFroms.currentTimeNum = videoItem.value.currentTime();
         });
+
+        // 视频播放结束
         videoItem.value.on('ended', () => {
           emit('ended');
-          changePlayBtn('play');
-        });
-        videoItem.value.once('loadedmetadata', () => {
-          changePlayBtn('play');
-          if (item.value.autoPlay && videoItem.value) {
-            videoItem.value.play();
-          }
-          emit('loadedmetadata', videoItem.value);
-        });
-
-        nextTick(() => {
-          onDefault();
         });
       }
     });
     expose({
-      changePlayBtn,
+      // changePlayBtn,
       toggleHideControl
     });
     return () => (
@@ -167,7 +118,67 @@ export default defineComponent({
           style={{ width: '100%', height: '100%' }}
           src={isEmtry.value ? '' : item.value.content}
           ref={videoRef}
-          playsinline="false"></video>
+          id={videoID}
+          preload="auto"
+          playsinline
+          webkit-playsinline></video>
+
+        <div
+          class={[
+            styles.controls,
+            videoFroms.showBar ? '' : styles.sectionAnimate
+          ]}
+          onClick={(e: MouseEvent) => {
+            e.stopPropagation();
+            emit('reset');
+          }}>
+          <div class={styles.actions}>
+            <div class={styles.actionWrap}>
+              <button class={styles.actionBtn} onClick={onToggleVideo}>
+                {videoFroms.paused ? (
+                  <img class={styles.playIcon} src={iconplay} />
+                ) : (
+                  <img class={styles.playIcon} src={iconpause} />
+                )}
+              </button>
+            </div>
+            <div class={styles.time}>
+              <div
+                class="plyr__time plyr__time--current"
+                aria-label="Current time">
+                {videoFroms.currentTime}
+              </div>
+              <span class={styles.line}>/</span>
+              <div
+                class="plyr__time plyr__time--duration"
+                aria-label="Duration">
+                {videoFroms.duration}
+              </div>
+            </div>
+          </div>
+
+          <div class={styles.slider}>
+            <NSlider
+              value={videoFroms.currentTimeNum}
+              step={0.01}
+              max={videoFroms.durationNum}
+              tooltip={false}
+              onUpdate:value={(val: number) => {
+                videoItem.value.currentTime = val;
+                videoFroms.currentTimeNum = val;
+                videoFroms.currentTime = timeFormat(Math.round(val || 0));
+              }}
+            />
+          </div>
+
+          <div class={styles.actions}>
+            <div class={styles.actionWrap}>
+              <button class={styles.iconReplay} onClick={onReplay}>
+                <img src={iconReplay} />
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

src/views/attend-class/component/video.module.less

@@ -1,74 +1,46 @@
 .videoWrap {
   width: 100%;
   height: 100%;
-  --plyr-color-main: #198CFE;
-  --plyr-range-track-height: 4px;
-  --plyr-tooltip-radius: 3px;
-  --plyr-range-thumb-height: 18px;
 
 
-  :global {
-    .plyr--video {
-      width: 100%;
-      height: 100%;
-    }
-
-    .plyr__time {
-      display: block !important;
-    }
-
-    .plyr__video-wrapper {
-      pointer-events: none;
-    }
-  }
-}
-
-:global(.bottomFixed).controls {
-  width: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(26px);
-  height: 150px;
-  padding: 0 250px 0 40px !important;
-  transition: all 0.5s;
-
-  .time {
+  .controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(26px);
+    height: 150px;
+    padding: 0 250px 0 40px !important;
+    transition: all 0.5s;
     display: flex;
-    justify-content: space-between;
-    color: #fff;
-    // font-size: 10px;
-    padding: 4px 0 4px 20px;
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 33px;
-
-    &>div {
-      font-size: 24px !important;
-    }
+    align-items: center;
+    transition: all .5s;
 
-    .line {
-      font-size: 12px;
-    }
+    .time {
+      display: flex;
+      justify-content: space-between;
+      color: #fff;
+      // font-size: 10px;
+      padding: 4px 20px 4px;
+      font-size: 24px;
+      font-weight: 600;
+      line-height: 33px;
 
-    :global {
-      .plyr__time+.plyr__time:before {
-        content: '';
-        margin-right: 0;
+      &>div {
+        font-size: 24px !important;
       }
-    }
-  }
-
-  .slider {
-    width: 100%;
-    padding: 0 20px 0 12px;
 
-    :global {
-      .van-slider__button {
-        background: var(--van-primary);
+      .line {
+        font-size: 12px;
       }
 
-      .van-loading {
-        width: 100%;
-        height: 100%;
+      :global {
+        .plyr__time+.plyr__time:before {
+          content: '';
+          margin-right: 0;
+        }
       }
     }
   }
@@ -76,9 +48,10 @@
   .actions {
     display: flex;
     justify-content: space-between;
+    // width: 100%;
+    height: 100%;
     color: #fff;
     font-size: 12px;
-    padding-right: 20px;
     align-items: center;
 
     .actionWrap {
@@ -87,63 +60,198 @@
 
     .actionBtn {
       display: flex;
-      // width: 43px !important;
-      // height: 43px !important;
       width: 82px;
       height: 82px;
       padding: 4px 0;
       background: transparent;
-    }
-
-    .actionBtn>img {
-      width: 100%;
-      height: 100%;
-    }
 
-    :global {
-      .van-loading__circular {
+      &>img {
         width: 100%;
         height: 100%;
       }
     }
 
-    .playIcon {
-      display: none;
-    }
 
-    .btnPlay img:nth-child(2) {
-      display: block;
-    }
-
-    .btnPause img:nth-child(3) {
-      display: block;
-    }
+    .iconReplay {
+      width: 43px;
+      height: 42px;
+      background-color: transparent;
 
-    .btnPlay,
-    .btnPause {
-      :global {
-        .van-loading {
-          display: none;
-        }
+      &>img {
+        width: 100%;
+        height: 100%;
       }
     }
+  }
 
-    .loopBtn {
-      background-color: transparent;
-      width: 43px;
-      height: 42px;
-      padding: 0;
-      cursor: pointer;
+  .slider {
+    width: 100%;
+    padding: 0 20px 0 12px;
 
-      :global {
-        .loop {
-          display: block;
-        }
+    :global {
 
-        .loopActive {
-          display: none;
-        }
+      .n-slider .n-slider-rail .n-slider-rail__fill,
+      .n-slider .n-slider-handles .n-slider-handle-wrapper {
+        transition: all .2s;
       }
     }
   }
+
+  .sectionAnimate {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(100%);
+    transition: all .5s;
+  }
 }
+
+
+// .videoWrap {
+//   width: 100%;
+//   height: 100%;
+//   --plyr-color-main: #198CFE;
+//   --plyr-range-track-height: 4px;
+//   --plyr-tooltip-radius: 3px;
+//   --plyr-range-thumb-height: 18px;
+
+
+//   :global {
+//     .plyr--video {
+//       width: 100%;
+//       height: 100%;
+//     }
+
+//     .plyr__time {
+//       display: block !important;
+//     }
+
+//     .plyr__video-wrapper {
+//       pointer-events: none;
+//     }
+//   }
+// }
+
+// :global(.bottomFixed).controls {
+//   width: 100%;
+//   background: rgba(0, 0, 0, 0.6);
+//   backdrop-filter: blur(26px);
+//   height: 150px;
+//   padding: 0 250px 0 40px !important;
+//   transition: all 0.5s;
+
+//   .time {
+//     display: flex;
+//     justify-content: space-between;
+//     color: #fff;
+//     // font-size: 10px;
+//     padding: 4px 0 4px 20px;
+//     font-size: 24px;
+//     font-weight: 600;
+//     line-height: 33px;
+
+//     &>div {
+//       font-size: 24px !important;
+//     }
+
+//     .line {
+//       font-size: 12px;
+//     }
+
+//     :global {
+//       .plyr__time+.plyr__time:before {
+//         content: '';
+//         margin-right: 0;
+//       }
+//     }
+//   }
+
+//   .slider {
+//     width: 100%;
+//     padding: 0 20px 0 12px;
+
+//     :global {
+//       .van-slider__button {
+//         background: var(--van-primary);
+//       }
+
+//       .van-loading {
+//         width: 100%;
+//         height: 100%;
+//       }
+//     }
+//   }
+
+//   .actions {
+//     display: flex;
+//     justify-content: space-between;
+//     color: #fff;
+//     font-size: 12px;
+//     padding-right: 20px;
+//     align-items: center;
+
+//     .actionWrap {
+//       display: flex;
+//     }
+
+//     .actionBtn {
+//       display: flex;
+//       // width: 43px !important;
+//       // height: 43px !important;
+//       width: 82px;
+//       height: 82px;
+//       padding: 4px 0;
+//       background: transparent;
+//     }
+
+//     .actionBtn>img {
+//       width: 100%;
+//       height: 100%;
+//     }
+
+//     :global {
+//       .van-loading__circular {
+//         width: 100%;
+//         height: 100%;
+//       }
+//     }
+
+//     .playIcon {
+//       display: none;
+//     }
+
+//     .btnPlay img:nth-child(2) {
+//       display: block;
+//     }
+
+//     .btnPause img:nth-child(3) {
+//       display: block;
+//     }
+
+//     .btnPlay,
+//     .btnPause {
+//       :global {
+//         .van-loading {
+//           display: none;
+//         }
+//       }
+//     }
+
+//     .loopBtn {
+//       background-color: transparent;
+//       width: 43px;
+//       height: 42px;
+//       padding: 0;
+//       cursor: pointer;
+
+//       :global {
+//         .loop {
+//           display: block;
+//         }
+
+//         .loopActive {
+//           display: none;
+//         }
+//       }
+//     }
+//   }
+// }

src/views/attend-class/index.tsx

@@ -716,12 +716,6 @@ export default defineComponent({
                               setModelOpen();
                             }
                           }}
-                          onEnded={() => {
-                            // const _index = popupData.activeIndex + 1;
-                            // if (_index < data.itemList.length) {
-                            //   handleSwipeChange(_index);
-                            // }
-                          }}
                           onReset={() => {
                             if (!m.videoEle?.paused) {
                               setModelOpen();