Проблемы с воспроизведением мобильного видео для 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>
   Что я попробовал < /h2>
  [list]
     Совместимость аудиокодека /> 
  44.1 кГц.  @Apple Documentation
  
   Добавлена ​​PlaySinline 

• Добавлен Webkit-playsinline
• Добавлен x-webkit-airplay = "Allow"
• /> Обеспечение правильных заголовков Cors < /li>
  < /ul>
  < /li>
  Попытки разблокировки звука < /strong> < /p>

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

  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));
  }
  

• Рекомендация Apple в реализации
  
  Удаленные элементы управления воспроизведением на iOS
• Использование нативного видео для взаимодействия пользователя
• andio adio audio adio audio />Following Apple's audio session guidelines
• Properly handling the canplaythrough event

[/list]
Current Behavior

[*]Video plays but without sound on iOS mobile
[*] Mute/Unduce Cutting в нативных управлениях видео не работает
[*] Аудио работает нормально на настольных браузерах и устройствах Android
[*] Видео подтверждается, что AAC Audio Codec
[*] Ошибки Audio adio playback [*] не связаны с Audio Playback
. /> < /ul>
Вопросы < /h2>

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

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