Merge branch 'perf/video-player-change' into 'main_dev'

perf: 变更视频组件&&支持h265

See merge request yunteng/thingskit-view!223

@@ -57,7 +57,11 @@
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-sketch-ruler": "^1.3.3",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "xgplayer": "^3.0.14",
+    "xgplayer-flv": "^3.0.14",
+    "xgplayer-hls": "^3.0.14",
+    "xgplayer-mp4": "^3.0.14"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.2",

-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -11,6 +11,9 @@ dependencies:
   '@amap/amap-jsapi-types':
     specifier: ^0.0.8
     version: 0.0.8
+  '@fingerprintjs/fingerprintjs':
+    specifier: ^3.4.1
+    version: 3.4.2
   '@types/color':
     specifier: ^3.0.3
     version: 3.0.3
@@ -41,6 +44,9 @@ dependencies:
   dom-helpers:
     specifier: ^5.2.1
     version: 5.2.1
+  echarts-gl:
+    specifier: ^2.0.9
+    version: 2.0.9(echarts@5.3.3)
   echarts-liquidfill:
     specifier: ^3.1.0
     version: 3.1.0(echarts@5.3.3)
@@ -50,6 +56,9 @@ dependencies:
   echarts-wordcloud:
     specifier: ^2.0.0
     version: 2.0.0(echarts@5.3.3)
+  flv.js:
+    specifier: ^1.6.2
+    version: 1.6.2
   gsap:
     specifier: ^3.11.3
     version: 3.11.3
@@ -89,6 +98,9 @@ dependencies:
   video.js:
     specifier: ^7.20.3
     version: 7.21.4
+  videojs-flvjs-es6:
+    specifier: ^1.0.1
+    version: 1.0.1
   vue:
     specifier: ^3.2.31
     version: 3.2.37
@@ -113,6 +125,18 @@ dependencies:
   vuedraggable:
     specifier: ^4.1.0
     version: 4.1.0(vue@3.2.37)
+  xgplayer:
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.36.1)
+  xgplayer-flv:
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.36.1)(xgplayer@3.0.14)
+  xgplayer-hls:
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.36.1)(xgplayer@3.0.14)
+  xgplayer-mp4:
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.36.1)(xgplayer@3.0.14)
 
 devDependencies:
   '@commitlint/cli':
@@ -1158,6 +1182,12 @@ packages:
       - supports-color
     dev: true
 
+  /@fingerprintjs/fingerprintjs@3.4.2:
+    resolution: {integrity: sha512-3Ncze6JsJpB7BpYhqIgvBpfvEX1jsEKrad5hQBpyRQxtoAp6hx3+R46zqfsuQG4D9egQZ+xftQ0u4LPFMB7Wmg==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /@humanwhocodes/config-array@0.9.5:
     resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
     engines: {node: '>=10.10.0'}
@@ -2409,6 +2439,10 @@ packages:
     engines: {node: '>=6.0'}
     dev: true
 
+  /claygl@1.3.0:
+    resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==}
+    dev: false
+
   /clean-css@5.3.2:
     resolution: {integrity: sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==}
     engines: {node: '>= 10.0'}
@@ -2540,6 +2574,12 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
+  /concat-typed-array@1.0.2:
+    resolution: {integrity: sha512-aC878bxeWSlrY6h60cCDwBUXpKwovZrB7+C4+VHNO1CIXW2gBLxbQ757jWtOXUscLGgYI8R84N6uy9fTJPe+0g==}
+    engines: {node: '>=0.10.0'}
+    deprecated: 'WARNING: This package has been renamed to typed-array-concat.'
+    dev: false
+
   /connect-history-api-fallback@1.6.0:
     resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==}
     engines: {node: '>=0.8'}
@@ -2605,6 +2645,11 @@ packages:
       safe-buffer: 5.1.2
     dev: true
 
+  /core-js@3.36.1:
+    resolution: {integrity: sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==}
+    requiresBuild: true
+    dev: false
+
   /cosmiconfig-typescript-loader@2.0.1(@types/node@17.0.43)(cosmiconfig@7.0.1)(typescript@4.7.3):
     resolution: {integrity: sha512-B9s6sX/omXq7I6gC6+YgLmrBFMJhPWew7ty/X5Tuwtd2zOSgWaUdXjkuVwbe3qqcdETo60+1nSVMekq//LIXVA==}
     engines: {node: '>=12', npm: '>=6'}
@@ -2646,6 +2691,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypto-es@1.2.7:
+    resolution: {integrity: sha512-UUqiVJ2gUuZFmbFsKmud3uuLcNP2+Opt+5ysmljycFCyhA0+T16XJmo1ev/t5kMChMqWh7IEvURNCqsg+SjZGQ==}
+    dev: false
+
   /crypto-js@4.1.1:
     resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==}
     dev: false
@@ -2692,6 +2741,20 @@ packages:
     resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
     dev: false
 
+  /d@1.0.2:
+    resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      es5-ext: 0.10.64
+      type: 2.7.2
+    dev: false
+
+  /danmu.js@1.1.13:
+    resolution: {integrity: sha512-knFd0/cB2HA4FFWiA7eB2suc5vCvoHdqio33FyyCSfP7C+1A+zQcTvnvwfxaZhrxsGj4qaQI2I8XiTqedRaVmg==}
+    dependencies:
+      event-emitter: 0.3.5
+    dev: false
+
   /dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -2765,6 +2828,11 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /deepmerge@2.2.1:
+    resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /deepmerge@4.2.2:
     resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
     engines: {node: '>=0.10.0'}
@@ -2807,6 +2875,10 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
+    dev: false
+
   /detect-file@1.0.0:
     resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
     engines: {node: '>=0.10.0'}
@@ -2900,6 +2972,20 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /downloadjs@1.4.7:
+    resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==}
+    dev: false
+
+  /echarts-gl@2.0.9(echarts@5.3.3):
+    resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==}
+    peerDependencies:
+      echarts: ^5.1.2
+    dependencies:
+      claygl: 1.3.0
+      echarts: 5.3.3
+      zrender: 5.3.2
+    dev: false
+
   /echarts-liquidfill@3.1.0(echarts@5.3.3):
     resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
     peerDependencies:
@@ -3021,6 +3107,37 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /es5-ext@0.10.64:
+    resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
+    engines: {node: '>=0.10'}
+    requiresBuild: true
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.4
+      esniff: 2.0.1
+      next-tick: 1.1.0
+    dev: false
+
+  /es6-iterator@2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      es6-symbol: 3.1.4
+    dev: false
+
+  /es6-promise@4.2.8:
+    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
+    dev: false
+
+  /es6-symbol@3.1.4:
+    resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      d: 1.0.2
+      ext: 1.7.0
+    dev: false
+
   /esbuild@0.11.3:
     resolution: {integrity: sha512-BzVRHcCtFepjS9WcqRjqoIxLqgpK21a8J4Zi4msSGxDxiXVO1IbcqT1KjhdDDnJxKfe7bvzZrvMEX+bVO0Elcw==}
     hasBin: true
@@ -3265,6 +3382,16 @@ packages:
       - supports-color
     dev: true
 
+  /esniff@2.0.1:
+    resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      event-emitter: 0.3.5
+      type: 2.7.2
+    dev: false
+
   /espree@9.3.2:
     resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3310,6 +3437,17 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /event-emitter@0.3.5:
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+    dev: false
+
+  /eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+    dev: false
+
   /events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -3341,6 +3479,12 @@ packages:
       homedir-polyfill: 1.0.3
     dev: true
 
+  /ext@1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+    dependencies:
+      type: 2.7.2
+    dev: false
+
   /extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true
@@ -3490,6 +3634,13 @@ packages:
     resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==}
     dev: true
 
+  /flv.js@1.6.2:
+    resolution: {integrity: sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==}
+    dependencies:
+      es6-promise: 4.2.8
+      webworkify-webpack: 2.1.5
+    dev: false
+
   /follow-redirects@1.15.1:
     resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
     engines: {node: '>=4.0'}
@@ -4590,6 +4741,10 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
+  /next-tick@1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+    dev: false
+
   /no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
     dependencies:
@@ -5732,6 +5887,10 @@ packages:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
 
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+    dev: false
+
   /tsutils@3.21.0(typescript@4.6.3):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -5774,6 +5933,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /type@2.7.2:
+    resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
+    dev: false
+
   /typescript@4.6.3:
     resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==}
     engines: {node: '>=4.2.0'}
@@ -5912,6 +6075,10 @@ packages:
       videojs-vtt.js: 0.15.4
     dev: false
 
+  /videojs-flvjs-es6@1.0.1:
+    resolution: {integrity: sha512-wAI5ff2tZVW+uftTLyPmS38F4SHmMlxqBFOgXEBqMs2X0N4uIVQK0iCCv5XACXH+oc+mP70D23mJmT8KsoHx0g==}
+    dev: false
+
   /videojs-font@3.2.0:
     resolution: {integrity: sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==}
     dev: false
@@ -6261,6 +6428,10 @@ packages:
       - uglify-js
     dev: true
 
+  /webworkify-webpack@2.1.5:
+    resolution: {integrity: sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==}
+    dev: false
+
   /which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
