React中iOS移动端视频音频播放问题排查求助

环境 #

• iOS Safari（最新版本）
• React 18
• TypeScript
• 视频文件：采用AAC音频编码的MP4格式

当前实现 #

const VideoPlayer: React.FC<VideoPlayerProps> = ({
  src,
  autoplay = true,
}) => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const isIOSDevice = isIOS(); // Custom iOS detection
  const [touchStartY, setTouchStartY] = useState<number | null>(null);
  const [touchStartTime, setTouchStartTime] = useState<number | null>(null);

  // Handle touch start event for gesture detection
  const handleTouchStart = (e: React.TouchEvent) => {
    setTouchStartY(e.touches[0].clientY);
    setTouchStartTime(Date.now());
  };

  // Handle touch end event with gesture validation
  const handleTouchEnd = (e: React.TouchEvent) => {
    if (touchStartY === null || touchStartTime === null) return;
    
    const touchEndY = e.changedTouches[0].clientY;
    const touchEndTime = Date.now();
    
    // Validate if it's a legitimate tap (not a scroll)
    const verticalDistance = Math.abs(touchEndY - touchStartY);
    const touchDuration = touchEndTime - touchStartTime;
    
    // Only trigger for quick taps (< 200ms) with minimal vertical movement
    if (touchDuration < 200 && verticalDistance < 10) {
      handleVideoInteraction(e);
    }
    
    setTouchStartY(null);
    setTouchStartTime(null);
  };

  // Simplified video interaction handler following Apple's guidelines
  const handleVideoInteraction = (e: React.MouseEvent | React.TouchEvent) => {
    console.log('Video interaction detected:', {
      type: e.type,
      timestamp: new Date().toISOString()
    });

    // Ensure keyboard is dismissed (iOS requirement)
    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }
    
    e.stopPropagation();
    
    const video = videoRef.current;
    if (!video || !video.paused) return;
    
    // Attempt playback in response to user gesture
    video.play().catch(err => console.error('Error playing video:', err));
  };

  // Effect to handle video source and initial state
  useEffect(() => {
    console.log('VideoPlayer props:', { src, loadingState });
    
    setError(null);
    setLoadingState('initial');
    setShowPlayButton(false); // Never show custom play button on iOS
    
    if (videoRef.current) {
      // Set crossOrigin attribute for CORS
      videoRef.current.crossOrigin = "anonymous";
      
      if (autoplay && !hasPlayed && !isIOSDevice) {
        // Only autoplay on non-iOS devices
        dismissKeyboard();
        setHasPlayed(true);
      }
    }
  }, [src, autoplay, hasPlayed, isIOSDevice]);

  return (
    <Paper
      shadow="sm"
      radius="md"
      withBorder
      onClick={handleVideoInteraction}
      onTouchStart={handleTouchStart}
      onTouchEnd={handleTouchEnd}
    >
      <video
        ref={videoRef}
        autoPlay={!isIOSDevice && autoplay}
        playsInline
        controls
        crossOrigin="anonymous"
        preload="auto"
        onLoadedData={handleLoadedData}
        onLoadedMetadata={handleMetadataLoaded}
        onEnded={handleVideoEnd}
        onError={handleError}
        onPlay={dismissKeyboard}
        onClick={handleVideoInteraction}
        onTouchStart={handleTouchStart}
        onTouchEnd={handleTouchEnd}
        {...(!isFirefoxBrowser && { 
          "x-webkit-airplay": "allow", 
          "x-webkit-playsinline": true, 
          "webkit-playsinline": true 
        })}
      >
        <source src={videoSrc} type="video/mp4" />
      </video>
    </Paper>
  );
};

已尝试方案 #

1. 音频编码兼容性

   • 将所有视频转换为AAC音频编码（已通过FFprobe验证）
   • 使用正确的编码参数：
     • 44.1kHz采样率
     • 2声道（立体声）
     • 128k比特率

2. iOS专属属性配置

   • 添加playsInline
   • 添加webkit-playsinline
   • 添加x-webkit-airplay="allow"
   • 移除自定义播放按钮，依赖原生控件
   • 确保配置正确的CORS头

3. 音频解锁尝试

if (isIOSDevice) {
  video.muted = true; // Start muted on iOS
  // Try to unmute on user interaction
  video.muted = false;
  video.play().catch(err => console.error('Error playing video:', err));
}

4. 苹果指南落地
   • 移除iOS端自定义播放控件
   • 使用原生视频控件进行用户交互
   • 确保音频播放由用户手势触发
   • 遵循苹果音频会话指南
   • 正确处理canplaythrough事件

当前表现 #

• iOS移动端视频可播放但无声音
• 原生视频控件中的静音/取消静音按钮无效
• 桌面浏览器及Android设备上音频正常
• 已确认视频采用AAC音频编码
• 无音频播放相关的控制台错误
• 用户交互未如预期触发音频

疑问 #

1. 是否遗漏了其他iOS专属要求？
2. 这是否与iOS音频会话处理有关？
3. React处理iOS视频元素是否存在已知问题？
4. 是否需要额外实现音频上下文初始化？

内容的提问来源于stack exchange，提问作者galilei