添加视屏播放

package-lock.json

@@ -27,6 +27,7 @@
         "qrcode": "^1.5.1",
         "qrcode.vue": "^3.3.3",
         "query-string": "^7.1.1",
+        "tcplayer.js": "^4.8.0",
         "umi-request": "^1.4.0",
         "vant": "^3.4.6",
         "vconsole": "^3.14.6",
@@ -2972,6 +2973,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",
@@ -3034,6 +3056,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",
@@ -3239,6 +3266,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",
@@ -3766,6 +3809,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",
@@ -3936,6 +3984,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",
@@ -5184,6 +5240,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",
@@ -5524,6 +5589,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",
@@ -5808,6 +5878,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",
@@ -5881,6 +5956,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",
@@ -6107,6 +6187,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",
@@ -6769,6 +6854,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",
@@ -6824,6 +6919,14 @@
         "node": ">=6"
       }
     },
+    "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",
@@ -7098,7 +7201,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"
@@ -7502,6 +7604,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",
@@ -7778,6 +7885,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",
@@ -8337,6 +8452,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",
@@ -8354,6 +8477,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",
@@ -8524,6 +8655,19 @@
         "node": ">=6"
       }
     },
+    "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",
@@ -8715,6 +8859,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",
@@ -8797,6 +8983,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",
@@ -9080,6 +9272,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",
@@ -9684,6 +9897,25 @@
       "dev": true,
       "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",
@@ -11880,6 +12112,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",
@@ -11917,6 +12170,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",
@@ -12050,6 +12308,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",
@@ -12288,6 +12551,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",
@@ -12424,6 +12692,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",
@@ -12550,6 +12823,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",
@@ -13320,6 +13598,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",
@@ -13535,6 +13822,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",
@@ -13729,6 +14021,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",
@@ -13777,6 +14074,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",
@@ -13922,6 +14224,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",
@@ -14383,6 +14690,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",
@@ -14418,6 +14735,14 @@
       "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
       "dev": true
     },
+    "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",
@@ -14616,8 +14941,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",
@@ -14879,6 +15203,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",
@@ -15057,6 +15386,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",
@@ -15456,6 +15790,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",
@@ -15471,6 +15813,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",
@@ -15590,6 +15940,16 @@
       "resolved": "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz",
       "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
     },
+    "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",
@@ -15705,6 +16065,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",
@@ -15769,6 +16167,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",
@@ -15957,6 +16360,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",
@@ -16382,6 +16806,22 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "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

@@ -39,6 +39,7 @@
     "qrcode": "^1.5.1",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",
+    "tcplayer.js": "^4.8.0",
     "umi-request": "^1.4.0",
     "vant": "^3.4.6",
     "vconsole": "^3.14.6",

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

