类型：开发

描述：

src/components/HlsPlayer/index.vue

@@ -2,6 +2,7 @@
   <div v-show="isActive" class="myVideo-container">
     <video
       class="myVideo"
+      id="video"
       ref="videoElement"
       muted
       playsinline
@@ -16,7 +17,7 @@
 
 <script>
   import Hls from 'hls.js'
-
+  import mpegtsjs from 'mpegts.js'
   export default {
     name: 'HlsPlayer',
     props: {
@@ -162,55 +163,78 @@
         if (this.hls) {
           this.immediateCleanup()
         }
-        this.hls = new Hls({
-          // 内存优化配置
-          maxBufferSize: 0, // 降低缓冲区大小（15MB）
-          maxBufferLength: 0.1, // 更小的缓冲窗口
-          liveSyncDuration: 1, // 紧跟直播点
-          liveMaxLatencyDuration: 5, // 最大延迟5秒
-          liveDurationInfinity: true,
-          lowLatencyMode: true, // 启用低延迟模式
-          maxMaxBufferLength: 60,
-          backBufferLength: 1, // 减少保留的缓冲数据
-          manifestLoadingTimeOut: 10000,
-          manifestLoadingMaxRetry: 5,
-          fragLoadingTimeOut: 5000,
-          fragLoadingMaxRetry: 2,
-          enableWorker: true, // 启用Web Worker
-          recycleVideoFrames: true, // 启用帧回收
+        if(this.url.startsWith('ws')){
+          const videoElement = document.getElementById('video')
+          const player = mpegtsjs.createPlayer({
+            url: this.url,
+            type: 'flv',
+            isLive: true,
+            hasAudio: false
+          })
+          player.attachMediaElement(videoElement)
+          player.load()
+          player.play()
 
-          startLevel: -1,
-          autoStartLoad: true,
-          maxBufferHole: 2, // 允许更大的时间缺口
-          highBufferWatchdogPeriod: 4, // 延长监控周期
-          nudgeMaxRetry: 5, // 增加微调重试次数
-          nudgeOffset: 0.05, // 微调步长（秒）
-          jumpGaps: false,
-          stallThreshold: 1000
-        })
+          // 错误处理和重连机制
+          player.on('error', (err) => {
+            // 3 秒后尝试重新加载
+            setTimeout(() => {
+              player.load()
+              player.play()
+            }, 3000)
+          })
+        }else{
+          this.hls = new Hls({
+            // 内存优化配置
+            maxBufferSize: 0, // 降低缓冲区大小（15MB）
+            maxBufferLength: 0.1, // 更小的缓冲窗口
+            liveSyncDuration: 1, // 紧跟直播点
+            liveMaxLatencyDuration: 5, // 最大延迟5秒
+            liveDurationInfinity: true,
+            lowLatencyMode: true, // 启用低延迟模式
+            maxMaxBufferLength: 60,
+            backBufferLength: 1, // 减少保留的缓冲数据
+            manifestLoadingTimeOut: 10000,
+            manifestLoadingMaxRetry: 5,
+            fragLoadingTimeOut: 5000,
+            fragLoadingMaxRetry: 2,
+            enableWorker: true, // 启用Web Worker
+            recycleVideoFrames: true, // 启用帧回收
 
-        this.hls.attachMedia(this.video)
-        this.hls.loadSource(this.url)
+            startLevel: -1,
+            autoStartLoad: true,
+            maxBufferHole: 2, // 允许更大的时间缺口
+            highBufferWatchdogPeriod: 4, // 延长监控周期
+            nudgeMaxRetry: 5, // 增加微调重试次数
+            nudgeOffset: 0.05, // 微调步长（秒）
+            jumpGaps: false,
+            stallThreshold: 1000
+          })
 
-        // 事件处理
-        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          this.loading = false
-          this.retryCount = 0
-          this.safePlay()
-        })
-        this.hls.on(Hls.Events.ERROR, (event, data) => {
-			console.log('核心视频错误',data.type)
-		  // this.hls.startLoad(); //重连
-		    if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
-		      console.error('缓冲停滞错误，尝试重新加载视频');
-		      this.hls.startLoad(); // 尝试重新加载视频
-		    } 
-          this.handleHlsError(data)
-        })
+          this.hls.attachMedia(this.video)
+          this.hls.loadSource(this.url)
+
+          // 事件处理
+          this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            this.loading = false
+            this.retryCount = 0
+            this.safePlay()
+          })
+          this.hls.on(Hls.Events.ERROR, (event, data) => {
+            console.log('核心视频错误',data.type)
+            // this.hls.startLoad(); //重连
+            if (data.type === Hls.ErrorTypes.BUFFER_STALLED_ERROR) {
+              console.error('缓冲停滞错误，尝试重新加载视频');
+              this.hls.startLoad(); // 尝试重新加载视频
+            }
+            this.handleHlsError(data)
+          })
+
+          this.hls.on(Hls.Events.BUFFER_EOS, () => {
+            this.cleanupNetworkResources()
+          })
+        }
 
-        this.hls.on(Hls.Events.BUFFER_EOS, () => {
-          this.cleanupNetworkResources()
-        })
       },
 	initVideo() {
 	    this.beforeDestroy()
@@ -221,7 +245,7 @@
 		})
 	    this.hls.attachMedia(this.video)
 	    this.hls.loadSource(this.url)
-	    
+
 	    // 事件处理
 	    this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
 	      this.loading = false
@@ -232,7 +256,7 @@
 	      this.hls.startLoad(); //重连
 	      this.handleHlsError(data)
 	    })
-	    
+
 	    this.hls.on(Hls.Events.BUFFER_EOS, () => {
 	      this.cleanupNetworkResources()
 	    })