修复工作

rtsp-vue/src/views/video/device/component/cusPlayer.vue

@@ -47,6 +47,17 @@ export default {
 
       console.log('创建播放器，URL:', url, 'Element ID:', this.elId);
       this.isPlay = true;
+      
+      // 等待 DOM 元素渲染完成
+      this.$nextTick(() => {
+        const videoElement = document.getElementById(this.elId);
+        console.log('📺 DOM 元素:', videoElement);
+        
+        if (!videoElement) {
+          console.error('❌ 找不到视频容器元素:', this.elId);
+          return;
+        }
+        
         this.player = new FlvJsPlayer({
           id: this.elId,
           url: url,
@@ -54,7 +65,7 @@ export default {
           fluid: true,
           autoplay: true,
           isLive: true,
-        playsinline: false,
+          playsinline: true,
           screenShot: true,
           whitelist: [''],
           ignores: ['time'],
@@ -75,10 +86,20 @@ export default {
           } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
         });
         
+        console.log('✅ 播放器对象已创建:', this.player);
+        console.log('🎬 播放器底层视频元素:', this.player.video);
+        
         // 监听播放器错误
         this.player.on('error', (error) => {
           console.error('❌ 播放器错误:', error);
           console.error('错误详情:', JSON.stringify(error, null, 2));
+          console.error('播放器状态:', {
+            paused: this.player.video.paused,
+            currentTime: this.player.video.currentTime,
+            duration: this.player.video.duration,
+            readyState: this.player.video.readyState,
+            networkState: this.player.video.networkState
+          });
         });
         
         // 监听播放器就绪
@@ -104,11 +125,22 @@ export default {
         // 监听视频元数据加载
         this.player.on('loadedmetadata', () => {
           console.log('📊 视频元数据已加载');
+          console.log('视频信息:', {
+            width: this.player.video.videoWidth,
+            height: this.player.video.videoHeight,
+            duration: this.player.video.duration
+          });
         });
         
         // 监听视频可以播放
         this.player.on('canplay', () => {
-        console.log('✅ 视频可以播放');
+          console.log('✅ 视频可以播放，尝试播放...');
+          // 确保播放
+          this.player.play().then(() => {
+            console.log('▶️  播放已启动');
+          }).catch(err => {
+            console.error('播放失败:', err);
+          });
         });
         
         // 监听等待数据
@@ -116,49 +148,53 @@ export default {
           console.log('⏳ 等待视频数据...');
         });
         
-      // 自定义播放器按钮
+        // 监听数据接收
-      // let divStr =
+        this.player.on('progress', () => {
-      //   '<i class="btn-hover el-icon-camera button-screen-shot" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
+          console.log('📥 正在接收数据...');
-      //   '<i class="btn-hover el-icon-s-tools button-set" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>' +
+        });
-      //   '<i class="btn-hover el-icon-video-camera-solid button-history" style="font-size: 23px;margin-right: 10px;pointer-events: auto;"></i>';
         
+        // 监听播放失败
+        this.player.on('ended', () => {
+          console.log('⏹️  播放结束');
+        });
+        
+        // 输出播放器完整配置
+        console.log('🔧 播放器配置:', {
+          url: url,
+          elId: this.elId,
+          isLive: true,
+          autoplay: true
+        });
+        
+        // 自定义播放器按钮（移到 $nextTick 内部，确保 player 已创建）
         let divStr = '<i class="btn-hover el-icon-d-arrow-left button-playback" style="font-size: 23px;pointer-events: auto;"></i>';
-
+        let divClose = '<i class="btn-hover el-icon-close app-close-btn-c"></i>';
-      let divClose = '<i @click="closePlayer" class="btn-hover el-icon-close app-close-btn-c"></i>';
 
         let util = Player.util;
-      // let customBtn = util.createDom('div', divStr, {}, 'flex align-center justify-center app-player-button'); //'div', divStr, {}, 'class'
         let customBtn = util.createDom(
             'div',
             divStr,
             { style: 'width: 40px;heigth:40px;position: absolute;right: 155px;top: 7px;' },
             'flex align-center justify-center app-player-button'
-      ); //'div', divStr, {}, 'class'
+        );
         let closeBtn = util.createDom('div', divClose, {}, 'app-close-btn');
         let xgControls = this.player.root.querySelector('xg-controls');
         let xgError = this.player.root.querySelector('xg-error');
         xgControls.appendChild(customBtn);
         this.player.root.appendChild(closeBtn);
 
-      // let shot = customBtn.querySelector('.button-screen-shot');
-      // let set = customBtn.querySelector('.button-set');
-      // let history = customBtn.querySelector('.button-history');
         let closeBtnc = closeBtn.querySelector('.app-close-btn-c');
         let playback = customBtn.querySelector('.button-playback');
 
-      this.player.on('play', () => {});
         this.player.on('focus', () => {
           if (hasCloseBtn) {
             closeBtn.style.display = 'block';
           }
         });
-      this.player.on('ended', () => {});
         this.player.on('blur', () => {
           closeBtn.style.display = 'none';
         });
 
-      this.player.on('error', () => {});
-
         if (closeBtnc) {
           closeBtnc.addEventListener('click', () => {
             this.closePlayer();
@@ -167,10 +203,9 @@ export default {
 
         // 点击视频时间，设置selectIndex
         this.player.video.addEventListener('click', () => {
-        // this.selectIndex = index;
-        // this.$parent.setSelectIndex(index);
           this.$emit('clickPlayer', index);
         });
+      });
 
       // if (shot) {
       //   shot.addEventListener('click', () => {