I'm experiencing issues with audio playback in my React video player component specifically on iOS mobile devices (iPhone/iPad). Even after implementing several recommended solutions, including Apple's own guidelines, the audio still isn't working properly on iOS Safari. It works completely fine on Android. On iOS, I ensured the video doesn't autoplay (it requires user interaction). Here are all the details:
Environment
iOS Safari (latest version)
React 18
TypeScript
Video files: MP4 with AAC audio codec
Current Implementation
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>
);
};
Apple's Guidelines Implementation
Removed custom play controls on iOS
Using native video controls for user interaction
Ensuring audio playback is triggered by user gesture
Following Apple's audio session guidelines
Properly handling the canplaythrough event
Current Behavior
Video plays but without sound on iOS mobile
Mute/unmute button in 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
Questions
Are there any additional iOS-specific requirements I'm missing?
Could this be related to iOS audio session handling?
Are there known issues with React's handling of video elements on iOS?
Should I be implementing additional audio context initialization?
Any insights or suggestions would be greatly appreciated!
Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
With most recent Safari update, our page started having some of it's core functionality broken while users access it on Private mode due to Fingerprinting protection.
The issue is that the code that breaks is our first-party code and I want understand why it is breaking and how to properly fix it.
One thing we discovered was that a service of ours that uses the same code base doesn't have these issues and current assumption is that their page bundles are served on the same domain as the actual page request, while ours is coming from a different one.
The other assumption was that the domain which we use for serving the bundles of the page are set on the domain that is flagged as tracking domain.
Is there some documentation on how Safari decides which code is allowed reading user inputs and which isn't and what is the appropriate approach to fix this issue as it would be possible that these changes get release as default in the future?
Topic:
Safari & Web
SubTopic:
General
Hi Team,
I'm using the simple mailto functionality in the demo page and when I tested the same via Safari mailto functionality is not working.
However, the same feature is working as expected via Chrome.
Demo: https://jsfiddle.net/xut0ed4y/
Kindly help.me to resolve this issue.
iOS18的app中加载了自己开发的H5页面,H5页面有个input输入框,每次输入框聚焦的时候,都会弹出键盘滑行键入的提示:“滑动手指将字母拼成词以快速键入”,应该怎么修改,达到不每次都弹出这个提示呢
Based on the "Build immersive web experiences with WebXR"-Video for visionOS there is no way to disable the consent prompts for entering an immersive experience or consent hand-tracking. For the microphone it's possible to "greenlight" specific websites for mic input, which works great.
I'd welcome it, if it were possible to add specific websites in the settings, in which those consent dialogs aren't shown each time.
In my opinion, the user interaction through a button that launches the experience would be sufficient to not disorient.
Hello,
We are setting up Apple Sign In in one of our non production websites but we keep getting a "oauth code says expired or revoked" error. We have created a brand new service ID and key for this but are still getting this error.
Topic:
Safari & Web
SubTopic:
General
I am calling fetch with a POST on page1 in Safari. No special cache parameters on the fetch call.
The response from the server is a 303 redirect to page2
The second page -- page2 -- is in my browser's cache with cache-control "public, max-age=31536000, immutable".
For some reason, the page2 redirect is causing a server hit to re-GET the second page every time instead of pulling from cache.
If I instead directly get the second page by doing a fetch on page2, there is no server hit.
If I do this on Chrome or Firefox, it behaves as I would expect, pulling page2 from the cache with no server hit.
In case it matters, the fetch is coming from within an iFrame. Also, if I change the original POST to a GET, the problem still happens.
I am using a pretty old version of Safari on my Mac, so I could chalk it up to that, but I am getting the same behavior with Safari on my iPhone with iOS 18.3.2
Any ideas?
Thanks.
現在新しいWebViewを使ってwebページを読み込むiPadプログラムを作成中ですが、読み込んだ後に部分のボタンをタップしても何も起こりません。safariで通常通りページを開いてボタンをタップするときちんと写真ライブラリ・カメラで撮るなどのポップアップが表示されます。下記がコードです。Webページは単純化のためにのみを配置しています。
struct SwiftUIWebView: View {
@State private var webPage = WebPage()
private let url = URL(string: "https://www.****.com/")!
var body: some View {
WebView(webPage)
.onAppear {
// URLを読み込む
webPage.load(URLRequest(url: url))
}
}
}
何か追加のコードが必要なのでしょうか?
If "Not Secure Connection Warnings" is enabled in the Settings > App > Safari, are no HTTP connections allowed? Setting NSAppTransportSecurity does not seem to apply either.
Topic:
Safari & Web
SubTopic:
General
I'm creating an iPad app using Xcode 26 Beta 6. I have the following simple code and web page, but when I tap the file selection button, nothing appears. Do I need to add any additional code?
code
struct SwiftUIWebView: View {
@State private var webPage = WebPage()
private let url = URL(string: "https://www.xxxx.com/")!
var body: some View {
WebView(webPage)
.onAppear {
webPage.load(URLRequest(url: url))
}
}
}
web page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</style>
</head>
<body>
<div id="container">
<input type="file" />
</div>
</body>
</html>
Hi all,
I need to detect if my web application (pure HTML / Javascript) is opened from:
Safari from a Mac
Safari from an iPad but by asking for the desktop version
I tried to check for many properties (including the navigator.useragent) but no difference were visible. Anyone could help me?
Thank you
Environment
• Device: any iPhone running iOS 26 Developer Beta 5 (23A5308g)
• Xcode: 16.3
Short description
The app crashes the moment the user tries to long-press to select text inside a WKWebView, double-tap an image with Text (magnifier appears)
The exception is CALayer position contains NaN. frame = (nan,0;0,48) chorPoint=(inf, 0) and it is thrown in the UI process.
Build & run any project that hosts a WKWebView. Inject the following CSS via script (this is what we do to suppress the native callout menu):
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds
configuration:[WKWebViewConfiguration new]];
NSString *js =
@"document.documentElement.style.webkitUserSelect='none';"
"document.documentElement.style.webkitTouchCallout='none';";
[webView evaluateJavaScript:js completionHandler:nil];
[self.view addSubview:webView];
Incident Identifier: EE6FB046-5087-4F15-A72D-A74965347A30
CrashReporter Key: 29e8e58e02a07557adb4ce3f463d764f3ce8bbd5
Hardware Model: iPhone16,1
Process: wallet [642]
Path: /private/var/containers/Bundle/Application/4B4E609A-C8BF-4C56-AB2A-1638249B98A5/wallet.app/wallet
Identifier: xxxxxxx
Version: xxxx
AppStoreTools: 16F7
AppVariant: 1:iPhone16,1:18
Code Type: ARM-64 (Native)
Role: Foreground
Parent Process: launchd [1]
Coalition: xxxxxx
Date/Time: 2025-08-06 12:05:24.0732 +0800
Launch Time: 2025-08-06 11:49:40.3802 +0800
OS Version: iPhone OS 26.0 (23A5308g)
Release Type: Beta
Baseband Version: 3.02.02
Report Version: 104
Exception Type: EXC_CRASH (SIGABRT)
Exception Codes: 0x0000000000000000, 0x0000000000000000
Termination Reason: SIGNAL 6 Abort trap: 6
Terminating Process: wallet [642]
Triggered by Thread: 0
Application Specific Information:
abort() called
Thread 0 Crashed:
0 libsystem_kernel.dylib 0x22da0f0cc __pthread_kill + 8
1 libsystem_pthread.dylib 0x1e097b7e8 pthread_kill + 268
2 libsystem_c.dylib 0x191361f1c abort + 124
3 libc++abi.dylib 0x182e7a808 __abort_message + 132
4 libc++abi.dylib 0x182e69484 demangling_terminate_handler() + 304
5 libobjc.A.dylib 0x182d7bf28 _objc_terminate() + 156
6 wallet 0x1068ff8c8 0x1046f4000 + 35698888
7 libc++abi.dylib 0x182e79bdc std::__terminate(void (*)()) + 16
8 libc++abi.dylib 0x182e7d314 __cxxabiv1::failed_throw(__cxxabiv1::__cxa_exception*) + 88
9 libc++abi.dylib 0x182e7d2bc __cxa_throw + 92
10 libobjc.A.dylib 0x182d7992c objc_exception_throw + 448
11 CoreFoundation 0x185e908d4 +[NSException raise:format:] + 128
12 QuartzCore 0x18678a874 CA::Layer::set_position(CA::Vec2<double> const&, bool) + 160
13 QuartzCore 0x1869a7270 -[CALayer setPosition:] + 52
14 UIKitCore 0x18c4ac564 -[UIView _backing_setPosition:] + 176
15 UIKitCore 0x18cefdf0c -[UIView setCenter:] + 220
16 UIKitCore 0x18cd9f794 -[_UIEditMenuContentPresentation _displayPreparedMenu:titleView:reason:didDismissMenu:configuration:] + 936
17 UIKitCore 0x18cd9f3c0 __54-[_UIEditMenuContentPresentation _displayMenu:reason:]_block_invoke + 104
18 UIKitCore 0x18ced1060 -[UIEditMenuInteraction _editMenuPresentation:preparedMenuForDisplay:completion:] + 384
19 UIKitCore 0x18cd9f2e4 -[_UIEditMenuContentPresentation _displayMenu:reason:] + 304
20 UIKitCore 0x18cd9f0d8 -[_UIEditMenuContentPresentation displayMenu:configuration:] + 64
21 UIKitCore 0x18ced0344 __58-[UIEditMenuInteraction presentEditMenuWithConfiguration:]_block_invoke + 260
22 UIKitCore 0x18ced1f8c __80-[UIEditMenuInteraction _prepareMenuAtLocation:configuration:completionHandler:]_block_invoke + 80
23 UIKitCore 0x18cc8403c __109-[UITextContextMenuInteraction _editMenuInteraction:menuForConfiguration:suggestedActions:completionHandler:]_block_invoke + 180
24 UIKitCore 0x18cc84584 __107-[UITextContextMenuInteraction _querySelectionCommandsForConfiguration:suggestedActions:completionHandler:]_block_invoke + 148
25 WebKit 0x1a05ae5d4 WTF::CompletionHandler<void (WebKit::DocumentEditingContext&&)>::operator()(WebKit::DocumentEditingContext&&) + 64
26 WebKit 0x1a05bb468 WTF::Detail::CallableWrapper<WTF::CompletionHandler<void (IPC::Connection*, IPC::Decoder*)> IPC::Connection::makeAsyncReplyCompletionHandler<Messages::WebPage::RequestDocumentEditingContext, WTF::CompletionHandler<void (WebKit::DocumentEditingContext&&)>>(WTF::CompletionHandler<void (WebKit::DocumentEditingContext&&)>&&, WTF::ThreadLikeAssertion)::'lambda'(IPC::Connection*, IPC::Decoder*), void, IPC::Connection*, IPC::Decoder*>::call(IPC::Connection*, IPC::Decoder*) + 196
27 WebKit 0x19fcf5db8 WTF::Detail::CallableWrapper<WebKit::AuxiliaryProcessProxy::sendMessage(WTF::UniqueRef<IPC::Encoder>&&, WTF::OptionSet<IPC::SendOption>, std::__1::optional<IPC::ConnectionAsyncReplyHandler>, WebKit::AuxiliaryProcessProxy::ShouldStartProcessThrottlerActivity)::$_1, void, IPC::Connection*, IPC::Decoder*>::call(IPC::Connection*, IPC::Decoder*) + 64
28 WebKit 0x19fce54f0 IPC::Connection::dispatchMessage(WTF::UniqueRef<IPC::Decoder>) + 340
29 WebKit 0x19fcf5aa0 IPC::Connection::dispatchIncomingMessages() + 536
30 JavaScriptCore 0x19a8f85d4 WTF::RunLoop::performWork() + 552
31 JavaScriptCore 0x19a8f838c WTF::RunLoop::performWork(void*) + 36
32 CoreFoundation 0x185da6230 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 28
33 CoreFoundation 0x185da61a4 __CFRunLoopDoSource0 + 172
34 CoreFoundation 0x185d83c6c __CFRunLoopDoSources0 + 232
35 CoreFoundation 0x185d598b0 __CFRunLoopRun + 820
36 CoreFoundation 0x185d58c44 _CFRunLoopRunSpecificWithOptions + 532
37 GraphicsServices 0x224ce0498 GSEventRunModal + 120
38 UIKitCore 0x18b6c84b8 -[UIApplication _run] + 792
39 UIKitCore 0x18b66cbc0 UIApplicationMain + 336
40 wallet 0x1046f8558 0x1046f4000 + 17752
41 dyld 0x182dcdb18 start + 6332
I would like to know if there is a way to disable Smart Punctuation from the webpage rather than requiring the user to do so from the settings. Adding a "inputmode=verbatim" attribute to the input HTML tags for my webpage did that for all the web browsers I tested on Windows, Ubuntu, Android, and MacOS. I tested Chrome and Firefox on all platforms, as well as Edge on Windows and Safari on Mac and iOS. So far the only time it did not disable Smart Punctuation was on Safari on iOS, but it did on MacOS.
While implementing Apple Maps into our web application, I have a scenario where I want to be able to drag and move some of my custom annotations around. While that is working, when "picking up" the annotation before dragging it, there is an animation which I believe is to represent the human interaction of picking up a pin from a map, I would like to cancel that animation and thought that would be possible by calling preventDefault() in the emitted long-press event, which the documentation states that annotations should emit if they are draggable. The thing is that I don't get this event to emit when long pressing an annotation. So I believe that I have found a bug.
It's in this paragraph in the documentation https://developer.apple.com/documentation/mapkitjs/handling-map-events#Respond-to-map-interaction-events
A long press occurs on the map outside an annotation. A long press may be the beginning of a panning or pinching gesture on the map. You can prevent the gesture from starting by calling the preventDefault() method of the event. Annotations need to be draggable to dispatch long-press events.
In anybody else experiencing this or do you see any clear fix for this? Maybe there is another way to cancel that "picking up the annotation for dragging" animation. I have seemed to try anything else.
Hi,
I’m working with the SFExtensionProfileKey in my Safari Web Extension. As I understand it, this key is to get the UUID of the profile currently in use. However, it seems to be missing (no key in userInfo) when the default profile is active. Also, I haven’t found any API to get a profile’s human-readable name or list all available profiles.
Could someone clarify:
If the value of SFExtensionProfileKey is absent, can I safely assume the default profile is in use?
Is there a supported way to get a profile’s display name?
Does Safari expose an API for getting all profiles?
Thanks in advance for your insights!
When we embed some of the youtube videos are unable to load in the Mobile app but at the same time it works in Website. I need to allow it in both places.
I have tried both embed and native sdk for youtube in iOS.
When i use adjust redirect:
https://app.adjust.com/xxxxxx?label=xxxxxx&redirect=http%3A%2F%2Fwww.testingmcafeesites.com%2Ftestcat_bu.html
It open 2 links:
https://Fwww.testingmcafeesites.com
then http://www.testingmcafeesites.com/testcat_bu.html
And in my app use redirect link for open a web page. But content in domain url like https://www.testingmcafeesites.com/ not be set. So it talke long time often 1 minute for finish request in first link.
It hapen only in ios 18 i tested in ios 17 and ios 16 it open one link only.
Hi!
I'm working on a web extension for Safari and I need to send messages from the containing application to JavaScript. For this I use the method
class func dispatchMessage(
withName messageName: String,
toExtensionWithIdentifier identifier: String,
userInfo: [String : Any]? = nil
) async throws
of the SFSafariApplication class. If the site is opened in Safari in normal mode, everything works as expected. However, if the site is "docked", the messages are not transmitted to this "Web App".
WebRTC and Web Audio are essential for modern web applications, powering everything from real-time voice communication to accessibility tools. However, in iOS Safari, these technologies are suspended as soon as the screen locks or Safari goes into the background. This makes web-based calling, live audio spaces, broadcast sessions and assistive applications unreliable for iOS users.
Why This Matters:
It’s impractical and inefficient. Asking users to keep their screen on to continue a WebRTC call wastes more battery, as the display is one of the most power-intensive components of a device. Allowing WebRTC audio to run in the background would be more battery-efficient than forcing the screen to stay lit for extended periods.
Competing platforms allow WebRTC to run in the background. Safari’s restriction puts web-based applications at a disadvantage compared to native apps.
Many industries depend on persistent WebRTC audio, including telehealth, live broadcasting, and accessibility tools.
This restriction forces developers to build native iOS apps instead of using the open web, limiting web innovation and increasing development costs.
Proposed Solution:
Apple could implement an explicit user permission for background WebRTC, similar to how background audio playback is already handled for media apps. This would balance user security with the need for uninterrupted real-time communication—without forcing users to keep their screens on unnecessarily.
I would love to hear if anyone has found workarounds or if Apple has commented on potential improvements in future iOS versions.
Topic:
Safari & Web
SubTopic:
General
Hello Apple Developer Team,
I would love to see iCloud Keychain Autofill and Touch ID support extended to Chromium-based browsers on macOS (such as Ecosia, Brave, or Vivaldi).
Currently, Safari allows autofill of passwords using Touch ID, but when using other browsers, I have to manually copy-paste credentials from Keychain Access, which is time-consuming.
Would it be possible for Apple to provide an API or framework that allows non-WebKit browsers to integrate iCloud Keychain autofill while keeping security intact?
This feature would make macOS more convenient for users who prefer alternative browsers while keeping security standards high.
Thanks in advance for considering this!
Best regards, Kilian