Проблемы с воспроизведением мобильного видео для iOS в React ⇐ IOS

[Anonymous]

Я испытываю проблемы с воспроизведением звука в моем компоненте видеопроглерии React, специально предназначенных для мобильных устройств iOS (iPhone/iPad). Даже после реализации нескольких рекомендуемых решений, включая собственные руководящие принципы Apple, звук все еще не работает должным образом на сафари для iOS. Это работает совершенно нормально на Android. На iOS я гарантировал, что видео не является автоматическим (оно требует взаимодействия с пользователем). Вот все подробности: < /p>
среда < /h2>

• ios safari (последняя версия) < /li>
  React 18 < /li>
  typescript < /li>
  Видео -файлы: MP4 с AAC Audio Codec < /li> < /br /> video -файлы: mp4 с AAC Audio Codec < /li> < /br /> < /> < /> < /> < /> < /> < /br /> . Реализация < /h2>

  Код: Выделить всё

  const VideoPlayer: React.FC = ({
  src,
  autoplay = true,
  }) => {
  const videoRef = useRef(null);
  const isIOSDevice = isIOS(); // Custom iOS detection
  const [touchStartY, setTouchStartY] = useState(null);
  const [touchStartTime, setTouchStartTime] = useState(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 (
  
  
  
  
  
  );
  };
  < /code>
  [list]
    Рекомендации Apple в реализации < /strong>
  
   Удаленные элементы управления воспроизведением на iOS < /li>
   Использование нативных видео Руководство Apple по аудиосессии
  [*] Правильно обрабатывать CanplayThrough 

  event

[/list]
текущее поведение

• Видео -пьес, но без звука на мобильном ios
  
  , но без звука на мобильном ios
  
  , но без звука на ios
  
  . native video controls doesn't work
• Audio works fine on desktop browsers and Android devices
• Videos are confirmed to have AAC audio codec
• No console errors related to audio playback
• User interaction doesn't trigger audio as expected

Вопросы < /h2>

Есть ли какие-либо дополнительные требования к iOS, которые мне не хватает? Инициализация?>

Подробнее здесь: https://stackoverflow.com/questions/795 ... s-in-react