优化监控视频

package-lock.json

@@ -15,6 +15,14 @@
       "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.18.5.tgz",
       "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw=="
     },
+    "@babel/runtime": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
     "@ctrl/tinycolor": {
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz",
@@ -79,6 +87,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
     "@rollup/pluginutils": {
       "version": "5.0.2",
       "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
@@ -114,6 +127,74 @@
       "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
       "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
     },
+    "@videojs/http-streaming": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.7.0.tgz",
+      "integrity": "sha512-5uLFKBL8CvD56dxxJyuxqB5CY0tdoa4SE9KbXakeiAy6iFBUEPvTr2YGLKEWvQ8Lojs1wl+FQndLdv+GO7t9Fw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "4.0.0",
+        "aes-decrypter": "4.0.1",
+        "global": "^4.4.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.2.2",
+        "mux.js": "7.0.1",
+        "video.js": "^7 || ^8"
+      },
+      "dependencies": {
+        "m3u8-parser": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
+          "integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "@videojs/vhs-utils": "^3.0.5",
+            "global": "^4.4.0"
+          },
+          "dependencies": {
+            "@videojs/vhs-utils": {
+              "version": "3.0.5",
+              "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+              "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+              "requires": {
+                "@babel/runtime": "^7.12.5",
+                "global": "^4.4.0",
+                "url-toolkit": "^2.2.1"
+              }
+            }
+          }
+        },
+        "mux.js": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.1.tgz",
+          "integrity": "sha512-Omz79uHqYpMP1V80JlvEdCiOW1hiw4mBvDh9gaZEpxvB+7WYb2soZSzfuSRrK2Kh9Pm6eugQNrIpY/Bnyhk4hw==",
+          "requires": {
+            "@babel/runtime": "^7.11.2",
+            "global": "^4.4.0"
+          }
+        }
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
+      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      }
+    },
+    "@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "@vitejs/plugin-vue": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
@@ -248,12 +329,40 @@
         "vue-demi": "*"
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
+    },
     "acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.10.0.tgz",
       "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true
     },
+    "aes-decrypter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
+      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      },
+      "dependencies": {
+        "@videojs/vhs-utils": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "global": "^4.4.0",
+            "url-toolkit": "^2.2.1"
+          }
+        }
+      }
+    },
     "amfe-flexible": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
@@ -289,6 +398,27 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/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.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -378,6 +508,11 @@
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "echarts": {
       "version": "5.4.3",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
@@ -407,13 +542,6 @@
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
         "normalize-wheel-es": "^1.2.0"
-      },
-      "dependencies": {
-        "@popperjs/core": {
-          "version": "npm:@sxzz/popperjs-es@2.11.7",
-          "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-        }
       }
     },
     "emojis-list": {
@@ -422,6 +550,11 @@
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
       "dev": true
     },
+    "es5-shim": {
+      "version": "4.6.7",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.6.7.tgz",
+      "integrity": "sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ=="
+    },
     "esbuild": {
       "version": "0.14.47",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.14.47.tgz",
@@ -674,6 +807,15 @@
         "is-glob": "^4.0.1"
       }
     },
+    "global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has/-/has-1.0.3.tgz",
@@ -694,6 +836,11 @@
       "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -718,6 +865,11 @@
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/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",
@@ -748,6 +900,11 @@
       "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
       "dev": true
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
+    },
     "leader-line": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/leader-line/-/leader-line-1.0.7.tgz",
@@ -785,6 +942,28 @@
       "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
       "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ=="
     },
+    "m3u8-parser": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-6.2.0.tgz",
+      "integrity": "sha512-qlC00JTxYOxawcqg+RB8jbyNwL3foY/nCY61kyWP+RCuJE9APLeqB/nSlTjb4Mg0yRmyERgjswpdQxMvkeoDrg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      },
+      "dependencies": {
+        "@videojs/vhs-utils": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "global": "^4.4.0",
+            "url-toolkit": "^2.2.1"
+          }
+        }
+      }
+    },
     "magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
@@ -827,6 +1006,14 @@
         "mime-db": "1.52.0"
       }
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz",
@@ -854,12 +1041,44 @@
         "ufo": "^1.1.2"
       }
     },