@@ -6308,6 +6479,101 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /xgplayer-flv@3.0.14(core-js@3.36.1)(xgplayer@3.0.14):
+    resolution: {integrity: sha512-9mSBUbbzkJhFjQOaU8SvnEzDj4Y9tkHsW0IaIxCDi/DlDcHzSubdiuuTVNf1A5cgUSTnFHxwDJtzqVm6FhmTeg==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+      xgplayer: '>=3.0.1'
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+      xgplayer: 3.0.14(core-js@3.36.1)
+      xgplayer-streaming-shared: 3.0.14(core-js@3.36.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.36.1)
+    dev: false
+
+  /xgplayer-hls@3.0.14(core-js@3.36.1)(xgplayer@3.0.14):
+    resolution: {integrity: sha512-UiVDiDcIzQ6kiDZitbyXqRx5nX/Pi69S9Vfh5lc+6R8SsA2ZyvxWtGOQ6XfpZyXYHfl56JMbyNObOgMT1iRNLw==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+      xgplayer: 3.0.14
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+      xgplayer: 3.0.14(core-js@3.36.1)
+      xgplayer-streaming-shared: 3.0.14(core-js@3.36.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.36.1)
+    dev: false
+
+  /xgplayer-mp4-loader@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-cCPH7I/i+saP5i+vivfnu7Bekxm1sS3JlTzaqX2crUL9a4MfWi/r7Yumqsn52lyQGyb+lGKOsvbHeR3wTwUx1w==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+      xgplayer-streaming-shared: 3.0.14(core-js@3.36.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.36.1)
+    dev: false
+
+  /xgplayer-mp4@3.0.14(core-js@3.36.1)(xgplayer@3.0.14):
+    resolution: {integrity: sha512-EEZ3KtG7JbOBL33P+Uv98PaIft9tI9zw2rfyS7Sip57hT/9tJ2az4qz9qNSRcrrlLTo0DTYGR/JzADu7l/IyUQ==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+      xgplayer: '>=3.0.0'
+    dependencies:
+      concat-typed-array: 1.0.2
+      core-js: 3.36.1
+      deepmerge: 2.2.1
+      eventemitter3: 4.0.7
+      xgplayer: 3.0.14(core-js@3.36.1)
+      xgplayer-mp4-loader: 3.0.14(core-js@3.36.1)
+      xgplayer-streaming-shared: 3.0.14(core-js@3.36.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.36.1)
+    dev: false
+
+  /xgplayer-streaming-shared@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-XBXNjnMfFDl15kQfXNgmAkaDqRdN0PhxVFBm7+TezillpTdLmqj+HD90F6BargdZVJ4I20/YHYdb9qBg+hUDhg==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+    dev: false
+
+  /xgplayer-subtitles@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-w6H1h+g3kOI477kv2QBRMZe3M/1dHLXttHBwq4LwKTPGVQ19fLIDGwkfn+HeKwe1ocGDaaq96bS+l+BadnP9TA==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+    dev: false
+
+  /xgplayer-transmuxer@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-lMS2EwuA6tToCC4NuyJ5Ax0UDaaWU/YuaSkI/Bsj+vHkEzO42vgi2EerSPr91Moz05KhG/+4Vt8qMKUVFjhGTw==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      '@babel/runtime': 7.20.6
+      concat-typed-array: 1.0.2
+      core-js: 3.36.1
+      crypto-es: 1.2.7
+    dev: false
+
+  /xgplayer@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-TPS77hUIcM1zVx6FSpGG+OzfMwjwxxWihd+YxVx82DQ22QK60v8TXWSZlWISbmS1+fAlFneesvXDjwy60tC37w==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.36.1
+      danmu.js: 1.1.13
+      delegate: 3.2.0
+      downloadjs: 1.4.7
+      eventemitter3: 4.0.7
+      xgplayer-subtitles: 3.0.14(core-js@3.36.1)
+    dev: false
+
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}

 import { defHttp } from '@/utils/external/http/axios'
-import { ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse } from './model'
+import {CameraRecord, ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse} from './model'
 import { PaginationResult } from '/#/external/axios'
 import { isShareMode } from '@/views/share/hook'
 
@@ -88,7 +88,7 @@ export const getOrganizationList = (params?: OrganizationListItem) =>
 
 //获取视频列表
 export const getVideoList = (params?: object) =>
-  defHttp.get({
+  defHttp.get<{data: CameraRecord[]}>({
     url: Api.VIDEO,
     params
   })

@@ -54,3 +54,39 @@ export interface ProductAndDevice {
   deviceType: string
   transportType: string
 }
+
+
+export interface CameraRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  enabled: boolean;
+  tenantId: string;
+  videoUrl: string;
+  brand: string;
+  sn: string;
+  organizationId: string;
+  organizationName: string;
+  status: boolean;
+  accessMode: number;
+  playProtocol: number;
+  deviceId?: string;
+  channelId?: string;
+  params?: {
+    channelNo: string;
+    deviceId: string;
+  };
+  videoPlatformDTO?: VideoPlatformDTO;
+}
+
+interface VideoPlatformDTO {
+  enabled: boolean;
+  type: number;
+  host: string;
+  appKey: string;
+  appSecret: string;
+  ssl: number;
+}

+export {default as XGPlayer} from './src/index.vue'

+<script setup lang="ts">
+import Player, {Events, IError} from 'xgplayer';
+import {FlvPlugin} from 'xgplayer-flv';
+import Mp4Plugin from 'xgplayer-mp4';
+import {HlsPlugin} from 'xgplayer-hls';
+import {onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch} from 'vue';
+import PresetPlayer from 'xgplayer';
+import {IPlayerOptions} from 'xgplayer/es/player';
+import 'xgplayer/dist/index.min.css';
+import {StreamType, XGPlayerProps} from './types';
+import {isShareMode} from "@/views/share/hook";
+import {getJwtToken, getShareJwtToken} from "@/utils/external/auth";
+
+const props = withDefaults(defineProps<{
+  streamType?: StreamType;
+  autoPlay?: boolean;
+  url?: string;
+  withToken?: boolean;
+  config?: Omit<IPlayerOptions, 'url'>;
+}>(), {
+  streamType: 'auto',
+  autoPlay: true,
+  config: () => ({}),
+});
+
+const emits = defineEmits<{
+  (eventName: 'ready', player: PresetPlayer): void;
+  (eventName: 'onUnmounted', player: PresetPlayer): void;
+}>();
+
+function getStreamTypeByUrl(url = ''): StreamType | undefined {
+  if (url.endsWith('.m3u8')) return 'hls';
+  else if (url.endsWith('.mp4')) return 'mp4';
+  else if (url.endsWith('.flv')) {
+    return 'flv';
+  } else return;
+}
+
+const getPluginByStreamType = (): IPlayerOptions => {
+  let {url, withToken} = props;
+  let {streamType} = props;
+  streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
+
+  const liveConfig = {
+    targetLatency: 10,
+    maxLatency: 20,
+    disconnectTime: 0,
+    fetchOptions: withToken
+        ? {
+          headers: {
+            'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+          },
+        }
+        : {},
+  };
+  const config: IPlayerOptions = {
+    flv: liveConfig,
+    hls: liveConfig,
+  };
+  switch (streamType) {
+    case 'hls':
+      config.plugins = [HlsPlugin];
+      break;
+    case 'mp4':
+      config.plugins = [Mp4Plugin];
+      break;
+    case 'flv':
+      config.plugins = [FlvPlugin];
+      break;
+  }
+  return config;
+};
+
+const videoElRef = shallowRef<Nullable<HTMLDivElement>>();
+
+const playerRef = shallowRef<Nullable<PresetPlayer>>();
+
+const propsRef = ref<XGPlayerProps>({});
+
+const getPlayerConfig = computed<IPlayerOptions>(() => {
+  const {url, autoPlay, config} = props;
+
+  const basicConfig: IPlayerOptions = {
+    ...config,
+    ...propsRef,
+    url,
+    lang: 'zh',
+    isLive: true,
+    autoplay: autoPlay,
+    autoplayMuted: autoPlay,
+    ...getPluginByStreamType(),
+  };
+  return basicConfig;
+});
+
+function onDecodeError() {
+  console.warn('player happend decode error');
+  playerRef.value?.switchURL(props.url!);
+}
+
+function initializePlayer() {
+  if (unref(playerRef)) {
+    playerRef.value?.destroy?.();
+    playerRef.value = null;
+  }
+
+  const config = toRaw(unref(getPlayerConfig));
+
+  if (!unref(videoElRef)) return;
+
+  const player = (playerRef.value = new Player(Object.assign(config, {el: unref(videoElRef)})));
+
+  player.on(Events.READY, () => {
+    emits('ready', player);
+  });
+
+  player.setEventsMiddleware({
+    error: (event, callback) => {
+      const code = (
+          event as unknown as {
+            error: MediaError;
+          }
+      ).error.code;
+      if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+        if (!props.url) {
+          return;
+        }
+        callback();
+        return;
+      }
+
+      if (code === MediaError.MEDIA_ERR_DECODE) {
+        // 视频流可以播放 中途解码失败重载
+        if (playerRef.value?.isPlaying) {
+          onDecodeError();
+        }
+        return;
+      }
+
+      callback();
+    },
+  });
+}
+
+onMounted(() => {
+  initializePlayer();
+});
+
+onUnmounted(() => {
+  emits('onUnmounted', unref(playerRef)!);
+  playerRef.value?.destroy?.();
+});
+
+watch(
+    () => props.url,
+    () => {
+      initializePlayer();
+    }
+);
+
+defineExpose({
+  getPlayerInstance: () => unref(playerRef),
+});
+</script>
+
+<template>
+  <div ref="videoElRef"></div>
+</template>

+import { IPlayerOptions } from 'xgplayer/es/player';
+
+export type StreamType = 'flv' | 'mp4' | 'hls' | 'auto';
+export interface XGPlayerProps {
+  streamType?: StreamType;
+  autoPlay?: boolean;
+  url?: string;
+  withToken?: boolean;
+  config?: Omit<IPlayerOptions, 'url'>;
+}

-<template>
-  <n-spin size="medium" :show="showLoading"
-    :style="{background: '#000',width: baseSize?.w + 'px', height: baseSize?.h + 'px' }">
-    <template #description> 视频正在努力加载中...... </template>
-    <div>
-      <div ref="playerContainerElRef" class="go-content-box"
-        :style="{ width: baseSize?.w + 'px', height: baseSize?.h + 'px', background: '#000' }">
-
-      </div>
-    </div>
-  </n-spin>
-</template>
-<script setup lang="ts" name="VideoPlay">
-import { onMounted, ref, onUnmounted, watch, unref, PropType,  shallowRef } from 'vue'
-import videojs from 'video.js'
-import 'videojs-flvjs-es6'
-import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.min.css'
-import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
-import { isShareMode } from '@/views/share/hook'
-import { getOpenFlvPlayUrl, closeFlvPlay, getVideoControlStart } from '@/api/external/flvPlay'
-import { useFingerprint } from '@/utils/external/useFingerprint'
-import { GetResult } from '@fingerprintjs/fingerprintjs'
-import { AccessModeEnum, VideoPlayerType } from '../config'
-import { getVideoUrl } from '@/api/external/common'
-
-const props = defineProps({
-  sourceSrc: {
-    type: String
-  },
-  option: {
-    type: Object
-  },
-
-  baseSize: {
-    type: Object as PropType<{ w: number; h: number }>
-  },
-  autoPlay: {
-    type: Boolean
-  },
-  name: {
-    type: String
-  },
-  avatar: {
-    type: String
-  },
-  w: {
-    type: Number,
-    default: 300
-  },
-  h: {
-    type: Number,
-    default: 300
-  },
-  index: {
-    type: Number
-  }
-})
-
-
-const { getResult } = useFingerprint()
-
-const showLoading = ref<boolean>(false)
-
-const sourceSrc = ref<string | null>(props.sourceSrc || '')
-
-
-// video实例对象
-const videoPlayer = shallowRef<videojs.Player | null>(null)
-const playerContainerElRef = shallowRef<HTMLElement | null>(null)
-
-const fingerprintResult = ref<Nullable<GetResult>>(null)
-
-const isRtspProtocol = (url: string) => {
-  const reg = /^rtsp:\/\//g
-  return reg.test(url)
-}
-
-const getVideoTypeByUrl = (url = '') => {
-  if (!url) return;
-  try {
-    const { protocol, pathname } = new URL(url)
-    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
-    const reg = /[^.]\w*$/
-    const mathValue = pathname.match(reg) || []
-    const ext = (mathValue[0] as keyof typeof VideoPlayerType) || 'webm'
-    const type = VideoPlayerType[ext]
-    return type ? type : VideoPlayerType.webm
-  } catch (error) {
-    console.error(error)
-    return VideoPlayerType.webm
-  }
-}
-
-
-//options配置
-const options: VideoJsPlayerOptions & Recordable = {
-  language: 'zh-CN', // 设置语言
-  controls: true, // 是否显示控制条
-  preload: 'auto', // 预加载
-  autoplay: props.autoPlay ? true : false, // 是否自动播放
-  fluid: false, // 自适应宽高
-  poster: props?.avatar || '',
-  sources: [],
-  muted: props.autoPlay ? true : false,
-  userActions: {
-    hotkeys: true
-  },
-  techOrder: ['html5', 'flvjs'],
-  flvjs: {
-    mediaDataSource: {
-      isLive: true,
-      cors: true,
-      withCredentials: false,
-      hasAudio: false
-    },
-    config: {
-      autoCleanupSourceBuffer: true
-    }
-  }
-}
-
-
-async function getSource() {
-  fingerprintResult.value = await getResult()
-  let src = unref(sourceSrc) || ''
-  if (isRtspProtocol(unref(sourceSrc)!)) {
-    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
-  }
-  return [
-    {
-      type: getVideoTypeByUrl(src),
-      src
-    }
-  ]
-}
-
-//针对萤石云或者海康威视，根据视频id获取播放流地址
-const getVideoUrlById = async (id: string) => {
-  const res = await getVideoUrl(id)
-  if (!res) return
-  const { url } = res.data
-  return url
-}
-
-//针对gbt28181，根据设备id和通道号获取播放流地址
-const getVideoControlList = async (deviceId: string, channelId: string) => {
-  const {
-    data: { flv }
-  } = await getVideoControlStart({
-    deviceId,
-    channelId
-  })
-  return flv
-}
-
-//针对自定义地址，直接获取地址
-const getCustomUrl = (url: string) => {
-  return url
-}
-
-
-function createVideoElement() {
-  if (!unref(playerContainerElRef)) return
-  unref(playerContainerElRef)!.innerHTML = ''
-  const video = document.createElement('video')
-  video.setAttribute('crossOrigin', 'anonymous')
-  video.style.setProperty('width', '100%')
-  video.style.setProperty('height', '100%')
-  video.classList.add('video-js', 'my-video', 'vjs-theme-city', 'vjs-big-play-centered')
-  unref(playerContainerElRef)?.appendChild(video)
-  return video
-}
-
-
-// 初始化videojs
-const createVideoPlayer = async () => {
-  if (unref(videoPlayer)) dispose()
-
-  options.sources = await getSource()
-
-  if (isRtspProtocol(unref(sourceSrc) || '')) {
-    options.flvjs = {
-      ...(options.flvjs || {}),
-      config: {
-        headers: {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
-        }
-      }
-    }
-  }
-  const video = createVideoElement()
-  if (!video) return
-
-  videoPlayer.value = videojs(video!, options) //fix 修复videojs解决直播延时的问题
-
-  videoPlayer.value?.on('timeupdate', function () {
-    // 计算表最新推流的时间和现在播放器播放推流的时间
-    let differTime =
-      (unref(videoPlayer))!.buffered()?.end(0) -
-      (unref(videoPlayer))!.currentTime() // 差值小于1.5s时根据1倍速进行播放
-    if (differTime < 1.5) {
-      videoPlayer.value?.playbackRate(1)
-    } // 差值大于1.5s小于10s根据1.2倍速进行播放
-    if (differTime < 10 && differTime > 1.5) {
-      videoPlayer.value?.playbackRate(1.2)
-    } // 差值大于10s时进行重新加载直播流
-    if (differTime > 10) {
-      createVideoPlayer()
-    }
-  })
-}
-
-const getVideosUrl = async () => {
-  try {
-    showLoading.value = true
-    videoPlayer.value?.src('');
-    const { option } = props || {}
-    const { accessMode, id, channelId, deviceId, customUrl } = option || {}
-    if (accessMode === AccessModeEnum.Streaming) {
-      return await getVideoUrlById(id)
-    } else if (accessMode === AccessModeEnum.GBT28181) {
-      return await getVideoControlList(deviceId, channelId)
-    } else {
-      return await getCustomUrl(customUrl)
-    }
-  } finally {
-    showLoading.value = false
-  }
-}
-
-
-watch(() => props.option, async () => {
-  console.log(props, 'prop')
-  dispose()
-  sourceSrc.value = await getVideosUrl()
-  createVideoPlayer()
-})
-
-
-
-// 销毁
-function dispose() {
-  unref(videoPlayer)?.dispose()
-  videoPlayer.value = null
-}
-
-watch(
-  () => props.autoPlay,
-  async (newData: boolean) => {
-    if (newData) {
-      handleVideoPlay()
-    } else {
-      videoPlayer.value?.pause()
-    }
-  }
-)
-
-onMounted(async () => {
-  dispose()
-  sourceSrc.value = await getVideosUrl()
-  createVideoPlayer()
-})
-
-onUnmounted(() => {
-  if (props.sourceSrc) {
-    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
-  }
-  handleVideoDispose()
-})
-
-//播放
-const handleVideoPlay = () => videoPlayer.value?.play()
-
-//暂停和销毁
-const handleVideoDispose = () => videoPlayer.value?.dispose() && videoPlayer.value?.pause()
-
-</script>
-
-<style lang="scss" scoped>
-
-.go-content-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .my-video {
-    width: 100% !important;
-    height: 100% !important;
-    position: relative;
-  }
-}
-</style>
-<style>
-.vjs-poster {
-  background-size: 100% !important;
-}
-</style>

+<script lang="ts" setup>
+import {XGPlayer} from '@/components/Video'
+import {watch, ref} from "vue";
+import {StreamType} from "@/components/Video/src/types";
+import {getPlayUrl} from "@/packages/components/external/Informations/Mores/SingleCamera/config";
+import {CameraRecord} from "@/api/external/common/model";
+
+;
+
+const props = defineProps<{
+  dataset?: any
+  width: number
+  height: number
+}>()
+
+const loading = ref(false)
+const playUrl = ref<string>()
+const playType = ref<StreamType>()
+
+interface Dataset {
+  accessMode: number
+  autoPlay: boolean
+  channelId?: string
+  customUrl?: string
+  deviceId?: string
+  id?: string
+  playProtocol?: number
+}
+
+const handleGetPlayUrl = async (dataset: Dataset) => {
+  try {
+    loading.value = true
+    const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = dataset
+    if (!accessMode) return
+    const {type, url} = await getPlayUrl({
+      id: id,
+      accessMode: accessMode,
+      playProtocol: playProtocol,
+      videoUrl: customUrl,
+      params: {
+        deviceId: deviceId,
+        channelNo: channelId,
+      },
+    } as unknown as CameraRecord)
+    playUrl.value = url
+    playType.value = type
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+    () => props.dataset,
+    (newData: Dataset) => {
+      handleGetPlayUrl(newData)
+    },
+    {
+      immediate: true
+    }
+)
+</script>
+
+<template>
+  <NSpin :show="loading" class="player-spin">
+    <XGPlayer
+        :url="playUrl"
+        :stream-type="playType"
+        :auto-play="dataset.autoPlay"
+        :config="{width: width, height: height, poster: dataset.avatar}"
+    />
+  </NSpin>
+</template>
+
+<style lang="scss" scoped>
+.player-spin {
+  width: 100%;
+  height: 100%;
+  @include deep() {
+    .n-spin-content {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+</style>

-import VideoPlay from './VideoPlay.vue'
-
-export { VideoPlay as default }

@@ -53,6 +53,7 @@ export interface videoList {
   deviceId: string
   customUrl: string
   params: GBT28181Params
+  playProtocol?: number
 }
 
 export const option = {

@@ -120,15 +120,16 @@ const handleUpdateTreeValue = (e: string) => {
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
   if (!res) return
-  videoOptions.value = res?.data?.map((item: videoList) => ({
+  videoOptions.value = res?.data?.map((item) => ({
     label: item.name,
     value: item.id,
     id: item.id,
     accessMode: item.accessMode,
     customUrl: item.accessMode === AccessModeEnum.ManuallyEnter ? item.videoUrl: '', //参数只给自定义视频流使用
     channelId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.channelNo : '', //参数只给gbt28181使用
-    deviceId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.deviceId : '' //参数只给gbt28181使用
-  }))
+    deviceId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.deviceId : '', //参数只给gbt28181使用
+    playProtocol: item?.playProtocol
+  } as any))
 }
 
 //针对萤石云或者海康威视，根据视频id获取播放流地址

@@ -2,17 +2,7 @@
   <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="banner-box" ref="root">
     <div class="wrapper">
       <div v-for="(item, index) in option.dataset" :key="index" :class="item.className" :style="item.sty">
-        <VideoPlay
-          :autoPlay="item.autoPlay"
-          :option="item"
-          :name="item.name"
-          :avatar="item.avatar"
-          :key="item + index"
-          :sourceSrc="item.url"
-          :baseSize="{w,h}"
-          :index="index"
-        />
-        <span class="video-title">{{ item.name }}</span>
+        <VideoPlayer :key="item + index" :dataset="item" :width="w" :height="h"/>
       </div>
     </div>
     <a v-show="isShowSvg" href="javascript:;" class="left" @click="changeSlide('left')"></a>
@@ -20,11 +10,10 @@
   </div>
 </template>
 <script setup lang="ts" name="index">
-import { PropType, watch, toRefs, shallowReactive, onMounted, ref } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import 'video.js/dist/video-js.min.css'
-import { option as typeOption } from './config'
-import VideoPlay from './components'
+import {PropType, watch, toRefs, shallowReactive, onMounted, ref} from 'vue'
+import {CreateComponentType} from '@/packages/index.d'
+import {option as typeOption} from './config'
+import VideoPlayer from "@/packages/components/external/Informations/Mores/Camera/components/VideoPlayer.vue";
 
 const props = defineProps({
   chartConfig: {
@@ -35,9 +24,9 @@ const props = defineProps({
 
 const isShowSvg = ref(false)
 
-const { w, h } = toRefs(props.chartConfig.attr)
+const {w, h} = toRefs(props.chartConfig.attr)
 
-const { autoSwitch, interval } = toRefs(props.chartConfig.option)
+const {autoSwitch, interval} = toRefs(props.chartConfig.option)
 
 //暂定 any类型
 const option = shallowReactive<{ ['dataset']: any }>({
@@ -50,15 +39,15 @@ const computedFunc = (initial: number, source: Recordable[]) => {
   if (initial < 0) initial = 0
   if (Array.isArray(source)) {
     let len = source.length,
-      temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
-      temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
-      temp3 = initial,
-      temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
-      temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
+        temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
+        temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
+        temp3 = initial,
+        temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
+        temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
     return source?.map((item: Recordable, index: number) => {
       let transform = `translateX(-50%) scale(0.7)`,
-        zIndex = 0,
-        className = 'slide'
+          zIndex = 0,
+          className = 'slide'
       switch (index) {
         case temp3:
           transform = `translateX(-50%) scale(1)`
@@ -93,23 +82,23 @@ const computedFunc = (initial: number, source: Recordable[]) => {
 }
 
 watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    option.dataset = newData
-  },
-  {
-    immediate: true,
-    deep: true
-  }
+    () => props.chartConfig.option.dataset,
+    newData => {
+      option.dataset = newData
+    },
+    {
+      immediate: true,
+      deep: true
+    }
 )
 
 option.dataset = computedFunc(initial.value, option.dataset)
 
 watch(
-  () => initial.value,
-  newV => {
-    option.dataset = computedFunc(newV, option.dataset)
-  }
+    () => initial.value,
+    newV => {
+      option.dataset = computedFunc(newV, option.dataset)
+    }
 )
 
 // 处理自动轮播
@@ -155,17 +144,17 @@ function changeSlide(dir: string) {
 }
 
 watch(
-  () => autoSwitch.value,
-  (newV: boolean) => {
-    if (newV) {
-      autoPlay()
-    } else {
-      clearInterval(timer)
+    () => autoSwitch.value,
+    (newV: boolean) => {
+      if (newV) {
+        autoPlay()
+      } else {
+        clearInterval(timer)
+      }
+    },
+    {
+      immediate: true
     }
-  },
-  {
-    immediate: true
-  }
 )
 
 const handleMouseenter = () => {
@@ -181,6 +170,7 @@ const handleMouseleave = () => (isShowSvg.value = false)
     height: 100%;
     display: flex;
     overflow: hidden;
+
     .slide {
       width: 20%;
       height: 100%;
@@ -200,6 +190,7 @@ const handleMouseleave = () => (isShowSvg.value = false)
       }
     }
   }
+
   .arrow {
     position: absolute;
     top: 50%;
@@ -211,11 +202,13 @@ const handleMouseleave = () => (isShowSvg.value = false)
     background-color: white;
     opacity: 0.5;
   }
+
   a.left {
     @extend .arrow;
     background-image: url('./static/left.svg');
     left: 0px;
   }
+
   a.right {
     @extend .arrow;
     background-image: url('./static/right.svg');

-<template>
-  <div ref="playerContainerElRef" class="go-content-box"
-    :style="{ width: baseSize?.w + 'px', height: baseSize?.h + 'px', background: '#000' }">
-
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, onUnmounted, watch, unref, PropType, shallowRef } from 'vue'
-import videojs from 'video.js'
-import 'videojs-flvjs-es6'
-import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.min.css'
-import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
-import { isShareMode } from '@/views/share/hook'
-import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
-import { useFingerprint } from '@/utils/external/useFingerprint'
-import { GetResult } from '@fingerprintjs/fingerprintjs'
-import { VideoPlayerTypeEnum } from '../config'
-
-const props = defineProps({
-  sourceSrc: {
-    type: String
-  },
-  autoPlay: {
-    type: Boolean
-  },
-  name: {
-    type: String
-  },
-  avatar: {
-    type: String
-  },
-  baseSize: {
-    type: Object as PropType<{ w: number; h: number }>
-  }
-})
-
-const isRtspProtocol = (url: string) => {
-  const reg = /^rtsp:\/\//g
-  return reg.test(url)
-}
-
-const getVideoTypeByUrl = (url = '') => {
-  if (!url) return;
-  try {
-    const { protocol, pathname } = new URL(url)
-    if (protocol.startsWith('rtsp:')) return VideoPlayerTypeEnum.flv
-    const reg = /[^.]\w*$/
-    const mathValue = pathname.match(reg) || []
-    const ext = (mathValue[0] as keyof typeof VideoPlayerTypeEnum) || 'webm'
-    const type = VideoPlayerTypeEnum[ext]
-    return type ? type : VideoPlayerTypeEnum.webm
-  } catch (error) {
-    console.error(error)
-    return VideoPlayerTypeEnum.webm
-  }
-}
-
-// video实例对象
-const videoPlayer = shallowRef<videojs.Player | null>(null)
-const playerContainerElRef = shallowRef<HTMLElement | null>(null)
-
-const fingerprintResult = ref<Nullable<GetResult>>(null)
-
-//options配置
-const options: VideoJsPlayerOptions & Recordable = {
-  language: 'zh-CN', // 设置语言
-  controls: true, // 是否显示控制条
-  autoplay: !!props.autoPlay, // 是否自动播放
-  fluid: false, // 自适应宽高
-  poster: props?.avatar || '',
-  sources: [],
-  muted: !!props.autoPlay,
-  userActions: {
-    hotkeys: true
-  },
-  techOrder: ['html5', 'flvjs'],
-  flvjs: {
-    mediaDataSource: {
-      isLive: true,
-      cors: true,
-      withCredentials: false,
-      hasAudio: false
-    },
-    config: {
-      autoCleanupSourceBuffer: true
-    }
-  }
-}
-
-const { getResult } = useFingerprint()
-
-async function getSource() {
-  fingerprintResult.value = await getResult()
-  let src = props.sourceSrc || ''
-  if (isRtspProtocol(props.sourceSrc!)) {
-    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
-  }
-  return [
-    {
-      type: getVideoTypeByUrl(props.sourceSrc),
-      src
-    }
-  ]
-}
-
-function createVideoElement() {
-  if (!unref(playerContainerElRef)) return
-  unref(playerContainerElRef)!.innerHTML = ''
-  const video = document.createElement('video')
-  video.setAttribute('crossOrigin', 'anonymous')
-  video.style.setProperty('width', '100%')
-  video.style.setProperty('height', '100%')
-  video.classList.add('video-js', 'my-video', 'vjs-theme-city', 'vjs-big-play-centered')
-  unref(playerContainerElRef)?.appendChild(video)
-  return video
-}
-
-
-// 初始化videojs
-const createVideoPlayer = async () => {
-  if (unref(videoPlayer)) dispose()
-
-  options.sources = await getSource()
-
-  if (isRtspProtocol(props.sourceSrc || '')) {
-    options.flvjs = {
-      ...(options.flvjs || {}),
-      config: {
-        headers: {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
-        }
-      }
-    }
-  }
-  const video = createVideoElement()
-  if (!video) return
-
-  videoPlayer.value = videojs(video!, options) //fix 修复videojs解决直播延时的问题
-
-  videoPlayer.value?.on('timeupdate', function () {
-    // 计算表最新推流的时间和现在播放器播放推流的时间
-    let differTime =
-      (unref(videoPlayer))!.buffered()?.end(0) -
-      (unref(videoPlayer))!.currentTime() // 差值小于1.5s时根据1倍速进行播放
-    if (differTime < 1.5) {
-      videoPlayer.value?.playbackRate(1)
-    } // 差值大于1.5s小于10s根据1.2倍速进行播放
-    if (differTime < 10 && differTime > 1.5) {
-      videoPlayer.value?.playbackRate(1.2)
-    } // 差值大于10s时进行重新加载直播流
-    if (differTime > 10) {
-      createVideoPlayer()
-    }
-  })
-}
-
-// watch(
-//   () => props.sourceSrc,
-//   async () => {
-//     (props as any ).sourceSrc = ''
-//     if(!props.sourceSrc) return;
-//     await nextTick();
-//     if(unref(fingerprintResult)!.visitorId!) {
-//        closeFlvPlay(props.sourceSrc!, unref(fingerprintResult)!.visitorId!)
-//     }
-//     videoPlayer.value?.src('');
-//     createVideoPlayer() 
-
-//     if (props.sourceSrc) {
-//       reloadSource({ src: props.sourceSrc, type: getVideoTypeByUrl(props.sourceSrc) })
-//     }
-//   }
-// )
-
-watch(
-  () => props.autoPlay,
-  async (newData: boolean) => {
-    if (newData) {
-      handleVideoPlay()
-    } else {
-      videoPlayer.value?.pause()
-    }
-  },
-)
-
-// onMounted(() => {
-//   createVideoPlayer()
-// })
-
-onUnmounted(() => {
-  if (props.sourceSrc) {
-    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
-  }
-  handleVideoDispose()
-})
-
-
-function anewInit() {
-  createVideoPlayer()
-}
-
-function reloadSource(sources: string | videojs.Tech.SourceObject | videojs.Tech.SourceObject[]) {
-  if (!unref(videoPlayer)) return
-  unref(videoPlayer)?.pause()
-  unref(videoPlayer)?.src(sources)
-  unref(videoPlayer)?.load()
-  unref(videoPlayer)?.play()
-}
-
-function dispose() {
-  unref(videoPlayer)?.dispose()
-  videoPlayer.value = null
-}
-
-//播放
-const handleVideoPlay = () => videoPlayer.value?.play()
-
-//暂停和销毁
-const handleVideoDispose = () => videoPlayer.value?.dispose()
-
-defineExpose({
-  dispose,
-  reloadSource,
-  anewInit,
-})
-
-</script>
-
-<style lang="scss" scoped>
-.go-content-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .my-video {
-    width: 100% !important;
-    height: 100% !important;
-    position: relative;
-  }
-}
-</style>
-<style>
-.vjs-poster {
-  background-size: 100% !important;
-}
-</style>

-import VideoPlay from './VideoPlay.vue'
-
-export { VideoPlay }

@@ -2,6 +2,11 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { SingleCameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import {StreamType} from "@/components/Video/src/types";
+import {useFingerprint} from "@/utils/external/useFingerprint";
+import {getOpenFlvPlayUrl, getVideoControlStart} from "@/api/external/flvPlay";
+import {getVideoUrl} from "@/api/external/common";
+import {CameraRecord} from "@/api/external/common/model";
 
 export enum sourceTypeEnum {
   CUSTOM = 'custom',
@@ -13,6 +18,11 @@ export enum sourceTypeNameEnum {
   PLATFORM = '平台获取'
 }
 
+export enum FluoriteMideaProtocolEnum {
+  HLS = 2,
+  FLV = 4,
+}
+
 export enum VideoPlayerTypeEnum {
   m3u8 = 'application/x-mpegURL',
   mp4 = 'video/mp4',
@@ -32,6 +42,7 @@ export interface videoListInterface {
   deviceId: string
   customUrl: string
   params: GBT28181Params
+  playProtocol?: number
 }
 
 export interface GBT28181Params {
@@ -53,6 +64,7 @@ export interface Dataset {
   deviceId?: string
   id?: string
   value?: string
+  playProtocol?: number
 }
 
 export const option = {
@@ -70,3 +82,42 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public chartConfig = cloneDeep(SingleCameraConfig)
   public option = cloneDeep(option)
 }
+
+export const isRtspProtocol = (url: string) => {
+  const reg = /^rtsp:\/\//g;
+  return reg.test(url);
+};
+
+export async function getPlayUrl(
+    params: CameraRecord
+): Promise<{ url: string; type: StreamType }> {
+  const { accessMode } = params;
+  if (accessMode === AccessMode.ManuallyEnter) {
+    const { videoUrl } = params;
+    if (params.videoUrl) {
+      const isRTSPPlay = isRtspProtocol(videoUrl);
+
+      if (isRTSPPlay) {
+        const { getResult } = useFingerprint();
+        const fingerprint = await getResult();
+        return { url: getOpenFlvPlayUrl(videoUrl, fingerprint.visitorId), type: 'flv' };
+      } else {
+        return { url: videoUrl, type: 'auto' };
+      }
+    }
+  } else if (accessMode === AccessMode.GBT28181) {
+    const { deviceId, channelNo } = params?.params || {};
+    const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
+    return { url: result.data.flv, type: 'flv' };
+  } else {
+    const { id, playProtocol } = params;
+    const result = await getVideoUrl(id);
+    const type: StreamType =
+        playProtocol === FluoriteMideaProtocolEnum.FLV
+            ? 'flv'
+            : playProtocol === FluoriteMideaProtocolEnum.HLS
+                ? 'hls'
+                : 'auto';
+    return { url: result.data.url, type };
+  }
+}

@@ -97,7 +97,7 @@ const handleUpdateTreeValue = (value: string) => {
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
   if (!res) return
-  videoOptions.value = res?.data?.map((item: videoListInterface) => {
+  videoOptions.value = res?.data?.map((item) => {
     return {
       label: item.name,
       value: item.id,
@@ -105,8 +105,9 @@ const getVideoLists = async (organizationId: string) => {
       id: item.id,
       accessMode: item.accessMode,
       channelId: item.accessMode === AccessMode.GBT28181 ? item?.params?.channelNo : '', //参数只给gbt28181使用
-      deviceId: item.accessMode === AccessMode.GBT28181 ? item?.params?.deviceId : '' //参数只给gbt28181使用
-    }
+      deviceId: item.accessMode === AccessMode.GBT28181 ? item?.params?.deviceId : '', //参数只给gbt28181使用
+      playProtocol: item?.playProtocol
+    } as any
   })
 }
 

 <template>
   <div>
-    <n-spin size="medium" :show="showLoading" :content-style="{ background: 'red' }">
-      <template #description> 视频正在努力加载中...... </template>
-      <div>
-        <VideoPlay ref="videoPlayerRef" :baseSize="{ w, h }" :sourceSrc="sourceUrl" :autoPlay="option.autoplay"
-          :avatar="option.poster" />
-      </div>
+    <n-spin size="medium" :show="showLoading" class="player-spin">
+      <template #description> 视频正在努力加载中......</template>
+      <XGPlayer :url="sourceUrl" :stream-type="playType"
+                :config="{width: '100%', height: '100%', poster: option.poster}"
+                :auto-play="option.autoplay"/>
     </n-spin>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { AccessMode, Dataset, option as configOption, sourceTypeEnum } from './config'
-import { VideoPlay } from './components'
-import { getVideoControlStart } from '@/api/external/flvPlay'
-import { getVideoUrl } from '@/api/external/common'
+import {PropType, toRefs, shallowReactive, watch, ref} from 'vue'
+import {CreateComponentType} from '@/packages/index.d'
+import {Dataset, getPlayUrl, option as configOption} from './config'
+import {XGPlayer} from '@/components/Video'
+import {StreamType} from "@/components/Video/src/types";
+import {CameraRecord} from "@/api/external/common/model";
 
 const props = defineProps({
   chartConfig: {
@@ -26,9 +25,9 @@ const props = defineProps({
 
 const showLoading = ref(false)
 
-const { w, h } = toRefs(props.chartConfig.attr)
+const {w, h} = toRefs(props.chartConfig.attr)
 
-const { autoplay, dataset, poster, customVideoUrl } = toRefs(props.chartConfig.option as typeof configOption)
+const {autoplay, dataset, poster, customVideoUrl} = toRefs(props.chartConfig.option as typeof configOption)
 
 const option = shallowReactive({
   dataset: configOption.dataset,
@@ -37,87 +36,52 @@ const option = shallowReactive({
 })
 
 const sourceUrl = ref('')
-const videoPlayerRef = ref<InstanceType<typeof VideoPlay> | null>()
-
-// 针对萤石云或者海康威视，根据视频id获取播放流地址
-const getVideoUrlById = async (id: string) => {
-  const res = await getVideoUrl(id)
-  if (!res) return
-  const { url } = res.data
-  return url
-}
-
-// 针对gbt28181，根据设备id和通道号获取播放流地址
-const getVideoControlList = async (deviceId: string, channelId: string) => {
-  const {
-    data: { flv }
-  } = await getVideoControlStart({
-    deviceId,
-    channelId
-  })
-  return flv
-}
-
-// 针对自定义地址，直接获取地址
-const getCustomUrl = (url: string) => {
-  return url
-}
+const playType = ref<StreamType>()
 
 
 async function getPlaySource(params: Dataset) {
   try {
     showLoading.value = true
-
-    const { accessMode, id, deviceId, channelId, customUrl } = params
-    if (accessMode === AccessMode.Streaming && id) {
-      return await getVideoUrlById(id!)
-    } else if (accessMode === AccessMode.GBT28181 && deviceId && channelId) {
-      return await getVideoControlList(deviceId!, channelId!)
-    } else {
-      return getCustomUrl(customUrl!)
-    }
+    const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params
+    if (!accessMode) return
+    const {type, url} = await getPlayUrl({
+      id: id,
+      accessMode: accessMode,
+      playProtocol: playProtocol,
+      videoUrl: customUrl,
+      params: {
+        deviceId: deviceId,
+        channelNo: channelId,
+      },
+    } as unknown as CameraRecord)
+    sourceUrl.value = url
+    playType.value = type
   } finally {
     showLoading.value = false
   }
 }
 
 watch(
-  () => dataset?.value,
-  async (newData) => {
-    videoPlayerRef.value?.dispose()
-    sourceUrl.value = await getPlaySource(newData)
-    videoPlayerRef.value?.anewInit()
-  },
-  {
-    immediate: true
-  }
-)
-
-watch(
-  () => customVideoUrl.value,
-   (newData) => {
-     if(newData){
-      videoPlayerRef.value?.dispose()
-      sourceUrl.value = newData;
-      videoPlayerRef.value?.anewInit()
+    () => dataset?.value,
+    async (newData) => {
+      getPlaySource(newData)
+    },
+    {
+      immediate: true
     }
-  },
-  {
-    immediate: true
-  }
 )
 
-watch(
-  () => [poster.value, autoplay.value],
-  newData => {
-    option.poster = newData.at(-2) as string
-    option.autoplay = newData.at(-1) as boolean
-  },
-  {
-    immediate: true
-  }
-)
 </script>
 
 <style lang="scss" scoped>
+.player-spin {
+  width: 100%;
+  height: 100%;
+  @include deep() {
+    .n-spin-content {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>