[Flutter Web] Video with Soundtrack Fails to Play on iOS Physical Devices

[jbaptisteroesch]

Description:

There is an issue with video playback in Flutter Web apps on iOS physical devices. Specifically, videos with soundtracks fail to play on both Safari and Chrome when tested on iOS physical devices. The same video works perfectly on the following platforms:

• iOS emulator (Safari and Chrome)
• Web desktop browsers
• Android (Chrome and other browsers)

The project is a Flutter web-only app. When the video file includes an audio track, the video simply does not start playing on physical iOS devices. No explicit errors are shown in the browser console.

Expected Behavior:

• The video with an audio track should play on iOS physical devices in the same way that it works on other platforms and on the iOS emulator.

Actual Behavior:

• The video fails to start playing on iOS physical devices (Safari and Chrome), even though it plays fine on desktop browsers, Android devices, and the iOS emulator.
• I have created a live test setup for this issue, which can be accessed here: test the issue here.

Steps to Reproduce:

• Create a simple Flutter Web app with a video player (such as video_player).
• Add an HLS stream or any video with an audio track.
• Run the app and test it on the following platforms:
• iOS emulator (works fine)
• Web desktop (works fine)
• Android devices (works fine)
• iOS physical devices (Safari and Chrome) → Does not play the video

Here’s a minimal reproducible code example:

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(VideoPlayerApp());
}

class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HLS Video Player Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController? _controller;
  bool _isInitialized = false;

  @override
  void initState() {
    super.initState();
    // Use an example HLS stream
    _controller = VideoPlayerController.networkUrl(
      Uri.parse('https://media.staging.safetrooper.com/ec8d3403-54df-4a41-b56f-ff7155107234/vid-9efda2a7-9f19-4d99-8b48-fd480dd9a0f9/video/1/manifest.m3u8'), // Example HLS stream
    )..initialize().then((_) {
      setState(() {
        _isInitialized = true; // Update the UI once the video is initialized
      });
    }).catchError((error) {
      print('Error initializing video: $error');
    });
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HLS Video Player Test'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          // Determine the maximum size for the video based on available space
          double videoHeight = constraints.maxHeight * 0.4;
          double videoWidth = constraints.maxWidth * 0.8;

          // Ensure minimum sizes for smaller screens
          if (videoHeight < 200) videoHeight = 200;
          if (videoWidth < 300) videoWidth = 300;

          return Center(
            child: _isInitialized
                ? Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: videoWidth,
                  height: videoHeight,
                  child: AspectRatio(
                    aspectRatio: _controller!.value.aspectRatio,
                    child: VideoPlayer(_controller!),
                  ),
                ),
                SizedBox(height: 20),
                // Flexible button that adapts to screen size
                Container(
                  width: constraints.maxWidth * 0.6, // Button adapts to 60% of screen width
                  child: ElevatedButton(
                    onPressed: () {
                      if (_controller!.value.isPlaying) {
                        _controller!.pause();
                      } else {
                        _controller!.play();
                      }
                      setState(() {}); // Update the play/pause button
                    },
                    child: Text(
                      _controller!.value.isPlaying ? 'Pause' : 'Play',
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                ),
              ],
            )
                : CircularProgressIndicator(), // Show loading spinner while video initializes
          );
        },
      ),
    );
  }
}

Platform Information:

• Flutter version: Flutter 3.22.2 - Dart 3.4

Flutter doctor

[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-US)
    • Flutter version 3.22.2 on channel stable at /Users/jbroesch/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (4 months ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/jbroesch/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 16A242d
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 82.0.3
    • Dart plugin version 242.22855.32

[✓] VS Code (version 1.91.1)
    • VS Code at /Users/jbroesch/Downloads/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (4 available)
    • iPhone JB (mobile)              • 00008130-001018DC2E42001C • ios            • iOS 18.0.1 22A3370
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS 14.5 23F79 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS 14.5 23F79 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript • Google Chrome 129.0.6668.103

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Additional Notes:

• This issue seems specific to physical iOS devices, as the same app works fine on the iOS emulator.
• The video contains a soundtrack. If the video has no audio track, it works fine even on iOS physical devices.
• No errors or warnings appear in the console logs on iOS, making this issue difficult to debug further.

Any help or workaround would be greatly appreciated. Thank you!