betterplayer
betterplayer copied to clipboard
[BUG] Seeing some jank beginning video (network HLS m3u)
History check
- [x] Please confirm that you've checked issues history and you didn't find anything which may solve your issue.
Describe the bug Hi, Thank you for your code, plugin is amazing. I am seeing some junk (slow frame), when displaying video from network (HLS m3u). This player is in a vertical scroll (like tiktok); i am loading max 5 video.

Any advice ?
*Example code
class VideoPlay extends StatefulWidget {
String url;
final String postId;
final bool autoplay;
final int isFullscreen;
final double? width;
final double? height;
VideoPlay(
{Key? key,
required this.postId,
required this.url,
required this.autoplay,
required this.isFullscreen,
required this.width,
required this.height})
: super(key: key);
@override
_VideoPlayState createState() => _VideoPlayState();
}
class _VideoPlayState extends State<VideoPlay> {
late BetterPlayerController _controller;
@override
void dispose() {
_controller.removeEventsListener(listener);
_controller.dispose(forceDispose: true);
super.dispose();
}
@override
void initState() {
super.initState();
final betterPlayerDataSource = BetterPlayerDataSource(
BetterPlayerDataSourceType.network,
widget.url,
);
if (widget.isFullscreen == 0) {
_controller = BetterPlayerController(
BetterPlayerConfiguration(
autoDispose: false,
looping: true,
aspectRatio: widget.width == null || widget.height == null || widget.width == 0.0 || widget.height == 0.0
? (1080) / (1920)
: (widget.width!) / (widget.height!),
controlsConfiguration: const BetterPlayerControlsConfiguration(
showControls: false,
),
),
betterPlayerDataSource: betterPlayerDataSource);
} else {
_controller = BetterPlayerController(
const BetterPlayerConfiguration(
autoDispose: false,
looping: true,
aspectRatio: 1080 / 1920,
fit: BoxFit.fitHeight,
controlsConfiguration: BetterPlayerControlsConfiguration(
showControls: false,
),
),
betterPlayerDataSource: betterPlayerDataSource);
}
_controller.addEventsListener(listener);
}
Future<void> listener(BetterPlayerEvent event) async {
if (event.betterPlayerEventType == BetterPlayerEventType.initialized) {
if (widget.autoplay) {
await _controller.play();
}
}
}
@override
Widget build(BuildContext context) {
return VisibilityDetector(
key: Key(widget.url),
onVisibilityChanged: (final info) async {
final init = _controller.isVideoInitialized();
final playing = _controller.isPlaying();
if (init == null || playing == null) return;
if (info.visibleFraction == 0) {
if (init && playing) {
await _controller.pause();
}
} else if (info.visibleFraction == 1) {
if (init && !playing) {
await _controller.play();
}
}
},
child: Container(
color: Colors.transparent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.center,
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () async {
final playing = _controller.isPlaying();
if (playing != null) {
if (playing) {
await _controller.pause();
} else {
await _controller.play();
}
}
},
child: IgnorePointer(
child: widget.isFullscreen == 0
? AspectRatio(
aspectRatio: widget.width == null ||
widget.height == null ||
widget.width == 0.0 ||
widget.height == 0.0
? (1080) / (1920)
: (widget.width!) / (widget.height!),
child: BetterPlayer(key: Key('better_${widget.postId}'), controller: _controller))
: AspectRatio(
aspectRatio: 1080 / 1920,
child: BetterPlayer(
key: Key('better_${widget.postId}'),
controller: _controller,
))))));
}
}
Expected behavior Smooth video :)
Flutter doctor
[✓] Flutter (Channel stable, 2.10.3, on macOS 12.0.1 21A559 darwin-arm, locale fr-FR) • Flutter version 2.10.3 at /Applications/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 7e9793dee1 (9 days ago), 2022-03-02 11:23:12 -0600 • Engine revision bd539267b4 • Dart version 2.16.1 • DevTools version 2.9.2
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /Users/nelsonnunes/Library/Android/sdk • Platform android-32, build-tools 32.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.2
[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2020.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 11.0.10+0-b96-7249189)
[✓] VS Code (version 1.65.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.36.0
[✓] Connected device (2 available) • iPhone abacaxi (mobile) • 00008110-00146CD40C42801E • ios • iOS 15.3.1 19D52 • Chrome (web) • chrome • web-javascript • Google Chrome 99.0.4844.51
[✓] HTTP Host Availability • All required HTTP hosts are available
• No issues found!
Better Player version
- Version: 0.0.81
Smartphone (please complete the following information):
- Device: Iphone 13
- OS: IOS15.3.1
Hi @Abacaxi-Nelson I'm also developing a vertical videos scroll app, and I have the same issue on iOS, have you found any solution? Thank you!
Hello, similar issue with me, on Android it's a bit more smoother than on real iPhone 14 Pro Max.