+    "mpd-parser": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.2.2.tgz",
+      "integrity": "sha512-QCfB1koOoZw6E5La1cx+W/Yd0EZlRhHMqMr4TAJez0eRTuPDzPM5FWoiOqjyo37W+ISPLzmfJACSbJFEBjbL4Q==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "dependencies": {
+        "@videojs/vhs-utils": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+          "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "global": "^4.4.0",
+            "url-toolkit": "^2.2.1"
+          }
+        }
+      }
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "mux.js": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.2.tgz",
+      "integrity": "sha512-CM6+QuyDbc0qW1OfEjkd2+jVKzTXF+z5VOKH0eZxtZtnrG/ilkW/U7l7IXGtBNLASF9sKZMcK1u669cq50Qq0A==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      }
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
@@ -876,6 +1095,11 @@
       "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
+    "parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
@@ -899,6 +1123,14 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "pkg-types": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.0.3.tgz",
@@ -925,6 +1157,11 @@
       "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
       "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg=="
     },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -945,6 +1182,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -980,6 +1222,22 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
+    },
     "sass": {
       "version": "1.64.2",
       "resolved": "https://registry.npmmirror.com/sass/-/sass-1.64.2.tgz",
@@ -1055,6 +1313,11 @@
       "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha512-3KmepnH9SUsoOVtg013CRrL7c+AK7ECaquAsJdvu4288EDJuraqBlP4PDXT/rLEJ9YDn4jqLAzRJsnFPx+V6lg=="
+    },
     "ufo": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/ufo/-/ufo-1.2.0.tgz",
@@ -1179,6 +1442,207 @@
         }
       }
     },
+    "url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
+    "video.js": {
+      "version": "8.6.1",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.6.1.tgz",
+      "integrity": "sha512-CNYVJ5WWIZ7bOhbkkfcKqLGoc6WsE3Ft2RfS1lXdQTWk8UiSsPW2Ssk2JzPCA8qnIlUG9os/faCFsYWjyu4JcA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "3.7.0",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "^4.0.1",
+        "global": "4.4.0",
+        "keycode": "2.2.0",
+        "m3u8-parser": "^6.0.0",
+        "mpd-parser": "^1.0.1",
+        "mux.js": "^7.0.1",
+        "safe-json-parse": "4.0.0",
+        "videojs-contrib-quality-levels": "4.0.0",
+        "videojs-font": "4.1.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "videojs-contrib-hls": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
+      "integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
+      "requires": {
+        "aes-decrypter": "1.0.3",
+        "global": "^4.3.0",
+        "m3u8-parser": "2.1.0",
+        "mux.js": "4.3.2",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^5.19.1 || ^6.2.0",
+        "videojs-contrib-media-sources": "4.7.2",
+        "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "aes-decrypter": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+          "integrity": "sha512-rsx8pfx7wJsn+ziYbpJ8XA5c93hKAtBCrfydxJqJCMT+qfjipd/B5wC2xHtBcoxyvlqJcpeAo3K55t0lXOn9yQ==",
+          "requires": {
+            "pkcs7": "^0.2.3"
+          }
+        },
+        "m3u8-parser": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+          "integrity": "sha512-WbEpQ2FUaNGbJ0YanSeyj9D9ruu4FUvz+ZvebIzI2bSME+PUwcPXO1kKXZkjcPUAFruDikoOI5fWQNIA6JCCOQ=="
+        },
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        },
+        "pkcs7": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+          "integrity": "sha512-kJRwmADEQUg+qJyRgWLtpEL9q9cFjZschejTEK3GRjKvnsU9G5WWoe/wKqRgbBoqWdVSeTUKP6vIA3Y72M3rWA=="
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
+        },
+        "video.js": {
+          "version": "6.13.0",
+          "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+          "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+          "requires": {
+            "babel-runtime": "^6.9.2",
+            "global": "4.3.2",
+            "safe-json-parse": "4.0.0",
+            "tsml": "1.0.1",
+            "videojs-font": "2.1.0",
+            "videojs-ie8": "1.1.2",
+            "videojs-vtt.js": "0.12.6",
+            "xhr": "2.4.0"
+          },
+          "dependencies": {
+            "global": {
+              "version": "4.3.2",
+              "resolved": "https://registry.npmjs.org/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"
+              }
+            }
+          }
+        },
+        "videojs-font": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+          "integrity": "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
+        },
+        "videojs-vtt.js": {
+          "version": "0.12.6",
+          "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+          "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+          "requires": {
+            "global": "^4.3.1"
+          }
+        }
+      }
+    },
+    "videojs-contrib-media-sources": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
+      "integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
+      "requires": {
+        "global": "^4.3.0",
+        "mux.js": "4.3.2",
+        "video.js": "^5.17.0 || ^6.2.0",
+        "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
+        },
+        "video.js": {
+          "version": "6.13.0",
+          "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+          "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+          "requires": {
+            "babel-runtime": "^6.9.2",
+            "global": "4.3.2",
+            "safe-json-parse": "4.0.0",
+            "tsml": "1.0.1",
+            "videojs-font": "2.1.0",
+            "videojs-ie8": "1.1.2",
+            "videojs-vtt.js": "0.12.6",
+            "xhr": "2.4.0"
+          },
+          "dependencies": {
+            "global": {
+              "version": "4.3.2",
+              "resolved": "https://registry.npmjs.org/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"
+              }
+            }
+          }
+        },
+        "videojs-font": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+          "integrity": "sha512-zFqWpLrXf1q8NtYx5qtZhMC6SLUFScDmR6j+UGPogobxR21lvXShhnzcNNMdOxJUuFLiToJ/BPpFUQwX4xhpvA=="
+        },
+        "videojs-vtt.js": {
+          "version": "0.12.6",
+          "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+          "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+          "requires": {
+            "global": "^4.3.1"
+          }
+        }
+      }
+    },
+    "videojs-contrib-quality-levels": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz",
+      "integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==",
+      "requires": {
+        "global": "^4.4.0"
+      }
+    },
+    "videojs-font": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
+      "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w=="
+    },
+    "videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/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.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
     "vite": {
       "version": "2.9.12",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-2.9.12.tgz",
@@ -1258,6 +1722,43 @@
       "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
       "dev": true
     },