@@ -1,88 +1,99 @@
-.video-container {
-  position: relative;
-  width: 100%;
-  --plyr-color-main: #01c1b5;
-
-  video {
-    width: 100%;
-    // object-fit: cover;
-  }
-
-  :global {
-    .video-back {
-      position: absolute;
-      left: 20px;
-      top: 20px;
-      color: #fff;
-      z-index: 99;
-      font-size: 24px;
-      width: 30px;
-      height: 30px;
-      background-color: rgba(0, 0, 0, 0.5);
-      border-radius: 50%;
-      padding: 4px 5px 4px 3px;
-    }
-
-    .plyr__poster {
-      background-size: cover;
-    }
-
-    .plyr__control--overlaid {
-      border: 1px solid #fff;
-      background-color: transparent !important;
-    }
-    .plyr--video .plyr__control:hover {
-      background-color: transparent !important;
-    }
-  }
-
-  .video {
-    position: relative;
-  }
-}
-
-.loadingVideo {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.9);
-  z-index: 10;
-}
-
-.playOver {
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  .tips {
-    font-size: 15px;
-    color: #ffffff;
-  }
-
-  .btn {
-    margin: 10px 0;
-    min-width: 94px;
-    font-size: 14px;
-    height: 28px;
-    line-height: 28px;
-  }
-
-  .replay {
-    padding-top: 12px;
-  }
-}
-
-.freeTxt {
-  font-size: 15px;
-  color: #ffffff;
-  line-height: 21px;
-  padding-top: 10px;
-}
-.freeRate {
-  color: #32ffd8;
-}
+.video-container {
+  position: relative;
+  width: 100%;
+  --plyr-color-main: #01c1b5;
+
+  video {
+    width: 100%;
+    // object-fit: cover;
+  }
+
+  :global {
+    .video-back {
+      position: absolute;
+      left: 20px;
+      top: 20px;
+      color: #fff;
+      z-index: 99;
+      font-size: 24px;
+      width: 30px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      padding: 4px 5px 4px 3px;
+    }
+
+    .plyr__poster {
+      background-size: cover;
+    }
+
+    .plyr__control--overlaid {
+      border: 1px solid #fff;
+      background-color: transparent !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 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10;
+}
+
+.playOver {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .tips {
+    font-size: 15px;
+    color: #ffffff;
+  }
+
+  .btn {
+    margin: 10px 0;
+    min-width: 94px;
+    font-size: 14px;
+    height: 28px;
+    line-height: 28px;
+  }
+
+  .replay {
+    padding-top: 12px;
+  }
+}
+
+.freeTxt {
+  font-size: 15px;
+  color: #ffffff;
+  line-height: 21px;
+  padding-top: 10px;
+}
+
+.freeRate {
+  color: #32ffd8;
+}

src/components/col-video/index.tsx

@@ -1,381 +1,449 @@
-import { defineComponent, PropType } from 'vue'
-import styles from './index.module.less'
-import Plyr from 'plyr'
-import 'plyr/dist/plyr.css'
-import { Button, Icon, Loading, Toast } from 'vant'
-
-import iconVideoPlay from '@/common/images/icon_video_play.png'
-import { browser } from '@/helpers/utils'
-import { state } from '@/state'
-import { listenerMessage, postMessage } from '@/helpers/native-message'
-export default defineComponent({
-  name: 'col-video',
-  props: {
-    trySee: {
-      // 是否试看
-      type: Boolean,
-      default: false
-    },
-    freeTitleStatus: {
-      type: Boolean,
-      default: true
-    },
-    // 试看比例
-    freeRate: {
-      type: Number,
-      default: 100
-    },
-    setting: {
-      type: Object,
-      default: () => {}
-    },
-    controls: Boolean,
-    height: String,
-    src: {
-      type: String,
-      default: ''
-    },
-    poster: {
-      type: String,
-      default: ''
-    },
-    styleValue: {
-      type: Object,
-      default: () => ({})
-    },
-    preload: {
-      type: String as PropType<'auto' | 'metadata' | 'none'>,
-      default: 'auto'
-    },
-    currentTime: {
-      type: Boolean,
-      default: true
-    },
-    playsinline: {
-      type: Boolean,
-      default: true
-    },
-    onPlay: {
-      type: Function,
-      default: () => {}
-    },
-    isBuy: {
-      // 是否把购买方法在外部调用
-      type: Boolean,
-      default: false
-    },
-    onBuyEmit: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      player: null as any,
-      // playTime: 0,
-      loading: true, // 首次进入加载中
-      trySeeOver: false, // 试看是否结束
-      showSeeStatus: true // 是否显示试看状态
-    }
-  },
-  mounted() {
-    this._init()
-
-    listenerMessage('setVideoPlayer', result => {
-      const content = result?.content
-      if (content.status === 'pause') {
-        this.player.pause()
-      }
-    })
-  },
-  beforeUnmount() {
-    postMessage({
-      api: 'limitScreenRecord',
-      content: {
-        type: 0
-      }
-    })
-  },
-  computed: {
-    computedSeeStatus() {
-      // console.log(
-      //   this.showSeeStatus,
-      //   this.trySee,
-      //   this.trySeeOver,
-      //   'this.showSeeStatus, this.trySee'
-      // )
-      return this.showSeeStatus && this.trySee
-    },
-    playTime() {
-      // 允许播放时间
-      const player = this.player
-      const playTime = (player.duration * this.freeRate) / 100
-      return playTime || 0
-    }
-  },
-  methods: {
-    _init() {
-      // controls: [
-      //   'play-large' ,  // 中间的大播放按钮
-      //   'restart' ,  // 重新开始播放
-      //   'rewind' ,  // 按寻道时间倒带（默认 10 秒）
-      //   'play' ,  // 播放/暂停播放
-      //   'fast-forward' ,  // 快进查找时间（默认 10 秒）
-      //   'progress' ,  // 播放和缓冲的进度条和滑动条
-      //   'current-time' ,  // 播放的当前时间
-      //   ' duration' ,  // 媒体的完整持续时间
-      //   'mute' ,  // 切换静音
-      //   'volume', // 音量控制
-      //   'captions' ,  // 切换字幕
-      //   'settings' ,  // 设置菜单
-      //   'pip' ,  // 画中画（当前仅 Safari）
-      //   'airplay' ,  // Airplay（当前仅 Safari）
-      //   '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
-      }
-
-      if (browser().iPhone) {
-        params.fullscreen = {
-          enabled: true,
-          fallback: 'force',
-          iosNative: true
-        }
-      }
-
-      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
-        if (this.trySee) {
-          this.domPlayVisibility()
-        } else {
-          this.domPlayVisibility(false)
-        }
-
-        // 监听播放事件
-        const _this = this
-        this.player.on('timeupdate', () => {
-          const players = _this.player
-          if (players.currentTime >= this.playTime && _this.trySee) {
-            players.pause()
-            _this.trySeeOver = true
-            _this.showSeeStatus = true
-            _this.domPlayVisibility() // 试看结束后隐藏播放按钮
-          }
-        })
-      })
-
-      this.player.on('play', () => {
-        postMessage(
-          {
-            api: 'getDeviceStatus',
-            content: {
-              type: 'video'
-            }
-          },
-          (res: any) => {
-            // 判断是否在录屏中, 如果在录屏则不允许播放
-            if (res.content.status == '1') {
-              Toast('为了保证数据安全，请不要录屏')
-              this.player.pause()
-            }
-          }
-        )
-        postMessage({
-          api: 'limitScreenRecord',
-          content: {
-            type: 1
-          }
-        })
-
-        this.onPlay && this.onPlay()
-      })
-
-      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()
-        })
-        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()
-      })
-    },
-    // 操作功能
-    domPlayVisibility(hide = true) {
-      const controls = document.querySelector('.plyr__controls')
-      const controls2 = document.querySelector('.plyr__control--overlaid')
-      if (hide) {
-        controls?.setAttribute('style', 'display:none')
-        controls2?.setAttribute('style', 'display:none')
-      } else {
-        controls?.removeAttribute('style')
-        setTimeout(() => {
-          controls2?.removeAttribute('style')
-        }, 200)
-      }
-    },
-    onClickPlay() {
-      this.player.play()
-      this.domPlayVisibility(false)
-      this.showSeeStatus = false
-    },
-    onBuy() {
-      if (this.isBuy) {
-        this.onBuyEmit()
-        return
-      }
-      this.$router.back()
-    },
-    onReplay() {
-      this.player.restart()
-      this.player.play()
-      this.domPlayVisibility(false)
-      this.trySeeOver = false
-      this.showSeeStatus = false
-    }
-  },
-  unmounted() {
-    this.player?.destroy()
-  },
-  render() {
-    return (
-      <div class={styles['video-container']}>
-        {/* <div ref="video" class={styles['video']} style={{ ...this.styleValue }}> */}
-        {/* <Icon
-          name="arrow-left"
-          class={styles.videoBack}
-          size="20"
-          color="#fff"
-        /> */}
-        <video
-          ref="video"
-          class={styles['video']}
-          src={this.src}
-          playsinline={this.playsinline}
-          poster={this.poster}
-          preload={this.preload}
-          style={{ ...this.styleValue }}
-        ></video>
-        {/* </div> */}
-        {/* 加载视频使用 */}
-        {this.loading && (
-          <div
-            class={styles.loadingVideo}
-            style={{
-              height: this.height || '210px'
-            }}
-          >
-            <Loading
-              size={36}
-              color="#2dc7aa"
-              vertical
-              style={{ height: '100%', justifyContent: 'center' }}
-            >
-              加载中...
-            </Loading>
-          </div>
-        )}
-        {/* 试看结束 */}
-        {this.trySee && this.computedSeeStatus && !this.loading && (
-          <div
-            class={[styles.loadingVideo, styles.playOver]}
-            style={{
-              height: this.height || '210px'
-            }}
-          >
-            {!this.trySeeOver ? (
-              <>
-                <Icon
-                  name={iconVideoPlay}
-                  size={50}
-                  onClick={this.onClickPlay}
-                />
-                <p class={styles.freeTxt}>
-                  免费试看
-                  {/* {this.freeTitleStatus ? '试看' : '领取'} */}
-                </p>
-                {/* <p class={styles.freeRate}>每课时可试看{this.freeRate}%</p> */}
-              </>
-            ) : (
-              <>
-                {state.platformType === 'STUDENT' ? (
-                  <p class={styles.tips}>
-                    {this.freeTitleStatus
-                      ? '免费试看结束，购买完整课程后继续学习'
-                      : '试看结束，领取课程后继续学习'}
-                  </p>
-                ) : (
-                  <p class={styles.tips}>
-                    若需完整观看，请下载酷乐秀领取或购买
-                  </p>
-                )}
-                {state.platformType === 'STUDENT' && (
-                  <Button
-                    class={styles.btn}
-                    type="primary"
-                    round
-                    size="small"
-                    onClick={this.onBuy}
-                  >
-                    {state.platformType === 'STUDENT'
-                      ? this.freeTitleStatus
-                        ? '立即购买'
-                        : '免费领取'
-                      : '返回免费'}
-                  </Button>
-                )}
-                <div
-                  class={state.platformType !== 'STUDENT' && styles.replay}
-                  onClick={this.onReplay}
-                >
-                  <Icon
-                    name="replay"
-                    style={{ marginRight: '5px' }}
-                    size={16}
-                  />
-                  重播
-                </div>
-              </>
-            )}
-          </div>
-        )}
-      </div>
-    )
-  }
-})
+import { defineComponent, PropType } from 'vue'
+import styles from './index.module.less'
+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'
+import { state } from '@/state'
+import { listenerMessage, postMessage } from '@/helpers/native-message'
+export default defineComponent({
+  name: 'col-video',
+  props: {
+    trySee: {
+      // 是否试看
+      type: Boolean,
+      default: false
+    },
+    freeTitleStatus: {
+      type: Boolean,
+      default: true
+    },
+    // 试看比例
+    freeRate: {
+      type: Number,
+      default: 100
+    },
+    setting: {
+      type: Object,
+      default: () => {}
+    },
+    controls: Boolean,
+    height: String,
+    src: {
+      type: String,
+      default: ''
+    },
+    poster: {
+      type: String,
+      default: ''
+    },
+    styleValue: {
+      type: Object,
+      default: () => ({})
+    },
+    preload: {
+      type: String as PropType<'auto' | 'metadata' | 'none'>,
+      default: 'auto'
+    },
+    currentTime: {
+      type: Boolean,
+      default: true
+    },
+    playsinline: {
+      type: Boolean,
+      default: true
+    },
+    onPlay: {
+      type: Function,
+      default: () => {}
+    },
+    isBuy: {
+      // 是否把购买方法在外部调用
+      type: Boolean,
+      default: false
+    },
+    onBuyEmit: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
+      player: null as any,
+      // playTime: 0,
+      loading: true, // 首次进入加载中
+      trySeeOver: false, // 试看是否结束
+      showSeeStatus: true // 是否显示试看状态
+    }
+  },
+  mounted() {
+    this._init()
+
+    listenerMessage('setVideoPlayer', result => {
+      const content = result?.content
+      if (content.status === 'pause') {
+        this.player.pause()
+      }
+    })
+  },
+  beforeUnmount() {
+    postMessage({
+      api: 'limitScreenRecord',
+      content: {
+        type: 0
+      }
+    })
+  },
+  computed: {
+    computedSeeStatus() {
+      // console.log(
+      //   this.showSeeStatus,
+      //   this.trySee,
+      //   this.trySeeOver,
+      //   'this.showSeeStatus, this.trySee'
+      // )
+      return this.showSeeStatus && this.trySee
+    },
+    playTime() {
+      // 允许播放时间
+      const player = this.player
+      const playTime = (player.duration() * this.freeRate) / 100
+      return playTime || 0
+    }
+  },
+  methods: {
+    _init() {
+      // const controls = [
+      //   'play-large',
+      //   'play',
+      //   'progress',
+      //   'captions',
+      //   'fullscreen'
+      // ]
+      // if (this.currentTime) {
+      //   controls.push('current-time')
+      // }
+      // const params: any = {
+      //   controls: controls,
+      //   ...this.setting,
+      //   invertTime: false
+      // }
+      // if (browser().iPhone) {
+      //   params.fullscreen = {
+      //     enabled: true,
+      //     fallback: 'force',
+      //     iosNative: true
+      //   }
+      // }
+      // this.player = new Plyr((this as any).$refs.video, params)
+      // 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
+      //   if (this.trySee) {
+      //     this.domPlayVisibility()
+      //   } else {
+      //     this.domPlayVisibility(false)
+      //   }
+      //   // 监听播放事件
+      //   const _this = this
+      //   this.player.on('timeupdate', () => {
+      //     const players = _this.player
+      //     if (players.currentTime >= this.playTime && _this.trySee) {
+      //       players.pause()
+      //       _this.trySeeOver = true
+      //       _this.showSeeStatus = true
+      //       _this.domPlayVisibility() // 试看结束后隐藏播放按钮
+      //     }
+      //   })
+      // })
+      // this.player.on('play', () => {
+      //   postMessage(
+      //     {
+      //       api: 'getDeviceStatus',
+      //       content: {
+      //         type: 'video'
+      //       }
+      //     },
+      //     (res: any) => {
+      //       // 判断是否在录屏中, 如果在录屏则不允许播放
+      //       if (res.content.status == '1') {
+      //         Toast('为了保证数据安全，请不要录屏')
+      //         this.player.pause()
+      //       }
+      //     }
+      //   )
+      //   postMessage({
+      //     api: 'limitScreenRecord',
+      //     content: {
+      //       type: 1
+      //     }
+      //   })
+      //   this.onPlay && this.onPlay()
+      // })
+      // 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()
+      //   })
+      //   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()
+      // })
+
+      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
+      }
+      this.player = TCPlayer(this.videoID, {
+        appID: '',
+        controls: true
+      }) // player-container-id 为播放器容器 ID，必须与 html 中一致
+      if (this.player) {
+        this.player.src(this.src) // url 播放地址
+        this.player.poster(this.poster || '')
+
+        if (this.preload === 'none') {
+          this.loading = false
+        }
+        this.player.on('loadstart', () => {
+          this.loading = false
+          if (this.trySee) {
+            this.domPlayVisibility()
+          } else {
+            this.domPlayVisibility(false)
+          }
+          // 监听播放事件
+          this.player.on('timeupdate', () => {
+            const players = this.player
+            if (players.currentTime() >= this.playTime && this.trySee) {
+              players.pause()
+              this.trySeeOver = true
+              this.showSeeStatus = true
+              this.domPlayVisibility() // 试看结束后隐藏播放按钮
+            }
+          })
+        })
+        this.player.on('play', () => {
+          postMessage(
+            {
+              api: 'getDeviceStatus',
+              content: {
+                type: 'video'
+              }
+            },
+            (res: any) => {
+              // 判断是否在录屏中, 如果在录屏则不允许播放
+              if (res.content.status == '1') {
+                Toast('为了保证数据安全，请不要录屏')
+                this.player.pause()
+              }
+            }
+          )
+          postMessage({
+            api: 'limitScreenRecord',
+            content: {
+              type: 1
+            }
+          })
+          this.onPlay && this.onPlay()
+        })
+
+        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('.vjs-big-play-button')
+      const controls2 = document.querySelector('.vjs-control-bar')
+      if (hide) {
+        controls?.setAttribute('style', 'display:none')
+        controls2?.setAttribute('style', 'display:none')
+      } else {
+        controls?.removeAttribute('style')
+        setTimeout(() => {
+          controls2?.removeAttribute('style')
+        }, 200)
+      }
+    },
+    onClickPlay() {
+      this.player.play()
+      this.domPlayVisibility(false)
+      this.showSeeStatus = false
+    },
+    onBuy() {
+      if (this.isBuy) {
+        this.onBuyEmit()
+        return
+      }
+      this.$router.back()
+    },
+    onReplay() {
+      this.player.currentTime(0)
+      this.player.play()
+      this.domPlayVisibility(false)
+      this.trySeeOver = false
+      this.showSeeStatus = false
+    }
+  },
+  unmounted() {
+    this.player?.pause()
+    this.player?.src('')
+    this.player?.dispose()
+  },
+  render() {
+    return (
+      <div
+        class={[styles['video-container'], 'colVideo']}
+        style={{
+          height: this.height || '210px'
+        }}
+      >
+        {/* <div ref="video" class={styles['video']} style={{ ...this.styleValue }}> */}
+        {/* <Icon
+          name="arrow-left"
+          class={styles.videoBack}
+          size="20"
+          color="#fff"
+        /> */}
+        <video
+          ref="video"
+          class={styles['video']}
+          src={this.src}
+          id={this.videoID}
+          playsinline={this.playsinline}
+          poster={this.poster}
+          preload={this.preload}
+          style={{ ...this.styleValue }}
+        ></video>
+        {/* </div> */}
+        {/* 加载视频使用 */}
+        {this.loading && (
+          <div
+            class={styles.loadingVideo}
+            style={{
+              height: this.height || '210px'
+            }}
+          >
+            <Loading
+              size={36}
+              color="#2dc7aa"
+              vertical
+              style={{ height: '100%', justifyContent: 'center' }}
+            >
+              加载中...
+            </Loading>
+          </div>
+        )}
+        {/* 试看结束 */}
+        {this.trySee && this.computedSeeStatus && !this.loading && (
+          <div
+            class={[styles.loadingVideo, styles.playOver]}
+            style={{
+              height: this.height || '210px'
+            }}
+          >
+            {!this.trySeeOver ? (
+              <>
+                <Icon
+                  name={iconVideoPlay}
+                  size={50}
+                  onClick={this.onClickPlay}
+                />
+                <p class={styles.freeTxt}>
+                  免费试看
+                  {/* {this.freeTitleStatus ? '试看' : '领取'} */}
+                </p>
+                {/* <p class={styles.freeRate}>每课时可试看{this.freeRate}%</p> */}
+              </>
+            ) : (
+              <>
+                {state.platformType === 'STUDENT' ? (
+                  <p class={styles.tips}>
+                    {this.freeTitleStatus
+                      ? '免费试看结束，购买完整课程后继续学习'
+                      : '试看结束，领取课程后继续学习'}
+                  </p>
+                ) : (
+                  <p class={styles.tips}>
+                    若需完整观看，请下载酷乐秀领取或购买
+                  </p>
+                )}
+                {state.platformType === 'STUDENT' && (
+                  <Button
+                    class={styles.btn}
+                    type="primary"
+                    round
+                    size="small"
+                    onClick={this.onBuy}
+                  >
+                    {state.platformType === 'STUDENT'
+                      ? this.freeTitleStatus
+                        ? '立即购买'
+                        : '免费领取'
+                      : '返回免费'}
+                  </Button>
+                )}
+                <div
+                  class={state.platformType !== 'STUDENT' && styles.replay}
+                  onClick={this.onReplay}
+                >
+                  <Icon
+                    name="replay"
+                    style={{ marginRight: '5px' }}
+                    size={16}
+                  />
+                  重播
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    )
+  }
+})

src/student/teacher-dependent/components/single.module.less

@@ -1,102 +1,118 @@
-.single {
-  margin-bottom: 20px;
-}
-.introduction {
-  font-size: 13px;
-  color: #666666;
-  line-height: 1.6;
-  padding-bottom: 15px;
-}
-
-.videoList {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-.itemBg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 89;
-}
-.videoItem {
-  width: 157px;
-  height: 106px;
-  background: #d8d8d8;
-  border-radius: 10px;
-  overflow: hidden;
-  position: relative;
-  margin-bottom: 10px;
-  .icon-upload {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #fff;
-    z-index: 9;
-  }
-
-  .video {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    min-height: 100%;
-    background-color: #ccc;
-  }
-
-  :global {
-    .van-image {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-  }
-}
-
-.fansGroup {
-  padding: 0 0 25px !important;
-  &:last-child {
-    padding-bottom: 12px !important;
-  }
-  :global {
-    .van-cell__title,
-    .van-cell__value {
-      flex: 1 auto;
-    }
-  }
-
-  p {
-    font-size: 14px;
-    color: #999999;
-    line-height: 20px;
-    width: 160px;
-  }
-}
-
-.fansImage {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.fansTitle {
-  padding-left: 12px;
-  font-size: 16px;
-  color: #1a1a1a;
-  line-height: 22px;
-  .title {
-    max-width: 160px;
-  }
-}
-
-.videoGroup {
-  width: 90%;
-  line-height: 0;
-}
+.single {
+  margin-bottom: 20px;
+}
+
+.introduction {
+  font-size: 13px;
+  color: #666666;
+  line-height: 1.6;
+  padding-bottom: 15px;
+}
+
+.videoList {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.itemBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 89;
+}
+
+.videoItem {
+  width: 157px;
+  height: 106px;
+  background: #d8d8d8;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 10px;
+
+  .icon-upload {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    z-index: 9;
+  }
+
+  .video {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    min-height: 100%;
+    background-color: #ccc;
+  }
+
+  :global {
+    .van-image {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+.fansGroup {
+  padding: 0 0 25px !important;
+
+  &:last-child {
+    padding-bottom: 12px !important;
+  }
+
+  :global {
+
+    .van-cell__title,
+    .van-cell__value {
+      flex: 1 auto;
+    }
+  }
+
+  p {
+    font-size: 14px;
+    color: #999999;
+    line-height: 20px;
+    width: 160px;
+  }
+}
+
+.fansImage {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.fansTitle {
+  padding-left: 12px;
+  font-size: 16px;
+  color: #1a1a1a;
+  line-height: 22px;
+
+  .title {
+    max-width: 160px;
+  }
+}
+
+.videoGroup {
+  width: 90%;
+  line-height: 0;
+  overflow: inherit;
+
+  :global {
+    .colVideo {
+      border-radius: var(--van-popup-round-border-radius);
+      overflow: hidden;
+    }
+  }
+}

src/student/teacher-dependent/components/single.tsx

@@ -1,228 +1,228 @@
-import SectionDetail from '@/business-components/section-detail'
-import ColVideo from '@/components/col-video'
-import request from '@/helpers/request'
-import { Button, Cell, Icon, Image, Popup } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './single.module.less'
-import { postMessage } from '@/helpers/native-message'
-import JoinChat from '../model/join-chat'
-
-import iconUploadPoster from '@common/images/icon_upload_poster.png'
-import { browser } from '@/helpers/utils'
-
-export const getAssetsHomeFile = (fileName: string) => {
-  const path = `../images/${fileName}`
-  const modules = import.meta.globEager('../images/*')
-  return modules[path].default
-}
-
-export default defineComponent({
-  name: 'single',
-  props: {
-    userInfo: {
-      type: Object,
-      default: {}
-    }
-  },
-  data() {
-    const query = this.$route.query
-    return {
-      videoStatus: false,
-      chatStatus: false,
-      teacherId: query.teacherId,
-      fansList: [],
-      chatItem: {},
-      videoItem: {} as any,
-      isAddBrowse: false
-    }
-  },
-  async mounted() {
-    try {
-      const res = await request.post('/api-student/imGroup/queryTeacherGroup', {
-        data: {
-          type: 'FAN',
-          createUserId: this.teacherId
-        }
-      })
-      this.fansList = res.data || []
-    } catch {}
-  },
-  methods: {
-    async onDetail(item: any) {
-      // 申请入群
-      if (!item.hasWaitAuditFlag && !item.existFlag) {
-        this.chatStatus = true
-        this.chatItem = item
-        return
-      }
-
-      // 进入群聊天
-      if (item.existFlag) {
-        postMessage({
-          api: 'joinChatGroup',
-          content: {
-            type: 'multi', // single 单人 multi 多人
-            id: item.id
-          }
-        })
-      }
-    },
-    async onPlay() {
-      try {
-        if (!this.isAddBrowse) {
-          return
-        }
-        await request.get('/api-student/teacher/addVideoBrowse', {
-          hideLoading: true,
-          params: {
-            videoId: this.videoItem.id
-          }
-        })
-        this.isAddBrowse = false
-      } catch {}
-    }
-  },
-  render() {
-    const userInfo = this.userInfo
-    return (
-      <div class={styles.single}>
-        {userInfo.introduction && (
-          <SectionDetail
-            icon="personal"
-            title="个人介绍"
-            size={24}
-            border={false}
-          >
-            <p class={styles.introduction}>{userInfo.introduction}</p>
-          </SectionDetail>
-        )}
-
-        {userInfo.styleVideo && userInfo.styleVideo.length > 0 && (
-          <SectionDetail
-            icon="elegant"
-            title="老师风采"
-            size={24}
-            border={false}
-          >
-            <div class={styles.videoList}>
-              {userInfo.styleVideo.map((item: any) => (
-                <div class={styles.videoItem}>
-                  <div
-                    class={styles.itemBg}
-                    onClick={() => {
-                      this.videoStatus = true
-                      this.isAddBrowse = true
-                      this.videoItem = item
-                    }}
-                  ></div>
-                  <Icon
-                    class={styles['icon-upload']}
-                    name={getAssetsHomeFile('icon_video.png')}
-                    size={26}
-                  />
-                  {/* <video width="100%" class={styles.video}>
-                    <source src={item.videoUrl} type="video/mp4" />
-                  </video> */}
-                  <Image src={item.cover || iconUploadPoster} fit="cover" />
-                </div>
-              ))}
-            </div>
-          </SectionDetail>
-        )}
-
-        {this.fansList && this.fansList.length > 0 && (
-          <SectionDetail icon="fans" title="粉丝群" size={24} border={false}>
-            {this.fansList.map((item: any) => (
-              <Cell
-                center
-                class={styles.fansGroup}
-                border={false}
-                v-slots={{
-                  icon: () => (
-                    <Image
-                      src={item.img || getAssetsHomeFile('icon_fans.png')}
-                      fit="cover"
-                      class={styles.fansImage}
-                    />
-                  ),
-                  title: () => (
-                    <div class={styles.fansTitle}>
-                      <div class={[styles.title, 'van-ellipsis']}>
-                        {item.name}
-                      </div>
-                      <p class="van-ellipsis">{item.introduce}</p>
-                    </div>
-                  ),
-                  default: () => (
-                    <Button
-                      type="primary"
-                      size="small"
-                      round
-                      disabled={item.hasWaitAuditFlag}
-                      onClick={() => this.onDetail(item)}
-                    >
-                      {item.existFlag ? '去聊天' : ''}
-                      {item.hasWaitAuditFlag ? '审核中' : ''}
-                      {!item.hasWaitAuditFlag && !item.existFlag
-                        ? '申请入群'
-                        : ''}
-                    </Button>
-                  )
-                }}
-              />
-            ))}
-          </SectionDetail>
-        )}
-
-        <Popup
-          show={this.chatStatus}
-          position="bottom"
-          round
-          closeable
-          safe-area-inset-bottom
-          onClose={() => (this.chatStatus = false)}
-        >
-          <JoinChat
-            item={this.chatItem}
-            onClose={(id: number) => {
-              this.fansList.forEach((item: any) => {
-                item.id === id && (item.hasWaitAuditFlag = true)
-              })
-              this.chatStatus = false
-            }}
-          />
-        </Popup>
-
-        <Popup
-          show={this.videoStatus}
-          round
-          class={styles.videoGroup}
-          closeable
-          onClose={() => {
-            this.videoStatus = false
-            this.isAddBrowse = false
-          }}
-        >
-          {this.videoStatus && (
-            <ColVideo
-              playsinline
-              onPlay={this.onPlay}
-              src={this.videoItem?.videoUrl + '#t=0.1'}
-            />
-          )}
-
-          {/* <video
-            style={{ height: '210px', width: '100%' }}
-            controls
-            class={styles.video}
-          >
-            <source
-              src={this.videoItem?.videoUrl + '#t=1,4'}
-              type="video/mp4"
-            />
-          </video> */}
-        </Popup>
-      </div>
-    )
-  }
-})
+import SectionDetail from '@/business-components/section-detail'
+import ColVideo from '@/components/col-video'
+import request from '@/helpers/request'
+import { Button, Cell, Icon, Image, Popup } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './single.module.less'
+import { postMessage } from '@/helpers/native-message'
+import JoinChat from '../model/join-chat'
+
+import iconUploadPoster from '@common/images/icon_upload_poster.png'
+import { browser } from '@/helpers/utils'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'single',
+  props: {
+    userInfo: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    const query = this.$route.query
+    return {
+      videoStatus: false,
+      chatStatus: false,
+      teacherId: query.teacherId,
+      fansList: [],
+      chatItem: {},
+      videoItem: {} as any,
+      isAddBrowse: false
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.post('/api-student/imGroup/queryTeacherGroup', {
+        data: {
+          type: 'FAN',
+          createUserId: this.teacherId
+        }
+      })
+      this.fansList = res.data || []
+    } catch {}
+  },
+  methods: {
+    async onDetail(item: any) {
+      // 申请入群
+      if (!item.hasWaitAuditFlag && !item.existFlag) {
+        this.chatStatus = true
+        this.chatItem = item
+        return
+      }
+
+      // 进入群聊天
+      if (item.existFlag) {
+        postMessage({
+          api: 'joinChatGroup',
+          content: {
+            type: 'multi', // single 单人 multi 多人
+            id: item.id
+          }
+        })
+      }
+    },
+    async onPlay() {
+      try {
+        if (!this.isAddBrowse) {
+          return
+        }
+        await request.get('/api-student/teacher/addVideoBrowse', {
+          hideLoading: true,
+          params: {
+            videoId: this.videoItem.id
+          }
+        })
+        this.isAddBrowse = false
+      } catch {}
+    }
+  },
+  render() {
+    const userInfo = this.userInfo
+    return (
+      <div class={styles.single}>
+        {userInfo.introduction && (
+          <SectionDetail
+            icon="personal"
+            title="个人介绍"
+            size={24}
+            border={false}
+          >
+            <p class={styles.introduction}>{userInfo.introduction}</p>
+          </SectionDetail>
+        )}
+
+        {userInfo.styleVideo && userInfo.styleVideo.length > 0 && (
+          <SectionDetail
+            icon="elegant"
+            title="老师风采"
+            size={24}
+            border={false}
+          >
+            <div class={styles.videoList}>
+              {userInfo.styleVideo.map((item: any) => (
+                <div class={styles.videoItem}>
+                  <div
+                    class={styles.itemBg}
+                    onClick={() => {
+                      this.videoStatus = true
+                      this.isAddBrowse = true
+                      this.videoItem = item
+                    }}
+                  ></div>
+                  <Icon
+                    class={styles['icon-upload']}
+                    name={getAssetsHomeFile('icon_video.png')}
+                    size={26}
+                  />
+                  {/* <video width="100%" class={styles.video}>
+                    <source src={item.videoUrl} type="video/mp4" />
+                  </video> */}
+                  <Image src={item.cover || iconUploadPoster} fit="cover" />
+                </div>
+              ))}
+            </div>
+          </SectionDetail>
+        )}
+
+        {this.fansList && this.fansList.length > 0 && (
+          <SectionDetail icon="fans" title="粉丝群" size={24} border={false}>
+            {this.fansList.map((item: any) => (
+              <Cell
+                center
+                class={styles.fansGroup}
+                border={false}
+                v-slots={{
+                  icon: () => (
+                    <Image
+                      src={item.img || getAssetsHomeFile('icon_fans.png')}
+                      fit="cover"
+                      class={styles.fansImage}
+                    />
+                  ),
+                  title: () => (
+                    <div class={styles.fansTitle}>
+                      <div class={[styles.title, 'van-ellipsis']}>
+                        {item.name}
+                      </div>
+                      <p class="van-ellipsis">{item.introduce}</p>
+                    </div>
+                  ),
+                  default: () => (
+                    <Button
+                      type="primary"
+                      size="small"
+                      round
+                      disabled={item.hasWaitAuditFlag}
+                      onClick={() => this.onDetail(item)}
+                    >
+                      {item.existFlag ? '去聊天' : ''}
+                      {item.hasWaitAuditFlag ? '审核中' : ''}
+                      {!item.hasWaitAuditFlag && !item.existFlag
+                        ? '申请入群'
+                        : ''}
+                    </Button>
+                  )
+                }}
+              />
+            ))}
+          </SectionDetail>
+        )}
+
+        <Popup
+          show={this.chatStatus}
+          position="bottom"
+          round
+          closeable
+          safe-area-inset-bottom
+          onClose={() => (this.chatStatus = false)}
+        >
+          <JoinChat
+            item={this.chatItem}
+            onClose={(id: number) => {
+              this.fansList.forEach((item: any) => {
+                item.id === id && (item.hasWaitAuditFlag = true)
+              })
+              this.chatStatus = false
+            }}
+          />
+        </Popup>
+
+        <Popup
+          show={this.videoStatus}
+          round
+          class={styles.videoGroup}
+          closeable
+          onClose={() => {
+            this.videoStatus = false
+            this.isAddBrowse = false
+          }}
+        >
+          {this.videoStatus && (
+            <ColVideo
+              playsinline
+              onPlay={this.onPlay}
+              src={this.videoItem?.videoUrl}
+            />
+          )}
+
+          {/* <video
+            style={{ height: '210px', width: '100%' }}
+            controls
+            class={styles.video}
+          >
+            <source
+              src={this.videoItem?.videoUrl + '#t=1,4'}
+              type="video/mp4"
+            />
+          </video> */}
+        </Popup>
+      </div>
+    )
+  }
+})

src/teacher/teacher-dependent/components/single.module.less

@@ -1,102 +1,118 @@
-.single {
-  margin-bottom: 20px;
-}
-.introduction {
-  font-size: 13px;
-  color: #666666;
-  line-height: 1.6;
-  padding-bottom: 15px;
-}
-
-.videoList {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-.itemBg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 89;
-}
-.videoItem {
-  width: 157px;
-  height: 106px;
-  background: #d8d8d8;
-  border-radius: 10px;
-  overflow: hidden;
-  position: relative;
-  margin-bottom: 10px;
-  .icon-upload {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: #fff;
-    z-index: 9;
-  }
-
-  .video {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    min-height: 100%;
-    background-color: #ccc;
-  }
-
-  :global {
-    .van-image {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-  }
-}
-
-.fansGroup {
-  padding: 0 0 25px !important;
-  &:last-child {
-    padding-bottom: 12px !important;
-  }
-  :global {
-    .van-cell__title,
-    .van-cell__value {
-      flex: 1 auto;
-    }
-  }
-
-  p {
-    font-size: 14px;
-    color: #999999;
-    line-height: 20px;
-    width: 160px;
-  }
-}
-
-.fansImage {
-  width: 42px;
-  height: 42px;
-  border-radius: 50%;
-  overflow: hidden;
-}
-
-.fansTitle {
-  padding-left: 12px;
-  font-size: 16px;
-  color: #1a1a1a;
-  line-height: 22px;
-  .title {
-    max-width: 160px;
-  }
-}
-
-.videoGroup {
-  width: 90%;
-  line-height: 0;
-}
+.single {
+  margin-bottom: 20px;
+}
+
+.introduction {
+  font-size: 13px;
+  color: #666666;
+  line-height: 1.6;
+  padding-bottom: 15px;
+}
+
+.videoList {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.itemBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 89;
+}
+
+.videoItem {
+  width: 157px;
+  height: 106px;
+  background: #d8d8d8;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+  margin-bottom: 10px;
+
+  .icon-upload {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    z-index: 9;
+  }
+
+  .video {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    min-height: 100%;
+    background-color: #ccc;
+  }
+
+  :global {
+    .van-image {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+.fansGroup {
+  padding: 0 0 25px !important;
+
+  &:last-child {
+    padding-bottom: 12px !important;
+  }
+
+  :global {
+
+    .van-cell__title,
+    .van-cell__value {
+      flex: 1 auto;
+    }
+  }
+
+  p {
+    font-size: 14px;
+    color: #999999;
+    line-height: 20px;
+    width: 160px;
+  }
+}
+
+.fansImage {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.fansTitle {
+  padding-left: 12px;
+  font-size: 16px;
+  color: #1a1a1a;
+  line-height: 22px;
+
+  .title {
+    max-width: 160px;
+  }
+}
+
+.videoGroup {
+  width: 90%;
+  line-height: 0;
+  overflow: inherit;
+
+  :global {
+    .colVideo {
+      border-radius: var(--van-popup-round-border-radius);
+      overflow: hidden;
+    }
+  }
+}

src/teacher/teacher-dependent/components/single.tsx

@@ -1,144 +1,144 @@
-import SectionDetail from '@/business-components/section-detail'
-import ColVideo from '@/components/col-video'
-import request from '@/helpers/request'
-import { Button, Cell, Icon, Image, Popup } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './single.module.less'
-import { postMessage } from '@/helpers/native-message'
-
-import iconUploadPoster from '@common/images/icon_upload_poster.png'
-import { browser } from '@/helpers/utils'
-
-export const getAssetsHomeFile = (fileName: string) => {
-  const path = `../images/${fileName}`
-  const modules = import.meta.globEager('../images/*')
-  return modules[path].default
-}
-
-export default defineComponent({
-  name: 'single',
-  props: {
-    userInfo: {
-      type: Object,
-      default: {}
-    }
-  },
-  data() {
-    const query = this.$route.query
-    return {
-      videoStatus: false,
-      chatStatus: false,
-      teacherId: query.teacherId,
-      fansList: [],
-      chatItem: {},
-      videoItem: {} as any,
-      isAddBrowse: false
-    }
-  },
-  async mounted() {
-    try {
-      const res = await request.post('/api-student/imGroup/queryTeacherGroup', {
-        data: {
-          type: 'FAN',
-          createUserId: this.teacherId
-        }
-      })
-      this.fansList = res.data || []
-    } catch {}
-  },
-  methods: {
-    async onPlay() {
-      try {
-        if (!this.isAddBrowse) {
-          return
-        }
-        await request.get('/api-student/teacher/addVideoBrowse', {
-          hideLoading: true,
-          params: {
-            videoId: this.videoItem.id
-          }
-        })
-        this.isAddBrowse = false
-      } catch {}
-    }
-  },
-  render() {
-    const userInfo = this.userInfo
-    return (
-      <div class={styles.single}>
-        {userInfo.introduction && (
-          <SectionDetail
-            icon="personal"
-            title="个人介绍"
-            size={24}
-            border={false}
-          >
-            <p class={styles.introduction}>{userInfo.introduction}</p>
-          </SectionDetail>
-        )}
-
-        {userInfo.styleVideo && userInfo.styleVideo.length > 0 && (
-          <SectionDetail
-            icon="elegant"
-            title="老师风采"
-            size={24}
-            border={false}
-          >
-            <div class={styles.videoList}>
-              {userInfo.styleVideo.map((item: any) => (
-                <div class={styles.videoItem}>
-                  <div
-                    class={styles.itemBg}
-                    onClick={() => {
-                      this.videoStatus = true
-                      this.isAddBrowse = true
-                      this.videoItem = item
-                    }}
-                  ></div>
-                  <Icon
-                    class={styles['icon-upload']}
-                    name={getAssetsHomeFile('icon_video.png')}
-                    size={26}
-                  />
-                  {/* <video width="100%" class={styles.video}>
-                    <source src={item.videoUrl} type="video/mp4" />
-                  </video> */}
-                  <Image src={item.cover || iconUploadPoster} fit="cover" />
-                </div>
-              ))}
-            </div>
-          </SectionDetail>
-        )}
-        <Popup
-          show={this.videoStatus}
-          round
-          class={styles.videoGroup}
-          closeable
-          onClose={() => {
-            this.videoStatus = false
-            this.isAddBrowse = false
-          }}
-        >
-          {this.videoStatus && (
-            <ColVideo
-              playsinline
-              onPlay={this.onPlay}
-              src={this.videoItem?.videoUrl + '#t=0.1'}
-            />
-          )}
-
-          {/* <video
-            style={{ height: '210px', width: '100%' }}
-            controls
-            class={styles.video}
-          >
-            <source
-              src={this.videoItem?.videoUrl + '#t=1,4'}
-              type="video/mp4"
-            />
-          </video> */}
-        </Popup>
-      </div>
-    )
-  }
-})
+import SectionDetail from '@/business-components/section-detail'
+import ColVideo from '@/components/col-video'
+import request from '@/helpers/request'
+import { Button, Cell, Icon, Image, Popup } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './single.module.less'
+import { postMessage } from '@/helpers/native-message'
+
+import iconUploadPoster from '@common/images/icon_upload_poster.png'
+import { browser } from '@/helpers/utils'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `../images/${fileName}`
+  const modules = import.meta.globEager('../images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'single',
+  props: {
+    userInfo: {
+      type: Object,
+      default: {}
+    }
+  },
+  data() {
+    const query = this.$route.query
+    return {
+      videoStatus: false,
+      chatStatus: false,
+      teacherId: query.teacherId,
+      fansList: [],
+      chatItem: {},
+      videoItem: {} as any,
+      isAddBrowse: false
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.post('/api-student/imGroup/queryTeacherGroup', {
+        data: {
+          type: 'FAN',
+          createUserId: this.teacherId
+        }
+      })
+      this.fansList = res.data || []
+    } catch {}
+  },
+  methods: {
+    async onPlay() {
+      try {
+        if (!this.isAddBrowse) {
+          return
+        }
+        await request.get('/api-student/teacher/addVideoBrowse', {
+          hideLoading: true,
+          params: {
+            videoId: this.videoItem.id
+          }
+        })
+        this.isAddBrowse = false
+      } catch {}
+    }
+  },
+  render() {
+    const userInfo = this.userInfo
+    return (
+      <div class={styles.single}>
+        {userInfo.introduction && (
+          <SectionDetail
+            icon="personal"
+            title="个人介绍"
+            size={24}
+            border={false}
+          >
+            <p class={styles.introduction}>{userInfo.introduction}</p>
+          </SectionDetail>
+        )}
+
+        {userInfo.styleVideo && userInfo.styleVideo.length > 0 && (
+          <SectionDetail
+            icon="elegant"
+            title="老师风采"
+            size={24}
+            border={false}
+          >
+            <div class={styles.videoList}>
+              {userInfo.styleVideo.map((item: any) => (
+                <div class={styles.videoItem}>
+                  <div
+                    class={styles.itemBg}
+                    onClick={() => {
+                      this.videoStatus = true
+                      this.isAddBrowse = true
+                      this.videoItem = item
+                    }}
+                  ></div>
+                  <Icon
+                    class={styles['icon-upload']}
+                    name={getAssetsHomeFile('icon_video.png')}
+                    size={26}
+                  />
+                  {/* <video width="100%" class={styles.video}>
+                    <source src={item.videoUrl} type="video/mp4" />
+                  </video> */}
+                  <Image src={item.cover || iconUploadPoster} fit="cover" />
+                </div>
+              ))}
+            </div>
+          </SectionDetail>
+        )}
+        <Popup
+          show={this.videoStatus}
+          round
+          class={styles.videoGroup}
+          closeable
+          onClose={() => {
+            this.videoStatus = false
+            this.isAddBrowse = false
+          }}
+        >
+          {this.videoStatus && (
+            <ColVideo
+              playsinline
+              onPlay={this.onPlay}
+              src={this.videoItem?.videoUrl}
+            />
+          )}
+
+          {/* <video
+            style={{ height: '210px', width: '100%' }}
+            controls
+            class={styles.video}
+          >
+            <source
+              src={this.videoItem?.videoUrl + '#t=1,4'}
+              type="video/mp4"
+            />
+          </video> */}
+        </Popup>
+      </div>
+    )
+  }
+})

yarn.lock

@@ -1592,6 +1592,14 @@
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.0"
 
+"babel-runtime@^6.9.2":
+  "integrity" "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g=="
+  "resolved" "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz"
+  "version" "6.26.0"
+  dependencies:
+    "core-js" "^2.4.0"
+    "regenerator-runtime" "^0.11.0"
+
 "babel-walk@3.0.0-canary-5":
   "integrity" "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw=="
   "resolved" "https://registry.npmmirror.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz"
@@ -1632,6 +1640,11 @@
     "inherits" "^2.0.4"
     "readable-stream" "^3.4.0"
 
+"blueimp-md5@^2.10.0":
+  "integrity" "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w=="
+  "resolved" "https://registry.npmmirror.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz"
+  "version" "2.19.0"
+
 "brace-expansion@^1.1.7":
   "integrity" "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="
   "resolved" "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz"
@@ -1786,6 +1799,11 @@
   "resolved" "https://registry.npmmirror.com/chardet/-/chardet-0.7.0.tgz"
   "version" "0.7.0"
 
+"charenc@0.0.2":
+  "integrity" "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA=="
+  "resolved" "https://registry.npmmirror.com/charenc/-/charenc-0.0.2.tgz"
+  "version" "0.0.2"
+
 "ci-info@^1.5.0":
   "integrity" "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A=="
   "resolved" "https://registry.npmmirror.com/ci-info/-/ci-info-1.6.0.tgz"
@@ -1947,6 +1965,11 @@
     "browserslist" "^4.17.6"
     "semver" "7.0.0"
 
+"core-js@^2.4.0":
+  "integrity" "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+  "resolved" "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz"
+  "version" "2.6.12"
+
 "core-js@^3.11.0", "core-js@^3.21.0", "core-js@^3.22.0":
   "integrity" "sha512-oAKwkj9xcWNBAvGbT//WiCdOMpb9XQG92/Fe3ABFM/R16BsHgePG00mFOgKf7IsCtfj8tA1kHtf/VwErhriz5Q=="
   "resolved" "https://registry.npmmirror.com/core-js/-/core-js-3.23.3.tgz"
@@ -1970,6 +1993,11 @@
     "shebang-command" "^2.0.0"
     "which" "^2.0.1"
 
+"crypt@0.0.2":
+  "integrity" "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow=="
+  "resolved" "https://registry.npmmirror.com/crypt/-/crypt-0.0.2.tgz"
+  "version" "0.0.2"
+
 "css-line-break@^2.1.0":
   "integrity" "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w=="
   "resolved" "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz"
@@ -2087,6 +2115,11 @@
     "domhandler" "^4.2.0"
     "entities" "^2.0.0"
 
+"dom-walk@^0.1.0":
+  "integrity" "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+  "resolved" "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz"
+  "version" "0.1.2"
+
 "domelementtype@^2.0.1", "domelementtype@^2.2.0":
   "integrity" "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
   "resolved" "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.2.0.tgz"
@@ -2193,9 +2226,14 @@
   "resolved" "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz"
   "version" "0.9.3"
 
-"esbuild-windows-64@0.14.54":
-  "integrity" "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ=="
-  "resolved" "https://registry.npmmirror.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz"
+"es5-shim@^4.5.1":
+  "integrity" "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ=="
+  "resolved" "https://registry.npmmirror.com/es5-shim/-/es5-shim-4.6.7.tgz"
+  "version" "4.6.7"
+
+"esbuild-darwin-64@0.14.54":
+  "integrity" "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug=="
+  "resolved" "https://registry.npmmirror.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz"
   "version" "0.14.54"
 
 "esbuild@^0.14.27":
@@ -2593,6 +2631,11 @@
   "resolved" "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fsevents@~2.3.2":
+  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
+  "resolved" "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz"
+  "version" "2.3.2"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz"
@@ -2683,6 +2726,14 @@
     "is-windows" "^1.0.1"
     "which" "^1.2.14"
 
+"global@^4.3.1", "global@~4.3.0", "global@4.3.2":
+  "integrity" "sha512-/4AybdwIDU4HkCUbJkZdWpe4P6vuw/CUtu+0I1YlLIPe7OlUO7KNJ+q/rO70CW2/NW6Jc6I62++Hzsf5Alu6rQ=="
+  "resolved" "https://registry.npmmirror.com/global/-/global-4.3.2.tgz"
+  "version" "4.3.2"
+  dependencies:
+    "min-document" "^2.19.0"
+    "process" "~0.5.1"
+
 "globals@^11.1.0":
   "integrity" "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
   "resolved" "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz"
@@ -2877,6 +2928,11 @@
   "resolved" "https://registry.npmmirror.com/indent-string/-/indent-string-4.0.0.tgz"
   "version" "4.0.0"
 
+"individual@^2.0.0":
+  "integrity" "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+  "resolved" "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz"
+  "version" "2.0.0"
+
 "inflight@^1.0.4":
   "integrity" "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA=="
   "resolved" "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz"
@@ -2928,6 +2984,11 @@
     "is-relative" "^1.0.0"
     "is-windows" "^1.0.1"
 
+"is-buffer@~1.1.6":
+  "integrity" "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+  "resolved" "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz"
+  "version" "1.1.6"
+
 "is-ci@^1.0.10":
   "integrity" "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg=="
   "resolved" "https://registry.npmmirror.com/is-ci/-/is-ci-1.2.1.tgz"
@@ -2965,6 +3026,11 @@
   "resolved" "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz"
   "version" "4.0.0"
 
+"is-function@^1.0.1":
+  "integrity" "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+  "resolved" "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz"
+  "version" "1.0.2"
+
 "is-glob@^4.0.0", "is-glob@^4.0.1", "is-glob@^4.0.3":
   "integrity" "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="
   "resolved" "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz"
@@ -3104,6 +3170,11 @@
   dependencies:
     "argparse" "^2.0.1"
 
+"jsencrypt@^3.2.0":
+  "integrity" "sha512-arQR1R1ESGdAxY7ZheWr12wCaF2yF47v5qpB76TtV64H1pyGudk9Hvw8Y9tb/FiTIaaTRUyaSnm5T/Y53Ghm/A=="
+  "resolved" "https://registry.npmmirror.com/jsencrypt/-/jsencrypt-3.3.2.tgz"
+  "version" "3.3.2"
+
 "jsesc@^2.5.1":
   "integrity" "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
   "resolved" "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz"
@@ -3383,6 +3454,15 @@
   "resolved" "https://registry.npmmirror.com/map-cache/-/map-cache-0.2.2.tgz"
   "version" "0.2.2"
 
+"md5@^2.3.0":
+  "integrity" "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g=="
+  "resolved" "https://registry.npmmirror.com/md5/-/md5-2.3.0.tgz"
+  "version" "2.3.0"
+  dependencies:
+    "charenc" "0.0.2"
+    "crypt" "0.0.2"
+    "is-buffer" "~1.1.6"
+
 "merge-stream@^2.0.0":
   "integrity" "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
   "resolved" "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz"
@@ -3411,6 +3491,13 @@
   "resolved" "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-2.1.0.tgz"
   "version" "2.1.0"
 
+"min-document@^2.19.0":
+  "integrity" "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ=="
+  "resolved" "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz"
+  "version" "2.19.0"
+  dependencies:
+    "dom-walk" "^0.1.0"
+
 "minimatch@^3.0.4":
   "integrity" "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA=="
   "resolved" "https://registry.npmmirror.com/minimatch/-/minimatch-3.0.4.tgz"
@@ -3551,7 +3638,7 @@
   "resolved" "https://registry.npmmirror.com/numeral/-/numeral-2.0.6.tgz"
   "version" "2.0.6"
 
-"object-assign@^4.1.1":
+"object-assign@^4.1.0", "object-assign@^4.1.1":
   "integrity" "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
   "resolved" "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz"
   "version" "4.1.1"
@@ -3717,6 +3804,11 @@
     "map-cache" "^0.2.0"
     "path-root" "^0.1.1"
 
+"parse-headers@^2.0.0":
+  "integrity" "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+  "resolved" "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.5.tgz"
+  "version" "2.0.5"
+
 "parse-node-version@^1.0.1":
   "integrity" "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
   "resolved" "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz"
@@ -3866,6 +3958,11 @@
   "resolved" "https://registry.npmmirror.com/prettier/-/prettier-2.5.1.tgz"
   "version" "2.5.1"
 
+"process@~0.5.1":
+  "integrity" "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
+  "resolved" "https://registry.npmmirror.com/process/-/process-0.5.2.tgz"
+  "version" "0.5.2"
+
 "progress@^2.0.0":
   "integrity" "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
   "resolved" "https://registry.npmmirror.com/progress/-/progress-2.0.3.tgz"
@@ -4018,6 +4115,15 @@
   dependencies:
     "side-channel" "^1.0.4"
 
+"query-string@^5.0.1":
+  "integrity" "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw=="
+  "resolved" "https://registry.npmmirror.com/query-string/-/query-string-5.1.1.tgz"
+  "version" "5.1.1"
+  dependencies:
+    "decode-uri-component" "^0.2.0"
+    "object-assign" "^4.1.0"
+    "strict-uri-encode" "^1.0.0"
+
 "query-string@^7.1.1":
   "integrity" "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w=="
   "resolved" "https://registry.npmmirror.com/query-string/-/query-string-7.1.1.tgz"
@@ -4066,6 +4172,11 @@
   "resolved" "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz"
   "version" "1.4.2"
 
+"regenerator-runtime@^0.11.0":
+  "integrity" "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+  "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
+  "version" "0.11.1"
+
 "regenerator-runtime@^0.13.4", "regenerator-runtime@^0.13.9":
   "integrity" "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
   "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
@@ -4201,6 +4312,13 @@
   dependencies:
     "queue-microtask" "^1.2.2"
 
+"rust-result@^1.0.0":
+  "integrity" "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA=="
+  "resolved" "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz"
+  "version" "1.0.0"
+  dependencies:
+    "individual" "^2.0.0"
+
 "rxjs@^7.2.0", "rxjs@^7.4.0", "rxjs@^7.5.5":
   "integrity" "sha512-sy+H0pQofO95VDmFLzyaw9xNJU4KTRSwQIGM6+iG3SypAtCiLDzpeG8sJrNCWn2Up9km+KhkvTdbkrdy+yzZdw=="
   "resolved" "https://registry.npmmirror.com/rxjs/-/rxjs-7.5.5.tgz"
@@ -4218,6 +4336,13 @@
   "resolved" "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz"
   "version" "5.2.1"
 
+"safe-json-parse@4.0.0":
+  "integrity" "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ=="
+  "resolved" "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz"
+  "version" "4.0.0"
+  dependencies:
+    "rust-result" "^1.0.0"
+
 "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   "integrity" "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
   "resolved" "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz"
@@ -4373,6 +4498,21 @@
   "resolved" "https://registry.npmmirror.com/split-on-first/-/split-on-first-1.1.0.tgz"
   "version" "1.1.0"
 
+"store@^2.0.12":
+  "integrity" "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw=="
+  "resolved" "https://registry.npmmirror.com/store/-/store-2.0.12.tgz"
+  "version" "2.0.12"
+
+"store2@^2.7.1":
+  "integrity" "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w=="
+  "resolved" "https://registry.npmmirror.com/store2/-/store2-2.14.2.tgz"
+  "version" "2.14.2"
+
+"strict-uri-encode@^1.0.0":
+  "integrity" "sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ=="
+  "resolved" "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz"
+  "version" "1.1.0"
+
 "strict-uri-encode@^2.0.0":
   "integrity" "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ=="
   "resolved" "https://registry.npmmirror.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz"
@@ -4476,6 +4616,26 @@
   "resolved" "https://registry.npmmirror.com/systemjs/-/systemjs-6.12.1.tgz"
   "version" "6.12.1"
 
+"tcplayer.js@^4.8.0":
+  "integrity" "sha512-70nTne/YmLVlInhQ/5KpRfKG46zyu3uKxdT9Am9VVhPSciw+GjONbfZSZwgngK1Z4xtv/hE/U2RIyy5FZjjAWA=="
+  "resolved" "https://registry.npmmirror.com/tcplayer.js/-/tcplayer.js-4.8.0.tgz"
+  "version" "4.8.0"
+  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"
+
 "text-segmentation@^1.0.3":
   "integrity" "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="
   "resolved" "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz"
@@ -4534,6 +4694,11 @@
   "resolved" "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz"
   "version" "2.3.0"
 
+"tsml@1.0.1":
+  "integrity" "sha512-3KmepnH9SUsoOVtg013CRrL7c+AK7ECaquAsJdvu4288EDJuraqBlP4PDXT/rLEJ9YDn4jqLAzRJsnFPx+V6lg=="
+  "resolved" "https://registry.npmmirror.com/tsml/-/tsml-1.0.1.tgz"
+  "version" "1.0.1"
+
 "tsutils@^3.21.0":
   "integrity" "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA=="
   "resolved" "https://registry.npmmirror.com/tsutils/-/tsutils-3.21.0.tgz"
@@ -4689,6 +4854,25 @@
     "core-js" "^3.11.0"
     "mutation-observer" "^1.0.3"
 
+"videojs-font@2.1.0":
+  "integrity" "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
+  "resolved" "https://registry.npmmirror.com/videojs-font/-/videojs-font-2.1.0.tgz"
+  "version" "2.1.0"
+
+"videojs-ie8@1.1.2":
+  "integrity" "sha512-0Zb2T4MLkpfZbeGMK/Z93b8Lrepr+rLFoHgQV1CoDeFqXvH7b+Vsd/VHoILGxQrgCSHFQ7mAODR6oyMjuiD4/g=="
+  "resolved" "https://registry.npmmirror.com/videojs-ie8/-/videojs-ie8-1.1.2.tgz"
+  "version" "1.1.2"
+  dependencies:
+    "es5-shim" "^4.5.1"
+
+"videojs-vtt.js@0.12.4":
+  "integrity" "sha512-JQ5eozH5SLOL5xI8ALb1aWf9HjcewQmOytf1gPIsFBTQlSgtSdJ8E8x0GO0ZEXVtFCaPDFiYWAhrjuTI125tBQ=="
+  "resolved" "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.12.4.tgz"
+  "version" "0.12.4"
+  dependencies:
+    "global" "^4.3.1"
+
 "vite-plugin-style-import@^1.4.0":
   "integrity" "sha512-EGAx0zVGUkwAwvDaC66zxgzXyHE0CwAXp4O1xGKnpMcrDT9L1nlojiCjjLRQzL8C3zwY1jn9ilq+m0VABKiiLg=="
   "resolved" "https://registry.npmmirror.com/vite-plugin-style-import/-/vite-plugin-style-import-1.4.0.tgz"
@@ -4999,6 +5183,21 @@
   "resolved" "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz"
   "version" "1.0.2"
 
+"xhr@2.4.0":
+  "integrity" "sha512-TUbBsdAuJbX8olk9hsDwGK8P1ri1XlV+PdEWkYw+HQQbpkiBR8PLgD1F3kQDPBs9l4Px34hP9rCYAZOCCAENbw=="
+  "resolved" "https://registry.npmmirror.com/xhr/-/xhr-2.4.0.tgz"
+  "version" "2.4.0"
+  dependencies:
+    "global" "~4.3.0"
+    "is-function" "^1.0.1"
+    "parse-headers" "^2.0.0"
+    "xtend" "^4.0.0"
+
+"xtend@^4.0.0":
+  "integrity" "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+  "resolved" "https://registry.npmmirror.com/xtend/-/xtend-4.0.2.tgz"
+  "version" "4.0.2"
+
 "y18n@^4.0.0":
   "integrity" "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
   "resolved" "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz"