Проблемы с воспроизведением мобильного видео для 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>

   Совместимость аудиокодека /> 
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 /> Следуя рекомендациям Apple по аудиосессии < /li>
Правильно обрабатывать canplaythrough < /code> event < /li>
< /ul>
< /li>
< /ol>
Совместное поведение < /h2>

, но без звучания на подключение < /h2>

, но без звучания < /h2>

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

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

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