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
);
},
),
);
}
}
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:
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:
Actual Behavior:
Steps to Reproduce:
Here’s a minimal reproducible code example:
Platform Information:
Flutter doctor
Additional Notes:
Any help or workaround would be greatly appreciated. Thank you!