[BUG] Seeing some jank beginning video (network HLS m3u)

[Abacaxi-Nelson]

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

[tarek360]

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!

[rahuldubey093]

Hello, similar issue with me, on Android it's a bit more smoother than on real iPhone 14 Pro Max.