test(inspectiontask/index.vue): 测试：勤策移动端_售点稽查_视频自动播放问题

src/views/mobile/pages/audit_activity/sales_point_inspection/examine/inspectionTask/index.vue

@@ -84,8 +84,12 @@
                     ref="videoRef"
                     alt=""
                     muted
-                    autoplay
-                    class="preview-media" />
+                    playsinline
+                    preload="metadata"
+                    :poster="getVideoPoster(url)"
+                    class="preview-media"
+                    @loadeddata="onVideoLoadedData(videoRef)" />
+
                   <div class="play-hint"
                     @click.stop="showVideoFullscreen(url)">
                   </div>
@@ -483,13 +487,139 @@ const currentVideo = ref(null);
 // 显示视频全屏预览
 const videoRef = ref(null);
 const isPlaying = ref(false);
+// const showVideoFullscreen = async (url) => {
+//   console.log('播放视频')
+//   const video = videoRef.value;
+//   if (!video) return;
+
+//   try {
+//     // 控制播放/暂停
+//     if (video.paused) {
+//       await video.play();
+//       isPlaying.value = true;
+//     } else {
+//       video.pause();
+//       isPlaying.value = false;
+//     }
+
+//     // 请求全屏（跨浏览器兼容）
+//     if (!document.fullscreenElement) {
+//       // 尝试标准API和各种浏览器前缀
+//       if (video.requestFullscreen) {
+//         await video.requestFullscreen().catch(err => {
+//           console.error('标准全屏API失败:', err);
+//         });
+//       }
+//       // iOS Safari兼容
+//       else if (video.webkitEnterFullscreen) {
+//         // iOS 12及以下版本专用API
+//         video.webkitEnterFullscreen();
+//       }
+//       else if (video.webkitRequestFullscreen) {
+//         await video.webkitRequestFullscreen().catch(err => {
+//           console.error('WebKit全屏API失败:', err);
+//         });
+//       }
+//       // 如果所有全屏API都失败，至少确保视频可以播放
+//     }
+//   } catch (err) {
+//     console.error('视频操作失败:', err);
+//     // 失败时提供降级体验
+//     try {
+//       await video.play();
+//       isPlaying.value = true;
+//     } catch (innerErr) {
+//       console.error('降级播放也失败:', innerErr);
+//     }
+//   }
+// };
+
+// 视频相关状态
+const videoPosters = ref({});
+const isWebView = ref(false);
+// 组件挂载时检测环境
+onMounted(() => {
+  detectEnvironment();
+});
+
+// 检测是否在webView中
+const detectEnvironment = () => {
+  // 检测是否在iOS设备上
+  const isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+  
+  // 检测是否在webView中 - 可以根据实际项目中的webView特征调整
+  // 这里使用了一些常见的webView特征检测方法
+  const isInWebView = () => {
+    // iOS webView检测
+    if (isiOS) {
+      // 检查是否存在UIWebView特有的属性
+      const hasUIWebViewProperty = typeof navigator.standalone !== 'undefined' && !navigator.standalone;
+      // 检查userAgent中是否包含特定App的标识
+      const hasCustomUserAgent = /AppName|CustomWebView/i.test(navigator.userAgent);
+      
+      return hasUIWebViewProperty || hasCustomUserAgent;
+    }
+    return false;
+  };
+  
+  isWebView.value = isInWebView();
+};
+
+// 获取视频海报图
+const getVideoPoster = (url) => {
+  // 如果已经有缓存的海报图，则直接返回
+  if (videoPosters.value[url]) {
+    return videoPosters.value[url];
+  }
+  
+  // 为iOS设备生成一个临时海报图
+  if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
+    // 可以返回一个默认的视频占位图
+    // 或者更好的方法是使用视频的第一帧作为海报（需要额外处理）
+    return 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%22100%25%22 height%3D%22100%25%22%3E%3Crect width%3D%22100%25%22 height%3D%22100%25%22 fill%3D%22%23000%22%2F%3E%3Cpath d%3D%22M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z%22 fill%3D%22%23999%22%2F%3E%3C%2Fsvg%3E';
+  }
+  
+  return '';
+};
+
+// 视频数据加载完成后触发
+const onVideoLoadedData = (videoRef) => {
+  const video = videoRef.value;
+  if (!video) return;
+  
+  // 对于非webView环境，可以考虑预加载视频的第一帧作为海报
+  if (!isWebView.value) {
+    try {
+      // 尝试获取视频的第一帧作为海报图
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      
+      // 将canvas转换为图片URL并缓存
+      const posterUrl = canvas.toDataURL('image/jpeg');
+      videoPosters.value[video.src] = posterUrl;
+      video.poster = posterUrl;
+    } catch (error) {
+      console.error('生成视频海报失败:', error);
+    }
+  }
+  
+  // 如果是webView环境，确保视频不会自动播放
+  if (isWebView.value) {
+    video.pause();
+  }
+};
+
+// 修改showVideoFullscreen函数，添加环境检测逻辑
 const showVideoFullscreen = async (url) => {
-  console.log('播放视频')
+  console.log('播放视频');
   const video = videoRef.value;
   if (!video) return;
 
   try {
-    // 控制播放/暂停
+    // 先尝试播放视频
     if (video.paused) {
       await video.play();
       isPlaying.value = true;
@@ -498,38 +628,56 @@ const showVideoFullscreen = async (url) => {
       isPlaying.value = false;
     }
 
-    // 请求全屏（跨浏览器兼容）
+    // 然后尝试全屏（跨浏览器兼容）
     if (!document.fullscreenElement) {
-      // 尝试标准API和各种浏览器前缀
-      if (video.requestFullscreen) {
-        await video.requestFullscreen().catch(err => {
-          console.error('标准全屏API失败:', err);
-        });
-      } 
-      // iOS Safari兼容
-      else if (video.webkitEnterFullscreen) {
-        // iOS 12及以下版本专用API
-        video.webkitEnterFullscreen();
-      }
-      else if (video.webkitRequestFullscreen) {
-        await video.webkitRequestFullscreen().catch(err => {
-          console.error('WebKit全屏API失败:', err);
-        });
-      }
-      // 如果所有全屏API都失败，至少确保视频可以播放
+      await requestFullscreen(video).catch(err => {
+        console.error('全屏请求失败，但不影响播放:', err);
+      });
     }
   } catch (err) {
     console.error('视频操作失败:', err);
-    // 失败时提供降级体验
-    try {
-      await video.play();
-      isPlaying.value = true;
-    } catch (innerErr) {
-      console.error('降级播放也失败:', innerErr);
-    }
   }
 };
 
+// 跨浏览器请求全屏（保留之前的实现）
+const requestFullscreen = (element) => {
+  if (!element) return Promise.reject(new Error('Element not found'));
+  
+  const methods = [
+    // 标准API
+    () => element.requestFullscreen(),
+    // WebKit (Safari, Chrome) 
+    () => element.webkitRequestFullscreen(),
+    // iOS Safari特定API
+    () => {
+      if (element.webkitEnterFullscreen) {
+        element.webkitEnterFullscreen();
+        return Promise.resolve();
+      }
+      return Promise.reject(new Error('webkitEnterFullscreen not supported'));
+    }
+  ];
+  
+  // 尝试各种方法
+  return new Promise((resolve, reject) => {
+    for (const method of methods) {
+      try {
+        const result = method();
+        if (result && result.then) {
+          result.then(resolve).catch(() => {});
+        } else {
+          resolve();
+          return;
+        }
+      } catch (err) {
+        // 尝试下一个方法
+        continue;
+      }
+    }
+    reject(new Error('All fullscreen methods failed'));
+  });
+};
+
 // 关闭视频全屏预览
 const closeVideoFullscreen = () => {
   videoDialogVisible.value = false;