+    "webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
+      "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
+    },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/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"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/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"
+          }
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha512-oNpcutj+nYX2FjdEW7PGltWhXulAnFlM0My/k48L90hARCOJtvBbQXc/6itV2jDvU5xAAtonP+r6wmQgCcbAUA=="
+        }
+      }
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
     "zrender": {
       "version": "5.4.4",
       "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz",

package.json

@@ -12,8 +12,11 @@
     "axios": "^1.4.0",
     "echarts": "^5.4.3",
     "element-plus": "^2.3.9",
+    "hls.js": "^1.4.12",
     "leader-line": "^1.0.7",
     "postcss-pxtorem": "^6.0.0",
+    "video.js": "^8.6.1",
+    "videojs-contrib-hls": "^5.15.0",
     "vue": "^3.2.25",
     "vue-router": "^4.2.5",
     "vue3-count-to": "^1.1.2",

public/config.js

@@ -2,5 +2,6 @@ window.g = {
     // 获取数据请求地址
     BASE_API: "https://test.lqkj.top//cmioc3-server",
     // BASE_API: "http://192.168.4.219:12397/ioc-server",
-    UE_IP: "http://192.168.4.159"
+    // UE_IP: "http://192.168.4.159"
+    UE_IP: "http://127.0.0.1:80"
 };

src/components/VideoJs.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="videoPlay">
+    <video ref="m3u8_video" class="video-js vjs-default-skin vjs-big-play-centered" controls>
+      <source :src="videoSrc" />
+    </video>
+  </div>
+</template>
+<script lang="ts" setup>
+import { getDevice, getVideoUrl,getvideo } from '../request/api';
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import videojs, { VideoJsPlayer } from "video.js";
+import "video.js/dist/video-js.css";
+import zh from "video.js/dist/lang/zh-CN.json";
+const props = withDefaults(
+  defineProps<{
+    videoSrc: string;
+    autoPlay?: boolean;
+  }>(),
+  { autoPlay: false }
+);
+const m3u8_video = ref();
+let player: VideoJsPlayer;
+const initPlay = async () => {
+  videojs.addLanguage("zh-CN", zh);
+  await nextTick();
+  const options = {
+    muted: true,
+    controls: false,
+    autoplay: true,
+    loop: true,
+    language: "zh-CN",
+    techOrder: ["html5"],
+  };
+  player = videojs(m3u8_video.value, options, () => {
+    videojs.log("播放器已经准备好了!");
+    if (props.autoPlay && props.videoSrc) {
+      player.play();
+    }
+    player.on("ended", () => {
+      videojs.log("播放结束了!");
+    });
+    player.on("error", () => {
+      videojs.log("播放器解析出错!");
+    });
+  });
+};
+onMounted(() => {
+  console.log('shidaodx', props.videoSrc);
+
+
+  //         //视频转码
+  //         getvideo({
+  //         "rtsp": array.src,
+  //         }).then((res)=>{
+  //             console.log('sadnuq21',res.data);
+  //             console.log('sadnuq2121',res.data.httpFlv);
+  //             array.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+  //         //    array.src=res.data.httpFlv
+  //         })
+
+  initPlay();
+});
+//直接改变路径测试
+watch(
+  () => props.videoSrc,
+  () => {
+    player.pause();
+    player.src(props.videoSrc);
+    player.load();
+    if (props.videoSrc) {
+      player.play();
+    }
+  }
+);
+onBeforeUnmount(() => {
+  player?.dispose();
+});
+</script>
+<style lang="scss" scoped>
+.videoPlay {
+  width: 100%;
+  height: 100%;
+
+  .video-js {
+    height: 100%;
+    width: 100%;
+    object-fit: fill;
+  }
+}
+
+:deep(.vjs-tech) {
+  object-fit: fill;
+}
+</style>
+     
+  

src/components/right.vue

@@ -16,15 +16,15 @@
                         <img :src="d2img" alt="">
                         <div class="percent" style="display: flex;justify-content: space-between;">
                             <a>在线</a> <a>{{ equipmentTotal.online }} <span>(个)</span> </a>
-                            
+
                         </div>
                     </div>
                     <div class="item_r">
                         <img :src="d3img" alt="">
                         <div class="percent" style="display: flex;justify-content: space-between;">
                             <a>离线</a> <a>{{ equipmentTotal.underline }} <span>(个)</span> </a>
-                             
-                    
+
+
                         </div>
                     </div>
                 </div>
@@ -42,7 +42,7 @@
                         <!-- <img :src="'src/assets/img/' + item.icon + '.png'" alt=""> -->
                     </CircleProgress>
 
-                    <div  class="text">{{ item.text }}</div>
+                    <div class="text">{{ item.text }}</div>
 
                     <!-- <el-tooltip placement="bottom">
                         <template    #content> multiple lines<br />second line </template>
@@ -50,7 +50,7 @@
                             测试测试测试
                         </el-text>
                     </el-tooltip> -->
-            
+
                 </div>
             </div>
         </div>
@@ -60,53 +60,43 @@
                 <div class="text">智慧教室实时监控</div>
             </div>
 
-            <div class="monitorContent">
-                <el-carousel class="monitor" :interval="8000" @change="monitorchange">
+            <div class="monitorContent" v-if="asd">
+
+
+
+                <el-carousel class="monitor" :interval="10000" @change="monitorchange">
                     <el-carousel-item v-for="(item, index2) in carouselData" :key="index2">
-                        <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px;">{{ item.activeMonitor.title }}</p>
-                        <div class="interactclass" >
+                        <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px;">{{ item.activeMonitor.title }}
+                        </p>
+                        <div class="interactclass">
                             <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                 <span style="z-index: 99;">{{ item.title }}</span>
-                            
-                                <div v-if="item.src &&videoindex==index2"  style="width: 100%;height: 100%;" @click="lookVideo(item)">
-                                    <div  class="vue3VideoPlay ">
-                                        <vue3VideoPlay 
-                                    
-                                    width="100%"
-                                    height="8.8vh"
-                                    style=" object-fit: fill"
-                                    :src="item.src"
-                                    :type="videoData.type"
-                                    :autoPlay="true"
-                                    :control="false"
-                                    :preload="meta"
-                                   />
+
+                                <div v-if="item.src && videoindex == index2" style="width: 100%;height: 100%;"
+                                    @click="lookVideo(item)">
+                                    <div class="vue3VideoPlay " style='width: 100%;height: 8.8vh;'>
+
+                                        <VideoJs :videoSrc="item.src" autoPlay />
+
 
                                     </div>
                                 </div>
                             </div>
                         </div>
 
-                        <p style="margin-top: 18px;margin-left: 12px;  margin-bottom: 3px; font-size: 14px; " >{{ item.activeMonitor.title1 }}</p>
+                        <p style="margin-top: 18px;margin-left: 12px;  margin-bottom: 3px; font-size: 14px; ">{{
+                            item.activeMonitor.title1 }}</p>
                         <div class="interactclass">
                             <div class="room" v-for="(item, index) in item.activeMonitor.array1" :key="index">
-                                <span  style="z-index: 99;">{{ item.title }}</span>
-               
-                                <div v-if="item.src &&videoindex==index2"  style="width: 100%;height: 100%;" @click="lookVideo(item)">
-                                    <div  class="vue3VideoPlay ">
-                                        <vue3VideoPlay 
-                                    
-                                    width="100%"
-                                    height="9vh"
-                                    style="object-fit: fill"
-                                    :src="item.src"
-                                    :type="videoData.type"
-                                    :autoPlay="true"
-                                    :control="false"
-                                    :preload="meta"
-                                   />
+                                <span style="z-index: 99;">{{ item.title }}</span>
+
+                                <div v-if="item.src && videoindex == index2" style="width: 100%;height: 100%;"
+                                    @click="lookVideo(item)">
+                                    <div class="vue3VideoPlay " style='width: 100%;height: 8.8vh;'>
+
+                                        <VideoJs :videoSrc="item.src" autoPlay />
                                     </div>
-                            
+
                                 </div>
                             </div>
                         </div>
@@ -118,7 +108,8 @@
     </el-aside>
 
     <!-- 视频播放弹框 -->
-    <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="62%" align="center" top="8%" style="z-index: 2015;">
+    <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="62%" align="center" top="8%"
+        style="z-index: 2015;">
         <videoPlay v-bind="videoData" />
 
         <!-- {{ videoData.src }} -->
@@ -126,18 +117,24 @@
 </template>
 
 <script >
-import { reactive, onMounted, ref, nextTick } from 'vue';
+import { reactive, onBeforeMount, ref, nextTick } from 'vue';
 import { ElCarousel, ElCarouselItem } from "element-plus";
 import "vue3-video-play/dist/style.css";
 import { videoPlay } from "vue3-video-play";
 // import CircleProgress from './CircleProgress.vue';
-import { getDevice, getVideoUrl,getvideo } from '../request/api';
+import { getDevice, getVideoUrl, getvideo } from '../request/api';
+//找到你的组件地址引入进来
+import VideoJs from "./VideoJs.vue";
 
 
 export default ({
     name: 'Histogram',
-    components: { videoPlay, ElCarousel, ElCarouselItem,  },
+    components: { videoPlay, ElCarousel, ElCarouselItem, },
     setup() {
+
+        const data = reactive({
+            videoSrc: "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
+        });
         // 视频数据
         const videoData = reactive({
             width: "100%", //播放器高度
@@ -170,14 +167,38 @@ export default ({
         });
         //视频播放弹框
         const videoDialog = ref(false)
+        const asd = ref(false)
 
         //播放视频索引
-        const videoindex = ref(0)
-        const monitorchange = function (val) {
-            console.log('ssbadbuasd',val);
-           setTimeout(() => {
-            videoindex.value=val
-           }, 500);
+        let videoindex = ref(0)
+        let monitorchange = function (val) {
+
+            // let videos = document.querySelectorAll('.interactclass video');
+
+            // setTimeout(() => {
+            //     for (let video of videos) {
+            //     console.log("sbdadbdbdb",video);
+            // video.pause();
+
+
+            // video.removeAttribute('src'); // empty source
+            // video.load();
+            // // video.remove();
+            // video.destroy();
+            // video.load();
+            // video.scr='';
+
+            // video.style.display = 'none';
+
+
+            // video=null;
+            // // video.dispose();
+            // }
+            // }, 500);
+
+            setTimeout(() => {
+                videoindex.value = val
+            }, 500);
         }
 
         // const  videoshow = ref(true)
@@ -186,14 +207,14 @@ export default ({
         const lookVideo = function (item) {
             videoDialog.value = true;
             dialogTitle.value = item.title
-            let copysrc=JSON.parse(JSON.stringify(item))
-            console.log('sadi2',copysrc);
+            let copysrc = JSON.parse(JSON.stringify(item))
+            console.log('sadi2', copysrc);
             // videoData.src = item.scr
             videoData.src = copysrc.src
             console.log('kankna222', videoData.src);
 
-            
-         
+
+
             // getVideoUrl({ "rtsp": item.src }).then((res) => {
             //     console.log("视频处理", res);
             //     console.log("视频处理2", res.data.httpFlv);
@@ -211,11 +232,14 @@ export default ({
         let equipmentTotal = ref({})
         // 物联设备类型统计
         let interDevice = ref([])
+
+
         // 智慧教室
         let carouselData = ref([
-           
+
         ])
 
+
         //获取页面数据
         const getDeviceData = async () => {
 
@@ -228,67 +252,68 @@ export default ({
             // })
 
             let res = await getDevice()
-            console.log('s12312123',res);
+            console.log('s12312123', res);
             if (res.code !== 200) {
                 ElMessage.error("数据请求出错");
             }
             let { category, monitor, status } = res.data
-                  //物联设备统计
-                  equipmentTotal.value = status
+            //物联设备统计
+            equipmentTotal.value = status
             // 物联设备类型数据
-            console.log('sadui12u31',category);
+            console.log('sadui12u31', category);
             //截取数组前6项
             interDevice.value = category;
-      
-             // 互动教室
-             carouselData.value = monitor;
-      
-             carouselData.value.map((res)=>{
-                console.log('sadhi2',res.activeMonitor);
-
-                res.activeMonitor.array.map(array =>{
-              
+
+
+
+            monitor.map((res) => {
+                console.log('sadhi2', res.activeMonitor);
+
+                res.activeMonitor.array.map(array => {
+
                     //视频转码
                     getvideo({
-                    "rtsp": array.src,
-                    }).then((res)=>{
-                        console.log('sadnuq21',res.data);
-                        console.log('sadnuq2121',res.data.httpFlv);
-                        // array.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
-                       array.src=res.data.httpFlv
+                        "rtsp": array.src,
+                    }).then((res) => {
+                        console.log('sadnuq21', res.data);
+                        console.log('sadnuq2121', res.data.httpFlv);
+                        // array.src = 'http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+                           array.src=res.data.httpFlv
                     })
 
-                    
+
                 })
-                res.activeMonitor.array1.map(array1 =>{
-                    console.log('asdui1231',array1);
-                       //视频转码
-                       getvideo({
-                    "rtsp": array1.src,
-                    }).then((res)=>{
-                        console.log('sadnuq212123s2',res.data);
-                        // array1.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
-                       array1.src=res.data.httpFlv
+                res.activeMonitor.array1.map(array1 => {
+                    console.log('asdui1231', array1);
+                    //视频转码
+                    getvideo({
+                        "rtsp": array1.src,
+                    }).then((res) => {
+                        console.log('sadnuq212123s2', res.data);
+                        // array1.src = 'http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+                           array1.src=res.data.httpFlv
                     })
                 })
 
 
             })
+            // 互动教室
+            carouselData.value = monitor;
+            
+            console.log('hshshhs',carouselData.value);
 
-                 
 
 
+        }
 
-                // setTimeout(() => {
-                //     console.log('处理后监控视频数据===',carouselData.value);
-                // }, 2000);
+        onBeforeMount(() => {
 
-      
+            getDeviceData()
 
-        }
+            setTimeout(() => {
+                asd.value=true
+            }, 1000);
 
-        onMounted(() => {
-            getDeviceData()
         })
         const d1img = ref('./img/d1_1.png');
         const d12img = ref('./img/d1_2.png');
@@ -311,7 +336,9 @@ export default ({
             deviceImg,
             dialogTitle,
             monitorchange,
-            videoindex
+            videoindex,
+            data,
+            asd
         }
     },
 })
@@ -353,5 +380,4 @@ export default ({
     }
 
 
-}
-</style>
+}</style>

src/main.js

@@ -8,6 +8,9 @@ import 'element-plus/dist/index.css'
 
 import vue3videoPlay from 'vue3-video-play' // 引入组件
 import 'vue3-video-play/dist/style.css' // 引入css
+import videojs from "video.js";
+import "video.js/dist/video-js.css";
+// Vue.prototype.$video = videojs;