更新视屏

package-lock.json

@@ -33,6 +33,7 @@
         "query-string": "^7.1.1",
         "sortablejs": "^1.15.0",
         "swiper": "^9.0.5",
+        "tcplayer.js": "^4.8.0",
         "umi-request": "^1.4.0",
         "vant": "^4.0.0",
         "vconsole": "^3.15.0",
@@ -2970,6 +2971,27 @@
         "@babel/core": "^7.0.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/babel-walk": {
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.npmmirror.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
@@ -3031,6 +3053,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/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3235,6 +3262,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "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/ci-info": {
       "version": "1.6.0",
       "resolved": "https://registry.npmmirror.com/ci-info/-/ci-info-1.6.0.tgz",
@@ -3576,6 +3611,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/css-line-break": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
@@ -3777,6 +3820,11 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "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/domelementtype": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.2.0.tgz",
@@ -3947,6 +3995,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "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.14.54",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.54.tgz",
@@ -5194,6 +5250,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",
@@ -5538,6 +5603,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",
@@ -5820,6 +5890,11 @@
         "node": ">=0.10.0"
       }
     },
+    "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-ci": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/is-ci/-/is-ci-1.2.1.tgz",
@@ -5889,6 +5964,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "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",
@@ -6120,6 +6200,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",
@@ -6782,6 +6867,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",
@@ -6845,6 +6940,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.0.4",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.0.4.tgz",
@@ -7119,7 +7222,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,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -7527,6 +7629,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",
@@ -7791,6 +7898,14 @@
         "node": ">=6.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/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/progress/-/progress-2.0.3.tgz",
@@ -8345,6 +8460,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.5.5",
       "resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.5.5.tgz",
@@ -8362,6 +8485,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "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/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -8557,6 +8688,19 @@
       "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
       "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
     },
+    "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": "2.0.0",
       "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -8767,6 +8911,48 @@
       "dev": true,
       "license": "MIT"
     },
+    "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/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/tcplayer.js/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/text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -8849,6 +9035,12 @@
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
       "license": "0BSD"
     },
+    "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",
@@ -9129,6 +9321,27 @@
         "mutation-observer": "^1.0.3"
       }
     },
+    "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": "2.9.8",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-2.9.8.tgz",
@@ -9803,6 +10016,25 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
+    "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/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/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
@@ -11996,6 +12228,27 @@
         "@babel/helper-define-polyfill-provider": "^0.3.0"
       }
     },
+    "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=="
+        }
+      }
+    },
     "babel-walk": {
       "version": "3.0.0-canary-5",
       "resolved": "https://registry.npmmirror.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
@@ -12032,6 +12285,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=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -12165,6 +12423,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=="
+    },
     "ci-info": {
       "version": "1.6.0",
       "resolved": "https://registry.npmmirror.com/ci-info/-/ci-info-1.6.0.tgz",
@@ -12408,6 +12671,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=="
+    },
     "css-line-break": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
@@ -12552,6 +12820,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domelementtype": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.2.0.tgz",
@@ -12678,6 +12951,11 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "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.14.54",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.54.tgz",
@@ -13447,6 +13725,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",
@@ -13667,6 +13954,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",
@@ -13859,6 +14151,11 @@
         "is-windows": "^1.0.1"
       }
     },
+    "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-ci": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/is-ci/-/is-ci-1.2.1.tgz",
@@ -13907,6 +14204,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",
@@ -14057,6 +14359,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",
@@ -14517,6 +14824,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",
@@ -14557,6 +14874,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.0.4",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.0.4.tgz",
@@ -14755,8 +15080,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.11.0",
@@ -15022,6 +15346,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",
@@ -15200,6 +15529,11 @@
         "fast-diff": "^1.1.2"
       }
     },
+    "process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmmirror.com/process/-/process-0.5.2.tgz",
+      "integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
+    },
     "progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/progress/-/progress-2.0.3.tgz",
@@ -15599,6 +15933,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.5.5",
       "resolved": "https://registry.npmmirror.com/rxjs/-/rxjs-7.5.5.tgz",
@@ -15614,6 +15956,14 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "dev": true
     },
+    "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"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -15758,6 +16108,16 @@
       "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
       "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
     },
+    "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": "2.0.0",
       "resolved": "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -15889,6 +16249,44 @@
       "integrity": "sha512-hqTN6kW+pN6/qro6G9OZ7ceDQOcYno020zBQKpZQLsJhYTDMCMNfXi/Y8duF5iW+4WWZr42ry0MMkcRGpbwG2A==",
       "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": {
+        "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"
+          }
+        },
+        "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=="
+        }
+      }
+    },
     "text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -15953,6 +16351,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",
@@ -16140,6 +16543,27 @@
         "mutation-observer": "^1.0.3"
       }
     },
+    "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": "2.9.8",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-2.9.8.tgz",
@@ -16626,6 +17050,22 @@
       "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"
+      }
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
     "y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",

package.json

@@ -46,6 +46,7 @@
     "query-string": "^7.1.1",
     "sortablejs": "^1.15.0",
     "swiper": "^9.0.5",
+    "tcplayer.js": "^4.8.0",
     "umi-request": "^1.4.0",
     "vant": "^4.0.0",
     "vconsole": "^3.15.0",

src/components/o-upload-all/index.tsx

@@ -8,6 +8,7 @@ import iconUploader from '@common/images/icon-upload.png'
 import iconUploadClose from '@common/images/icon-upload-close.png'
 import request from '@/helpers/request'
 import { getOssUploadUrl, state } from '@/state'
+import OVideo from '../o-video'
 
 export default defineComponent({
   name: 'col-upload',
@@ -220,11 +221,11 @@ export default defineComponent({
                 {this.uploadType === 'IMAGE' ? (
                   <Image src={item} class={styles.previewImg} fit="cover" />
                 ) : (
-                  <video
-                    ref="videoUpload"
-                    style={{ backgroundColor: '#F8F8F8' }}
+                  <OVideo
                     class={styles.previewImg}
-                    src={item + '#t=1,4'}
+                    style={{ backgroundColor: '#F8F8F8' }}
+                    src={item}
+                    controls={false}
                   />
                 )}
               </div>
@@ -253,11 +254,11 @@ export default defineComponent({
                       {this.uploadType === 'IMAGE' ? (
                         <Image fit="cover" position="center" class={styles.uploadImg} src={item} />
                       ) : (
-                        <video
-                          ref="videoUpload"
+                        <OVideo
                           class={styles.uploadImg}
                           style={{ backgroundColor: '#F8F8F8' }}
-                          src={item + '#t=1,4'}
+                          src={item}
+                          controls={false}
                         />
                       )}
                     </>
@@ -304,11 +305,11 @@ export default defineComponent({
                     {this.uploadType === 'IMAGE' ? (
                       <Image fit="cover" position="center" class={styles.uploadImg} src={item} />
                     ) : (
-                      <video
-                        ref="videoUpload"
+                      <OVideo
                         class={styles.uploadImg}
                         style={{ backgroundColor: '#F8F8F8' }}
-                        src={item + '#t=1,4'}
+                        src={item}
+                        controls={false}
                       />
                     )}
                   </>

src/components/o-video/index.module.less

@@ -31,14 +31,25 @@
       border: 1px solid #fff;
       background-color: rgba(0, 0, 0, 0.2) !important;
     }
+
     .plyr--video .plyr__control:hover {
       background-color: transparent !important;
     }
+
+    .video-js {
+      width: 100%;
+      height: 100%;
+    }
+
+    .tcp-skin .vjs-play-progress {
+      background-color: var(--van-primary) !important;
+    }
   }
 
   .video {
     position: relative;
   }
+
 }
 
 .loadingVideo {
@@ -83,6 +94,7 @@
   line-height: 21px;
   padding-top: 10px;
 }
+
 .freeRate {
   color: #32ffd8;
 }

src/components/o-video/index.tsx

@@ -4,6 +4,8 @@ import Plyr from 'plyr'
 import 'plyr/dist/plyr.css'
 import { Button, Icon, Loading, Toast } from 'vant'
 
+import TCPlayer from 'tcplayer.js'
+import 'tcplayer.js/dist/tcplayer.css'
 import iconVideoPlay from '@/common/images/icon_video_play.png'
 import { browser } from '@/helpers/utils'
 export default defineComponent({
@@ -13,7 +15,10 @@ export default defineComponent({
       type: Object,
       default: () => {}
     },
-    controls: Boolean,
+    controls: {
+      type: Boolean,
+      default: true
+    },
     height: String,
     src: {
       type: String,
@@ -47,6 +52,7 @@ export default defineComponent({
   emits: ['exitfullscreen'],
   data() {
     return {
+      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
       player: null as any,
       loading: true // 首次进入加载中
     }
@@ -74,70 +80,63 @@ export default defineComponent({
       //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
       //   'fullscreen' ,  // 切换全屏
       // ] ;
-      const controls = ['play-large', 'play', 'progress', 'captions', 'fullscreen']
-      if (this.currentTime) {
-        controls.push('current-time')
-      }
-      const params: any = {
-        controls: controls,
-        ...this.setting,
-        invertTime: false
-      }
+      const Button = TCPlayer.getComponent('Button')
+      const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
+      BigPlayButton.prototype.createEl = function () {
+        const el = Button.prototype.createEl.call(this)
+        const _html =
+          '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>'
 
-      if (browser().iPhone) {
-        params.fullscreen = {
-          enabled: true,
-          fallback: 'force',
-          iosNative: true
-        }
+        el.appendChild(
+          TCPlayer.dom.createEl('div', {
+            className: 'vjs-button-icon',
+            innerHTML: _html
+          })
+        )
+        return el
       }
+      this.player = TCPlayer(this.videoID, {
+        appID: '',
+        controls: this.controls
+      }) // player-container-id 为播放器容器 ID，必须与 html 中一致
+      if (this.player) {
+        this.player.src(this.src) // url 播放地址
+        this.player.poster(this.poster || '')
 
-      this.player = new Plyr((this as any).$refs.video, params)
-
-      // fullscreen: {
-      //     enabled: true,
-      //     fallback: 'force',
-      //     iosNative: true
-      //   }
-      this.player.elements.container
-        ? (this.player.elements.container.style.height = this.height || '210px')
-        : null
-
-      if (this.preload === 'none') {
-        this.loading = false
-      }
-      this.player.on('loadedmetadata', () => {
-        this.loading = false
-        this.domPlayVisibility(false)
-      })
-
-      this.player.on('play', () => {
-        this.onPlay && this.onPlay(this.player)
-      })
-
-      this.player.on('enterfullscreen', () => {
-        console.log('fullscreen')
-        const i = document.createElement('i')
-        i.id = 'fullscreen-back'
-        i.className = 'van-icon van-icon-arrow-left video-back'
-        i.addEventListener('click', () => {
-          this.player.fullscreen.exit()
+        if (this.preload === 'none') {
+          this.loading = false
+        }
+        this.player.on('loadstart', () => {
+          this.loading = false
+          this.domPlayVisibility(false)
+        })
+        this.player.on('play', () => {
+          this.onPlay && this.onPlay(this.player)
         })
-        console.log(document.getElementsByClassName('plyr'))
-        document.getElementsByClassName('plyr')[0].appendChild(i)
-      })
 
-      this.player.on('exitfullscreen', () => {
-        console.log('exitfullscreen')
-        const i = document.getElementById('fullscreen-back')
-        i && i.remove()
-        this.$emit('exitfullscreen')
-      })
+        this.player.on('fullscreenchange', () => {
+          if (this.player.isFullscreen()) {
+            console.log('fullscreen')
+            const i = document.createElement('i')
+            i.id = 'fullscreen-back'
+            i.className = 'van-icon van-icon-arrow-left video-back'
+            i.addEventListener('click', () => {
+              this.player.exitFullscreen()
+            })
+            // console.log(document.getElementsByClassName('video-js'))
+            document.getElementsByClassName('video-js')[0].appendChild(i)
+          } else {
+            console.log('exitfullscreen')
+            const i = document.getElementById('fullscreen-back')
+            i && i.remove()
+          }
+        })
+      }
     },
     // 操作功能
     domPlayVisibility(hide = true) {
-      const controls = document.querySelector('.plyr__controls')
-      const controls2 = document.querySelector('.plyr__control--overlaid')
+      const controls = document.querySelector('.vjs-big-play-button')
+      const controls2 = document.querySelector('.vjs-control-bar')
       if (hide) {
         controls?.setAttribute('style', 'display:none')
         controls2?.setAttribute('style', 'display:none')
@@ -150,22 +149,26 @@ export default defineComponent({
     },
 
     onReplay() {
-      this.player.restart()
+      this.player.currentTime(0)
       this.player.play()
       this.domPlayVisibility(false)
     },
     onStop() {
-      this.player.stop()
+      this.player.currentTime(0)
+      this.player.pause()
     }
   },
   unmounted() {
-    this.player?.destroy()
+    this.player?.pause()
+    this.player?.src('')
+    this.player?.dispose()
   },
   render() {
     return (
       <div class={styles['video-container']}>
         <video
           ref="video"
+          id={this.videoID}
           class={styles['video']}
           src={this.src}
           playsinline={this.playsinline}

src/student/pre-register-active/compontent-show/video-show.tsx

@@ -2,10 +2,12 @@ import { defineComponent, nextTick, onMounted, reactive, watch } from 'vue'
 import styles from '../video.module.less'
 import { Button } from 'vant'
 import { browser } from '@/helpers/utils'
-import Plyr from 'plyr'
-import 'plyr/dist/plyr.css'
+// import Plyr from 'plyr'
+// import 'plyr/dist/plyr.css'
 import { useRoute } from 'vue-router'
 import deepClone from '@/helpers/deep-clone'
+import TCPlayer from 'tcplayer.js'
+import 'tcplayer.js/dist/tcplayer.css'
 
 export default defineComponent({
   name: 'pre-register',
@@ -15,6 +17,7 @@ export default defineComponent({
     const video = route.query.v ? JSON.parse(route.query.v as any) : []
     const forms = reactive({
       coverImg: route.query.coverImg,
+      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
       introductionVideo: route.query.introductionVideo as any,
       id: null as any,
       videoDetails: deepClone(video),
@@ -31,74 +34,128 @@ export default defineComponent({
      * 5、点击视频进度或拖动进度时，时间暂停
      */
     const _init = () => {
-      const controls = [
-        'play-large',
-        'play',
-        'progress',
-        'captions',
-        'current-time',
-        'duration',
-        'settings',
-        'fullscreen'
-      ]
-      const params: any = {
-        controls: controls,
-        settings: ['speed'],
-        speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
-        i18n: {
-          speed: '速度',
-          normal: '默认'
-        },
-        invertTime: false
-      }
+      // const controls = [
+      //   'play-large',
+      //   'play',
+      //   'progress',
+      //   'captions',
+      //   'current-time',
+      //   'duration',
+      //   'settings',
+      //   'fullscreen'
+      // ]
+      // const params: any = {
+      //   controls: controls,
+      //   settings: ['speed'],
+      //   speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
+      //   i18n: {
+      //     speed: '速度',
+      //     normal: '默认'
+      //   },
+      //   invertTime: false
+      // }
 
-      if (browser().iPhone) {
-        params.fullscreen = {
-          enabled: true,
-          fallback: 'force',
-          iosNative: true
-        }
-      }
+      // if (browser().iPhone) {
+      //   params.fullscreen = {
+      //     enabled: true,
+      //     fallback: 'force',
+      //     iosNative: true
+      //   }
+      // }
 
-      const times: any = []
-      deepClone(forms.videoDetails).forEach((item: any) => {
-        times.push({
-          time: item.startNode,
-          label: item.desc
-        })
-      })
-      params.markers = { enabled: true, points: times }
+      // const times: any = []
+      // deepClone(forms.videoDetails).forEach((item: any) => {
+      //   times.push({
+      //     time: item.startNode,
+      //     label: item.desc
+      //   })
+      // })
+      // params.markers = { enabled: true, points: times }
 
-      forms.player = new Plyr('#register-video', params)
+      // forms.player = new Plyr('#register-video', params)
 
-      forms.player.on('loadedmetadata', () => {
-        checkVideoDetails(forms.player.currentTime)
-      })
+      // forms.player.on('loadedmetadata', () => {
+      //   checkVideoDetails(forms.player.currentTime)
+      // })
 
-      // 如何视频在缓存不会触发
-      forms.player.on('timeupdate', (e: any) => {
-        // 时间变化时更新每一段的状态
-        console.log(forms.player.currentTime, 'forms.player.currentTime', e)
-        checkVideoDetails(forms.player.currentTime)
-      })
+      // // 如何视频在缓存不会触发
+      // forms.player.on('timeupdate', (e: any) => {
+      //   // 时间变化时更新每一段的状态
+      //   console.log(forms.player.currentTime, 'forms.player.currentTime', e)
+      //   checkVideoDetails(forms.player.currentTime)
+      // })
+
+      // forms.player.on('enterfullscreen', () => {
+      //   console.log('fullscreen')
+      //   const i = document.createElement('i')
+      //   i.id = 'fullscreen-back'
+      //   i.className = 'van-icon van-icon-arrow-left video-back'
+      //   i.addEventListener('click', () => {
+      //     forms.player.fullscreen.exit()
+      //   })
+      //   console.log(document.getElementsByClassName('plyr'))
+      //   document.getElementsByClassName('plyr')[0].appendChild(i)
+      // })
+
+      // forms.player.on('exitfullscreen', () => {
+      //   console.log('exitfullscreen')
+      //   const i = document.getElementById('fullscreen-back')
+      //   i && i.remove()
+      // })
+      const Button = TCPlayer.getComponent('Button')
+      const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
+      BigPlayButton.prototype.createEl = function () {
+        const el = Button.prototype.createEl.call(this)
+        const _html =
+          '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>'
 
-      forms.player.on('enterfullscreen', () => {
-        console.log('fullscreen')
-        const i = document.createElement('i')
-        i.id = 'fullscreen-back'
-        i.className = 'van-icon van-icon-arrow-left video-back'
-        i.addEventListener('click', () => {
-          forms.player.fullscreen.exit()
+        el.appendChild(
+          TCPlayer.dom.createEl('div', {
+            className: 'vjs-button-icon',
+            innerHTML: _html
+          })
+        )
+        return el
+      }
+      forms.player = TCPlayer('register-video', {
+        appID: '',
+        controls: true,
+        plugins: {
+          ProgressMarker: true
+        }
+      }) // player-container-id 为播放器容器 ID，必须与 html 中一致
+      if (forms.player) {
+        forms.player.src(forms.introductionVideo) // url 播放地址
+        forms.player.poster(forms.coverImg || '')
+
+        forms.player.on('loadedmetadata', () => {
+          checkVideoDetails(forms.player.currentTime())
         })
-        console.log(document.getElementsByClassName('plyr'))
-        document.getElementsByClassName('plyr')[0].appendChild(i)
-      })
 
-      forms.player.on('exitfullscreen', () => {
-        console.log('exitfullscreen')
-        const i = document.getElementById('fullscreen-back')
-        i && i.remove()
-      })
+        // 如何视频在缓存不会触发
+        forms.player.on('timeupdate', (e: any) => {
+          // 时间变化时更新每一段的状态
+          console.log(forms.player.currentTime(), 'forms.player.currentTime()', e)
+          checkVideoDetails(forms.player.currentTime())
+        })
+
+        forms.player.on('fullscreenchange', () => {
+          if (forms.player.isFullscreen()) {
+            console.log('fullscreen')
+            const i = document.createElement('i')
+            i.id = 'fullscreen-back'
+            i.className = 'van-icon van-icon-arrow-left video-back'
+            i.addEventListener('click', () => {
+              forms.player.exitFullscreen()
+            })
+            document.getElementsByClassName('video-js')[0].appendChild(i)
+          } else {
+            console.log('exitfullscreen')
+            const i = document.getElementById('fullscreen-back')
+            i && i.remove()
+          }
+        })
+      }
     }
 
     const checkVideoDetails = (time: number) => {
@@ -138,7 +195,7 @@ export default defineComponent({
               <span
                 class={[item.id === forms.id ? styles.active : '']}
                 onClick={() => {
-                  forms.player.currentTime = item.startNode
+                  forms.player.currentTime(item.startNode)
                 }}
               >
                 {item.desc}

src/student/pre-register-active/video copy.tsx

@@ -0,0 +1,517 @@
+import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import styles from './video.module.less'
+import { Button, Loading } from 'vant'
+import { browser } from '@/helpers/utils'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
+import { useInterval, useIntervalFn } from '@vueuse/core'
+import { useRoute, useRouter } from 'vue-router'
+import request from '@/helpers/request'
+import qs from 'query-string'
+import { usePageVisibility } from '@vant/use'
+
+export default defineComponent({
+  name: 'pre-register',
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    const pageVisibility = usePageVisibility()
+    const openId = sessionStorage.getItem('active-open-id')
+    // 页面定时
+    const pageTimer = useInterval(1000, { controls: true })
+    pageTimer.pause()
+
+    const forms = reactive({
+      coverImg: '',
+      introductionVideo: '',
+      introductionVideoTime: 0, // 视频总时长
+      videoBrowsePoint: 0, // 视频最后观看点
+      saveId: route.query.saveId,
+      orchestraId: route.query.id,
+      openId: route.query.openId || openId,
+      loading: false,
+      player: null as any,
+      playerSpeed: 1,
+      intervalFnRef: null as any,
+      videoDetails: [] as any, // 节点列表
+      pointVideo: {} as any, // 需要处理有效的时间段
+      pointVideoTime: 0, // 有效时长
+      videoSelectId: null, // 选中的编号
+      isPageHide: false // 处理页面返回没有刷新的问题
+    })
+
+    // 播放视频总时长
+    const videoIntervalRef = useInterval(1000, { controls: true })
+    videoIntervalRef.pause()
+
+    /**
+     * 格式化视屏播放有效时间 - 合并区间
+     * @param intervals [[], []]
+     * @example [[4, 8],[0, 4],[10, 30]]
+     * @returns [[0, 8], [10, 30]]
+     */
+    const formatEffectiveTime = (intervals: any[]) => {
+      const res: any = []
+      intervals.sort((a, b) => a[0] - b[0])
+      let prev = intervals[0]
+      for (let i = 1; i < intervals.length; i++) {
+        const cur = intervals[i]
+        if (prev[1] >= cur[0]) {
+          // 有重合
+          prev[1] = Math.max(cur[1], prev[1])
+        } else {
+          // 不重合，prev推入res数组
+          res.push(prev)
+          prev = cur // 更新 prev
+        }
+      }
+      res.push(prev)
+
+      return formatEffectiveTimeToAfter(res)
+    }
+
+    const formatEffectiveTimeToAfter = (res: any[]) => {
+      // 格式化有效时间
+      const effective: any = []
+      const startNode = forms.pointVideo.startNode
+      const endNode = forms.pointVideo.endNode
+      res.forEach((item: any) => {
+        // 开始时间大于 设置时间
+        if (item[0] >= startNode && item[1] <= endNode) {
+          effective.push(item)
+        }
+        if (item[0] >= startNode && item[1] <= endNode && item[1] >= endNode) {
+          effective.push([item[0], endNode])
+        }
+        if (item[0] < startNode && item[1] > startNode && item[1] < endNode) {
+          effective.push(startNode, item[1])
+        }
+      })
+      return effective
+    }
+
+    /**
+     * 获取数据有效期
+     * @param intervals [[], []]
+     * @returns 0s
+     */
+    const formatTimer = (intervals: any[]) => {
+      const afterIntervals = formatEffectiveTime(intervals)
+      console.log(afterIntervals, 'afterIntervals')
+      let time = 0
+      afterIntervals.forEach((t: any) => {
+        time += t[1] - t[0]
+      })
+      return time
+    }
+
+    const checkVideoDetails = (time: number) => {
+      forms.videoDetails.forEach((item: any) => {
+        if (item.startNode <= time && time <= item.endNode) {
+          forms.videoSelectId = item.id
+        }
+      })
+    }
+
+    /**
+     * 视屏累计时长
+     * 1、视屏开始播放时-开始计时
+     * 2、视频暂停时暂停-停止计时
+     * 3、视频加载时-停止计时
+     * 4、视频倍数播放时，时间正常计时
+     * 5、点击视频进度或拖动进度时，时间暂停
+     */
+    const _init = () => {
+      const controls = [
+        'play-large',
+        'play',
+        'progress',
+        'captions',
+        'current-time',
+        'duration',
+        'settings',
+        'fullscreen'
+      ]
+      const params: any = {
+        controls: controls,
+        settings: ['speed'],
+        speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
+        i18n: {
+          speed: '速度',
+          normal: '默认'
+        },
+        autoplay: false,
+        invertTime: false
+      }
+
+      if (browser().iPhone) {
+        params.fullscreen = {
+          enabled: true,
+          fallback: 'force',
+          iosNative: true
+        }
+      }
+      const times: any = []
+      forms.videoDetails.forEach((item: any) => {
+        times.push({
+          time: item.startNode,
+          label: item.desc
+        })
+      })
+      params.markers = { enabled: true, points: times }
+
+      forms.player = new Plyr('#register-video', params)
+
+      forms.player.on('ready', (item: any) => {
+        console.log('ready', item)
+
+        // forms.player.pause()
+      })
+      forms.player.on('loadedmetadata', () => {
+        console.log('loadedmetadata')
+        forms.loading = false
+        forms.player.currentTime = forms.videoBrowsePoint
+        checkVideoDetails(forms.player.currentTime)
+      })
+
+      // 速度变化时
+      forms.player.on('ratechange', () => {
+        forms.playerSpeed =
+          forms.playerSpeed < forms.player.speed ? forms.player.speed : forms.playerSpeed
+      })
+
+      forms.player.on('seeking', () => {
+        console.log('seeking')
+        videoIntervalRef.isActive.value && videoIntervalRef.pause()
+      })
+
+      // // 拖动结束时
+      forms.player.on('seeked', () => {
+        console.log('seeked')
+        videoIntervalRef.isActive.value && videoIntervalRef.pause()
+      })
+
+      // 正在搜索中
+      forms.player.on('waiting', () => {
+        // console.log('waiting pause')
+        videoIntervalRef.isActive.value && videoIntervalRef.pause()
+      })
+
+      // 如何视频在缓存不会触发
+      forms.player.on('timeupdate', () => {
+        console.log('timeupdate', forms.player.currentTime)
+        // 时间变化时更新每一段的状态
+        checkVideoDetails(forms.player.currentTime)
+        // 判断视频计时器是否暂停，如果暂停则恢复
+        // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
+        if (
+          !videoIntervalRef.isActive.value &&
+          forms.player.currentTime > 0 &&
+          forms.player.playing
+        ) {
+          // console.log('timeupdate play')
+          videoIntervalRef.resume()
+        }
+      })
+
+      // 视屏播放时暂停
+      forms.player.on('ended', () => {
+        forms.player.pause()
+      })
+
+      // 开始播放
+      forms.player.on('play', () => {
+        console.log('play')
+        // 判断视频计时器是否暂停，如果暂停则恢复
+        videoIntervalRef.resume()
+      })
+
+      // 暂停播放
+      forms.player.on('pause', () => {
+        console.log('pause', videoIntervalRef.isActive.value)
+
+        videoIntervalRef.pause()
+      })
+
+      forms.player.on('enterfullscreen', () => {
+        console.log('fullscreen')
+        const i = document.createElement('i')
+        i.id = 'fullscreen-back'
+        i.className = 'van-icon van-icon-arrow-left video-back'
+        i.addEventListener('click', () => {
+          forms.player.fullscreen.exit()
+        })
+        console.log(document.getElementsByClassName('plyr'))
+        document.getElementsByClassName('plyr')[0].appendChild(i)
+      })
+
+      forms.player.on('exitfullscreen', () => {
+        console.log('exitfullscreen')
+        const i = document.getElementById('fullscreen-back')
+        i && i.remove()
+      })
+      checkVideoDetails(0)
+    }
+
+    // 保存零时时间
+    const moreTime: any = ref([]) // 多个观看时间段
+    let tempTime: any = [] // 临时存储时间
+
+    const currentTimer = useInterval(1000, { controls: true })
+    // 监听播放状态，
+    watch(
+      () => videoIntervalRef.isActive.value,
+      (newVal: boolean) => {
+        initVideoCount(newVal)
+      }
+    )
+
+    const initVideoCount = (newVal: any) => {
+      // console.log(newVal, 'videoIntervalRef.isActive.value in')
+      // console.log('watch', forms.player.currentTime)
+      // console.log('保留两个小数：', forms.player.currentTime.toFixed(2))
+      // console.log('向下取整：', Math.floor(forms.player.currentTime))
+      // console.log('向上取整：', Math.ceil(forms.player.currentTime))
+      // console.log('四舍五入：', Math.round(forms.player.currentTime))
+      if (newVal) {
+        tempTime[0] = Math.floor(forms.player.currentTime)
+      } else {
+        tempTime[1] = Math.floor(forms.player.currentTime)
+      }
+      // console.log(forms.player.speed, 'speed')
+
+      if (tempTime.length >= 2) {
+        // console.log(tempTime, 'tempTime', moreTime.value)
+        // 处理在短时间内的时间差 【视屏拖动，点击可能会导致时间差太大】
+        const diffTime =
+          tempTime[1] - tempTime[0] - currentTimer.counter.value * forms.playerSpeed > 2
+        // console.log(diffTime, 'diffTime', currentTimer.counter.value, 'value')
+        // 结束时间，如果 大于开始时间则清除
+        if (tempTime[1] >= tempTime[0] && !diffTime) moreTime.value.push(tempTime)
+        tempTime = []
+        currentTimer.counter.value = 0
+      }
+
+      // console.log('观看的时间', moreTime)
+    }
+
+    watch(pageVisibility, (value: any) => {
+      console.log('watch', value)
+      if (value == 'hidden') {
+        forms.player.pause()
+      }
+    })
+
+    // 更新时间
+    const updateStat = async (pageBrowseTime = 10) => {
+      try {
+        const videoBrowseData = moreTime.value.length > 0 ? formatEffectiveTime(moreTime.value) : []
+        // console.log(moreTime.value, videoBrowseData, 'video')
+        const time = videoBrowseData.length > 0 ? formatTimer(videoBrowseData) : 0
+        // const videoCountTime = videoIntervalRef?.counter.value
+        // 判断如何视屏播放时间大于视屏播放有效时间则说明数据有问题，进行重置数据
+        const rate = Math.floor((time / Math.floor(forms.pointVideoTime)) * 100)
+        // console.log('videoIntervalRef?.counter.value', videoIntervalRef?.counter.value)
+        await request.post('/api-student/open/studentBrowseRecord/updateStat', {
+          data: {
+            id: forms.saveId,
+            pageBrowseTime, // 固定10秒
+            videoBrowseData: JSON.stringify(videoBrowseData), // 视屏播放数据
+            videoBrowseDataTime: time || 0, // 有效的视频观看时长
+            videoBrowsePercentage: rate || 0, // 有效的视频观看时长百分比
+            videoBrowseTime: videoIntervalRef?.counter.value, // 视频观看时长
+            videoBrowsePoint: Math.floor(forms.player.currentTime || 0) // 视频最后观看点 - 向下取整
+          }
+        })
+      } catch {
+        //
+      }
+    }
+
+    // 提交
+    const onSubmit = async () => {
+      try {
+        forms.player.pause() // 视屏
+        forms.intervalFnRef?.pause() // 页面订时器
+        currentTimer.pause()
+        videoIntervalRef.pause()
+        // 页面计时暂停
+        pageTimer.pause()
+        initVideoCount(videoIntervalRef.isActive.value)
+
+        await updateStat()
+        window.location.href =
+          window.location.origin +
+          window.location.pathname +
+          '/project/preRegister.html?' +
+          qs.stringify({
+            orchestraId: forms.orchestraId,
+            openId: forms.openId
+          })
+
+        // window.location.href =
+        //   window.location.origin +
+        //   '/project/preRegister.html?' +
+        //   qs.stringify({
+        //     orchestraId: forms.orchestraId,
+        //     openId: forms.openId
+        //   })
+      } catch (e) {
+        console.log(e, 'e')
+        // 还原
+        forms.intervalFnRef?.resume()
+        pageTimer.resume()
+        currentTimer.resume()
+      }
+    }
+
+    onMounted(async () => {
+      try {
+        const { data } = await request.get('/api-student/open/studentBrowseRecord/query', {
+          params: {
+            openId: forms.openId,
+            orchestraId: forms.orchestraId
+          }
+        })
+        forms.videoBrowsePoint = data.videoBrowsePoint || 0
+        if (forms.player) {
+          forms.player.currentTime = data.videoBrowsePoint || 0
+        }
+        forms.introductionVideo = data.introductionVideo
+        forms.introductionVideoTime = data.introductionVideoTime
+        forms.coverImg = data.coverImg
+        moreTime.value = data.videoBrowseData ? JSON.parse(data.videoBrowseData) : []
+
+        const videoDetails = data.videoDetails || []
+        videoDetails.forEach((video: any) => {
+          forms.videoDetails.push({
+            startNode: video.startNode,
+            endNode: video.endNode,
+            desc: video.desc,
+            id: video.id
+          })
+          if (video.pointFlag) {
+            forms.pointVideo = video
+            forms.pointVideoTime = video.endNode - video.startNode
+          }
+        })
+
+        _init()
+        // 间隔多少时间同步数据
+        forms.intervalFnRef = useIntervalFn(async () => {
+          // 页面时间恢复
+          pageTimer.counter.value = 0
+          pageTimer.resume()
+          await updateStat()
+          videoIntervalRef.counter.value = 0
+        }, 10000)
+      } catch {
+        //
+      }
+    })
+
+    onUnmounted(() => {
+      forms.intervalFnRef?.pause()
+      currentTimer.pause()
+      // 页面计时暂停
+      pageTimer.pause()
+    })
+
+    // 判断是否有openId
+    if (!forms.openId) {
+      router.replace({
+        path: '/pre-register-video',
+        query: {
+          id: forms.orchestraId
+        }
+      })
+    }
+
+    const onPageShow = () => {
+      console.log(forms.isPageHide, 'showInfo')
+      if (forms.isPageHide) {
+        window.location.reload()
+      }
+    }
+    // 处理监听页面返回不刷新的问题
+    window.addEventListener('pageshow', onPageShow)
+
+    const onPageHide = () => {
+      console.log(forms.isPageHide, 'showInfo')
+      forms.isPageHide = true
+    }
+    window.addEventListener('pagehide', onPageHide)
+
+    onUnmounted(() => {
+      window.removeEventListener('pageshow', onPageShow)
+      window.removeEventListener('pagehide', onPageHide)
+    })
+    return () => (
+      <div class={styles['pre-register-video']}>
+        <div class={styles.videoContainer}>
+          <div class={styles['video-content']}>
+            <video
+              id="register-video"
+              class={styles['video']}
+              src={forms.introductionVideo}
+              // src={
+              //   'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/1684981545808.mp4?time' + Date.now()
+              // }
+              playsinline={true}
+              poster={forms.coverImg}
+              preload="auto"
+            ></video>
+            {/* 加载视频使用 */}
+            {forms.loading && (
+              <div class={styles.loadingVideo}>
+                <Loading
+                  size={36}
+                  color="#FF8057"
+                  vertical
+                  style={{ height: '100%', justifyContent: 'center' }}
+                >
+                  加载中...
+                </Loading>
+              </div>
+            )}
+          </div>
+        </div>
+        <div class={styles.videoCount}>
+          <div class={styles.videoCountContent}>
+            {forms.videoDetails.map((item: any) => (
+              <span
+                class={[item.id === forms.videoSelectId ? styles.active : '']}
+                onClick={() => {
+                  forms.player.currentTime = item.startNode
+                  forms.player.play()
+                  forms.videoBrowsePoint = item.startNode
+                  checkVideoDetails(forms.player.currentTime)
+                }}
+              >
+                {item.desc}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div class={styles.messageContainer}>
+          <div class={styles.messageContent}>
+            <p>家长您好！</p>
+            <p class={styles.c1}>
+              请家长们合理安排时间，<span>认真观看</span>家长会内容。在<span>详细了解</span>
+              所有要求后，有意向让孩子加入乐团的家长，请在<span>明晚20:00前</span>，为孩子完成
+              <span>乐团报名</span>。
+            </p>
+            <p class={styles.c1}>
+              下周，专业老师将针对意向入团学员进行身体条件确认。谢谢各位的支持！
+            </p>
+            <p class={styles.bottom}>
+              注：乐团于下学期正式开始训练，训练时间下学期开学前另行通知，训练时间会与学校其他社团错开，家长无需担心时间冲突问题。
+            </p>
+          </div>
+
+          <Button class={styles.submitBtn} onClick={onSubmit}></Button>
+        </div>
+      </div>
+    )
+  }
+})

src/student/pre-register-active/video.module.less

@@ -87,11 +87,19 @@
         }
       }
     }
+
+    .video-js {
+      width: 100%;
+      height: 100%;
+      border-radius: 30px;
+      overflow: hidden;
+    }
   }
 
   .video {
     position: relative;
     border-radius: 30px;
+
   }
 }
 
@@ -203,4 +211,4 @@
   display: block;
   margin: 0 auto;
   border-radius: 50px;
-}
+}

src/student/pre-register-active/video.tsx

@@ -2,8 +2,10 @@ import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'v
 import styles from './video.module.less'
 import { Button, Loading } from 'vant'
 import { browser } from '@/helpers/utils'
-import Plyr from 'plyr'
-import 'plyr/dist/plyr.css'
+// import Plyr from 'plyr'
+// import 'plyr/dist/plyr.css'
+import TCPlayer from 'tcplayer.js'
+import 'tcplayer.js/dist/tcplayer.css'
 import { useInterval, useIntervalFn } from '@vueuse/core'
 import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
@@ -22,6 +24,7 @@ export default defineComponent({
     pageTimer.pause()
 
     const forms = reactive({
+      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
       coverImg: '',
       introductionVideo: '',
       introductionVideoTime: 0, // 视频总时长
@@ -122,134 +125,256 @@ export default defineComponent({
      * 5、点击视频进度或拖动进度时，时间暂停
      */
     const _init = () => {
-      const controls = [
-        'play-large',
-        'play',
-        'progress',
-        'captions',
-        'current-time',
-        'duration',
-        'settings',
-        'fullscreen'
-      ]
-      const params: any = {
-        controls: controls,
-        settings: ['speed'],
-        speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
-        i18n: {
-          speed: '速度',
-          normal: '默认'
-        },
-        autoplay: false,
-        invertTime: false
+      // const controls = [
+      //   'play-large',
+      //   'play',
+      //   'progress',
+      //   'captions',
+      //   'current-time',
+      //   'duration',
+      //   'settings',
+      //   'fullscreen'
+      // ]
+      // const params: any = {
+      //   controls: controls,
+      //   settings: ['speed'],
+      //   speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
+      //   i18n: {
+      //     speed: '速度',
+      //     normal: '默认'
+      //   },
+      //   autoplay: false,
+      //   invertTime: false
+      // }
+
+      // if (browser().iPhone) {
+      //   params.fullscreen = {
+      //     enabled: true,
+      //     fallback: 'force',
+      //     iosNative: true
+      //   }
+      // }
+      // const times: any = []
+      // forms.videoDetails.forEach((item: any) => {
+      //   times.push({
+      //     time: item.startNode,
+      //     label: item.desc
+      //   })
+      // })
+      // params.markers = { enabled: true, points: times }
+
+      // forms.player = new Plyr('#register-video', params)
+
+      // forms.player.on('ready', (item: any) => {
+      //   console.log('ready', item)
+
+      //   // forms.player.pause()
+      // })
+      // forms.player.on('loadedmetadata', () => {
+      //   console.log('loadedmetadata')
+      //   forms.loading = false
+      //   forms.player.currentTime() = forms.videoBrowsePoint
+      //   checkVideoDetails(forms.player.currentTime())
+      // })
+
+      // // 速度变化时
+      // forms.player.on('ratechange', () => {
+      //   forms.playerSpeed =
+      //     forms.playerSpeed < forms.player.speed ? forms.player.speed : forms.playerSpeed
+      // })
+
+      // forms.player.on('seeking', () => {
+      //   console.log('seeking')
+      //   videoIntervalRef.isActive.value && videoIntervalRef.pause()
+      // })
+
+      // // // 拖动结束时
+      // forms.player.on('seeked', () => {
+      //   console.log('seeked')
+      //   videoIntervalRef.isActive.value && videoIntervalRef.pause()
+      // })
+
+      // // 正在搜索中
+      // forms.player.on('waiting', () => {
+      //   // console.log('waiting pause')
+      //   videoIntervalRef.isActive.value && videoIntervalRef.pause()
+      // })
+
+      // // 如何视频在缓存不会触发
+      // forms.player.on('timeupdate', () => {
+      //   console.log('timeupdate', forms.player.currentTime())
+      //   // 时间变化时更新每一段的状态
+      //   checkVideoDetails(forms.player.currentTime())
+      //   // 判断视频计时器是否暂停，如果暂停则恢复
+      //   // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
+      //   if (
+      //     !videoIntervalRef.isActive.value &&
+      //     forms.player.currentTime() > 0 &&
+      //     forms.player.playing
+      //   ) {
+      //     // console.log('timeupdate play')
+      //     videoIntervalRef.resume()
+      //   }
+      // })
+
+      // // 视屏播放时暂停
+      // forms.player.on('ended', () => {
+      //   forms.player.pause()
+      // })
+
+      // // 开始播放
+      // forms.player.on('play', () => {
+      //   console.log('play')
+      //   // 判断视频计时器是否暂停，如果暂停则恢复
+      //   videoIntervalRef.resume()
+      // })
+
+      // // 暂停播放
+      // forms.player.on('pause', () => {
+      //   console.log('pause', videoIntervalRef.isActive.value)
+
+      //   videoIntervalRef.pause()
+      // })
+
+      // forms.player.on('enterfullscreen', () => {
+      //   console.log('fullscreen')
+      //   const i = document.createElement('i')
+      //   i.id = 'fullscreen-back'
+      //   i.className = 'van-icon van-icon-arrow-left video-back'
+      //   i.addEventListener('click', () => {
+      //     forms.player.fullscreen.exit()
+      //   })
+      //   console.log(document.getElementsByClassName('plyr'))
+      //   document.getElementsByClassName('plyr')[0].appendChild(i)
+      // })
+
+      // forms.player.on('exitfullscreen', () => {
+      //   console.log('exitfullscreen')
+      //   const i = document.getElementById('fullscreen-back')
+      //   i && i.remove()
+      // })
+      const Button = TCPlayer.getComponent('Button')
+      const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
+      BigPlayButton.prototype.createEl = function () {
+        const el = Button.prototype.createEl.call(this)
+        const _html =
+          '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>'
+
+        el.appendChild(
+          TCPlayer.dom.createEl('div', {
+            className: 'vjs-button-icon',
+            innerHTML: _html
+          })
+        )
+        return el
       }
-
-      if (browser().iPhone) {
-        params.fullscreen = {
-          enabled: true,
-          fallback: 'force',
-          iosNative: true
+      forms.player = TCPlayer('register-video', {
+        appID: '',
+        controls: true,
+        plugins: {
+          // ProgressMarker: {
+          //   markers: [
+          //     {
+          //       content: '1111',
+          //       timeOffset: 1000
+          //     }
+          //   ]
+          // }
         }
-      }
-      const times: any = []
-      forms.videoDetails.forEach((item: any) => {
-        times.push({
-          time: item.startNode,
-          label: item.desc
-        })
-      })
-      params.markers = { enabled: true, points: times }
-
-      forms.player = new Plyr('#register-video', params)
-
-      forms.player.on('ready', (item: any) => {
-        console.log('ready', item)
+      }) // player-container-id 为播放器容器 ID，必须与 html 中一致
+      if (forms.player) {
+        forms.player.src(forms.introductionVideo) // url 播放地址
+        forms.player.poster(forms.coverImg || '')
 
-        // forms.player.pause()
-      })
-      forms.player.on('loadedmetadata', () => {
-        console.log('loadedmetadata')
-        forms.loading = false
-        forms.player.currentTime = forms.videoBrowsePoint
-        checkVideoDetails(forms.player.currentTime)
-      })
+        // forms.player.on('loadstart', () => {})
+        forms.player.on('ready', (item: any) => {
+          console.log('ready', item)
 
-      // 速度变化时
-      forms.player.on('ratechange', () => {
-        forms.playerSpeed =
-          forms.playerSpeed < forms.player.speed ? forms.player.speed : forms.playerSpeed
-      })
+          // forms.player.pause()
+        })
+        forms.player.on('loadedmetadata', () => {
+          console.log('loadedmetadata')
+          forms.loading = false
+          forms.player.currentTime(forms.videoBrowsePoint)
+          checkVideoDetails(forms.player.currentTime())
+        })
 
-      forms.player.on('seeking', () => {
-        console.log('seeking')
-        videoIntervalRef.isActive.value && videoIntervalRef.pause()
-      })
+        // 速度变化时
+        forms.player.on('ratechange', () => {
+          forms.playerSpeed =
+            forms.playerSpeed < forms.player.speed ? forms.player.speed : forms.playerSpeed
+        })
 
-      // // 拖动结束时
-      forms.player.on('seeked', () => {
-        console.log('seeked')
-        videoIntervalRef.isActive.value && videoIntervalRef.pause()
-      })
+        forms.player.on('seeking', () => {
+          console.log('seeking')
+          videoIntervalRef.isActive.value && videoIntervalRef.pause()
+        })
 
-      // 正在搜索中
-      forms.player.on('waiting', () => {
-        // console.log('waiting pause')
-        videoIntervalRef.isActive.value && videoIntervalRef.pause()
-      })
+        // // 拖动结束时
+        forms.player.on('seeked', () => {
+          console.log('seeked')
+          videoIntervalRef.isActive.value && videoIntervalRef.pause()
+        })
 
-      // 如何视频在缓存不会触发
-      forms.player.on('timeupdate', () => {
-        console.log('timeupdate', forms.player.currentTime)
-        // 时间变化时更新每一段的状态
-        checkVideoDetails(forms.player.currentTime)
-        // 判断视频计时器是否暂停，如果暂停则恢复
-        // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
-        if (
-          !videoIntervalRef.isActive.value &&
-          forms.player.currentTime > 0 &&
-          forms.player.playing
-        ) {
-          // console.log('timeupdate play')
-          videoIntervalRef.resume()
-        }
-      })
+        // 正在搜索中
+        forms.player.on('waiting', () => {
+          // console.log('waiting pause')
+          videoIntervalRef.isActive.value && videoIntervalRef.pause()
+        })
 
-      // 视屏播放时暂停
-      forms.player.on('ended', () => {
-        forms.player.pause()
-      })
+        // 如何视频在缓存不会触发
+        forms.player.on('timeupdate', () => {
+          console.log('timeupdate', forms.player.currentTime())
+          // 时间变化时更新每一段的状态
+          checkVideoDetails(forms.player.currentTime())
+          // 判断视频计时器是否暂停，如果暂停则恢复
+          // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
+          if (
+            !videoIntervalRef.isActive.value &&
+            forms.player.currentTime() > 0 &&
+            forms.player.playing
+          ) {
+            // console.log('timeupdate play')
+            videoIntervalRef.resume()
+          }
+        })
 
-      // 开始播放
-      forms.player.on('play', () => {
-        console.log('play')
-        // 判断视频计时器是否暂停，如果暂停则恢复
-        videoIntervalRef.resume()
-      })
+        // 视屏播放时暂停
+        forms.player.on('ended', () => {
+          forms.player.pause()
+        })
 
-      // 暂停播放
-      forms.player.on('pause', () => {
-        console.log('pause', videoIntervalRef.isActive.value)
+        // 开始播放
+        forms.player.on('play', () => {
+          console.log('play')
+          // 判断视频计时器是否暂停，如果暂停则恢复
+          videoIntervalRef.resume()
+        })
 
-        videoIntervalRef.pause()
-      })
+        // 暂停播放
+        forms.player.on('pause', () => {
+          console.log('pause', videoIntervalRef.isActive.value)
 
-      forms.player.on('enterfullscreen', () => {
-        console.log('fullscreen')
-        const i = document.createElement('i')
-        i.id = 'fullscreen-back'
-        i.className = 'van-icon van-icon-arrow-left video-back'
-        i.addEventListener('click', () => {
-          forms.player.fullscreen.exit()
+          videoIntervalRef.pause()
         })
-        console.log(document.getElementsByClassName('plyr'))
-        document.getElementsByClassName('plyr')[0].appendChild(i)
-      })
 
-      forms.player.on('exitfullscreen', () => {
-        console.log('exitfullscreen')
-        const i = document.getElementById('fullscreen-back')
-        i && i.remove()
-      })
+        forms.player.on('fullscreenchange', () => {
+          if (forms.player.isFullscreen()) {
+            console.log('fullscreen')
+            const i = document.createElement('i')
+            i.id = 'fullscreen-back'
+            i.className = 'van-icon van-icon-arrow-left video-back'
+            i.addEventListener('click', () => {
+              forms.player.exitFullscreen()
+            })
+            document.getElementsByClassName('video-js')[0].appendChild(i)
+          } else {
+            console.log('exitfullscreen')
+            const i = document.getElementById('fullscreen-back')
+            i && i.remove()
+          }
+        })
+      }
       checkVideoDetails(0)
     }
 
@@ -262,22 +387,24 @@ export default defineComponent({
     watch(
       () => videoIntervalRef.isActive.value,
       (newVal: boolean) => {
+        console.log(videoIntervalRef.isActive.value, 'videoIntervalRef')
         initVideoCount(newVal)
       }
     )
 
     const initVideoCount = (newVal: any) => {
       // console.log(newVal, 'videoIntervalRef.isActive.value in')
-      // console.log('watch', forms.player.currentTime)
-      // console.log('保留两个小数：', forms.player.currentTime.toFixed(2))
-      // console.log('向下取整：', Math.floor(forms.player.currentTime))
-      // console.log('向上取整：', Math.ceil(forms.player.currentTime))
-      // console.log('四舍五入：', Math.round(forms.player.currentTime))
+      // console.log('watch', forms.player.currentTime())
+      // console.log('保留两个小数：', forms.player.currentTime().toFixed(2))
+      // console.log('向下取整：', Math.floor(forms.player.currentTime()))
+      // console.log('向上取整：', Math.ceil(forms.player.currentTime()))
+      // console.log('四舍五入：', Math.round(forms.player.currentTime()))
       if (newVal) {
-        tempTime[0] = Math.floor(forms.player.currentTime)
+        tempTime[0] = Math.floor(forms.player.currentTime())
       } else {
-        tempTime[1] = Math.floor(forms.player.currentTime)
+        tempTime[1] = Math.floor(forms.player.currentTime())
       }
+      console.log(tempTime, 'tempTime')
       // console.log(forms.player.speed, 'speed')
 
       if (tempTime.length >= 2) {
@@ -320,7 +447,7 @@ export default defineComponent({
             videoBrowseDataTime: time || 0, // 有效的视频观看时长
             videoBrowsePercentage: rate || 0, // 有效的视频观看时长百分比
             videoBrowseTime: videoIntervalRef?.counter.value, // 视频观看时长
-            videoBrowsePoint: Math.floor(forms.player.currentTime || 0) // 视频最后观看点 - 向下取整
+            videoBrowsePoint: Math.floor(forms.player.currentTime() || 0) // 视频最后观看点 - 向下取整
           }
         })
       } catch {
@@ -375,7 +502,7 @@ export default defineComponent({
         })
         forms.videoBrowsePoint = data.videoBrowsePoint || 0
         if (forms.player) {
-          forms.player.currentTime = data.videoBrowsePoint || 0
+          forms.player.currentTime(data.videoBrowsePoint || 0)
         }
         forms.introductionVideo = data.introductionVideo
         forms.introductionVideoTime = data.introductionVideoTime
@@ -482,10 +609,10 @@ export default defineComponent({
               <span
                 class={[item.id === forms.videoSelectId ? styles.active : '']}
                 onClick={() => {
-                  forms.player.currentTime = item.startNode
+                  forms.player.currentTime(item.startNode)
                   forms.player.play()
                   forms.videoBrowsePoint = item.startNode
-                  checkVideoDetails(forms.player.currentTime)
+                  checkVideoDetails(forms.player.currentTime())
                 }}
               >
                 {item.desc}

src/views/coursewarePlay/component/video-play.tsx

@@ -22,7 +22,7 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    isActive:{
+    isActive: {
       type: Boolean,
       default: false
     }
@@ -89,7 +89,7 @@ export default defineComponent({
                 <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>  
+                            <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>
@@ -118,11 +118,11 @@ export default defineComponent({
             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()
           }
@@ -154,11 +154,14 @@ export default defineComponent({
       changePlayBtn,
       toggleHideControl
     })
-    watch(() => props.isActive, (val) => {
-      if (!val) {
-        videoItem.value?.pause()
+    watch(
+      () => props.isActive,
+      (val) => {
+        if (!val) {
+          videoItem.value?.pause()
+        }
       }
-    })
+    )
     return () => (
       <div class={styles.videoWrap}>
         <video