Flutter video_player cannot load multiple videos in one page

Noob at this

I want to create a page in Flutter with multiple looping videos. On my phone (which is a Samsung Galaxy Note 10 Plus) all the videos are loading perfectly, but when I run the same app on other phones (I tried on a Samsung Galaxy S6 and Galaxy A71) 2 videos are loading and the other ones are replaced with black squares.

This is my flutter doctor -v run:

[√] Flutter (Channel stable, 1.22.4, on Microsoft Windows [Version 10.0.19042.630], locale en-US)
    • Flutter version 1.22.4 at C:\src\flutter
    • Framework revision 1aafb3a8b9 (2 weeks ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

 
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2) 
    • Android SDK at C:\Users\myName\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java       
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[!] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.51.1)
    • VS Code at C:\Users\myName\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.16.0

[√] Connected device (1 available)
    • SM A715F (mobile) • R58N70XS23W • android-arm64 • Android 10 (API 29)

(I write my code in Visual Studio Code)

I don't get any errors in the debug version of the application but the videos are still not loading.

This is the configuration for the video_player controller:

class clipVideo extends StatefulWidget {
  final String path;
  clipVideo(this.path);
  @override
  _clipVideo createState() => _clipVideo();
}

class _clipVideo extends State<clipVideo> {
  String _path;
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;
  @override
  void initState() {
    _path = widget.path;
    _controller = VideoPlayerController.asset(_path);
    //_controller = VideoPlayerController.network(
    //   'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.play();
    _controller.setVolume(0.0);
    _controller.setLooping(true);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return Center(
              child: AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              ),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

and this is the content of my Scaffold of the page where I want to render multiple looping videos:

body: SafeArea(
            child: Container(
                child: ListView(
          children: [
            SizedBox(height: 30.0),
            Column(
              children: [
                Image(
                    image: AssetImage('assets/images/logoecomed.png'),
                    width: 200.0),
                SizedBox(
                  height: 50.0,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                          color: Color(0xff40514e),
                          fontSize: 25.0,
                          fontFamily: 'Nurom',
                          fontWeight: FontWeight.w800),
                    )),
                    SizedBox(width: 15.0)
                  ],
                ),
                SizedBox(
                  height: 15.0,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        color: Color(0xff40514e),
                        fontSize: 18.0,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w200,
                      ),
                    )),
                    SizedBox(width: 30.0)
                  ],
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 550,
                  child: clipVideo('assets/videos/record1.mp4'),
                ),
                SizedBox(
                  height: 60,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                          color: Color(0xff40514e),
                          fontSize: 25.0,
                          fontFamily: 'Nurom',
                          fontWeight: FontWeight.w800),
                    ))
                  ],
                ),
                SizedBox(
                  height: 20.0,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        color: Color(0xff40514e),
                        fontSize: 18.0,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w200,
                      ),
                    )),
                    SizedBox(width: 40.0)
                  ],
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 550,
                  child: clipVideo('assets/videos/record3.mp4'),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        color: Color(0xff40514e),
                        fontSize: 18.0,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w200,
                      ),
                    )),
                    SizedBox(width: 40.0)
                  ],
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 550,
                  child: clipVideo('assets/videos/record2.mp4'),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        color: Color(0xff40514e),
                        fontSize: 18.0,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w200,
                      ),
                    )),
                    SizedBox(width: 40.0)
                  ],
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 550,
                  child: clipVideo('assets/videos/record6.mp4'),
                ),
                SizedBox(
                  height: 30,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        color: Color(0xff40514e),
                        fontSize: 18.0,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w200,
                      ),
                    )),
                    SizedBox(width: 40.0)
                  ],
                ),
                SizedBox(
                  height: 30,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        color: Color(0xff40514e),
                        fontSize: 18.0,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w200,
                      ),
                    )),
                    SizedBox(width: 40.0)
                  ],
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 550,
                  child: clipVideo('assets/videos/record4.mp4'),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        color: Colors.red,
                        fontSize: 18.0,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w200,
                      ),
                    )),
                    SizedBox(width: 40.0)
                  ],
                ),
                SizedBox(
                  height: 60,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text?',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                          color: Color(0xff40514e),
                          fontSize: 25.0,
                          fontFamily: 'Nurom',
                          fontWeight: FontWeight.w800),
                    ))
                  ],
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: <Widget>[
                    SizedBox(width: 20.0),
                    Flexible(
                        child: Text(
                      'Text',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        color: Color(0xff40514e),
                        fontSize: 18.0,
                        fontFamily: 'Helvetica',
                        fontWeight: FontWeight.w200,
                      ),
                    )),
                    SizedBox(width: 40.0)
                  ],
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 550,
                  child: clipVideo('assets/videos/record5.mp4'),
                ),
                SizedBox(
                  height: 30,
                ),
                // Center(
                //     child: Flexible(
                //         child: Text(
                //   'Text',
                //   textAlign: TextAlign.start,
                //   style: TextStyle(
                //     color: Color(0xff40514e),
                //     fontSize: 18.0,
                //     fontFamily: 'Helvetica',
                //     fontWeight: FontWeight.w800,
                //   ),
                // ))),
                // SizedBox(
                //   height: 90,
                // )
              ],
            )
          ],
        )))

the assets are included in my pubspec.yaml:

flutter:
  assets:
    - assets/
    - assets/images/logoecomed.png
    - assets/videos/record1.mp4
    - assets/videos/record2.mp4
    - assets/videos/record3.mp4
    - assets/videos/record4.mp4
    - assets/videos/record5.mp4
    - assets/videos/record6.mp4

I changed the video_player version to a newer one, but it didn't solve anything.Is it maybe because of the phones? Are the videos too big? (every record[number].mp4 has between 8 - 10 MB).

Edit: I tried to reduce the size of the videos to 2-3 MB and it still doesn't work. But I discovered that when I enter into that page with multiple videos, the video_player plugin freezes/crashes (I have another video on the previous page that freezed also), so the plugin crashes somewhere

Second Edit: after more flutter runs, I found something here:

D/MediaCodecInfo(18771): AssumedSupport [sizeAndRate.rotated, 1080x2280x60.19792938232422] [OMX.Exynos.avc.dec, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): NoSupport [sizeAndRate.support, 1080x2280x60.19792938232422] [OMX.SEC.avc.sw.dec, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): NoSupport [sizeAndRate.support, 1080x2280x60.19792938232422] [OMX.SEC.avc.sw.dec, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): NoSupport [sizeAndRate.support, 1080x2280x60.19792938232422] [OMX.google.h264.decoder, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): AssumedSupport [sizeAndRate.rotated, 1080x2280x60.19792938232422] [OMX.Exynos.avc.dec, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): AssumedSupport [sizeAndRate.rotated, 1080x2280x60.19792938232422] [OMX.Exynos.avc.dec, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): NoSupport [sizeAndRate.support, 1080x2280x60.19792938232422] [OMX.SEC.avc.sw.dec, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): NoSupport [sizeAndRate.support, 1080x2280x60.19792938232422] [OMX.SEC.avc.sw.dec, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): NoSupport [sizeAndRate.support, 1080x2280x60.19792938232422] [OMX.google.h264.decoder, video/avc] [zeroflte, SM-G920F, samsung, 24]
D/MediaCodecInfo(18771): AssumedSupport [sizeAndRate.rotated, 1080x2280x60.19792938232422] [OMX.Exynos.avc.dec, video/avc] [zeroflte, SM-G920F, samsung, 24]

and I think this is an issue with the videos and not the player

Third edit: After cropping and resizing the videos, the video_player show only the first frame of every video except the last one. I don t know what to do about this

Noob at this

I solved it after all.. Downgrading the video_player plugin and resizing the videos have done the thing.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Display Duration for Multiple Videos on a Page

Flutter video_player plugin - VideoPlayerController.seekTo

Ember js : load multiple template on one page with data

How to get buffering status from video_player flutter plugin?

Flutter - video_player fullscreen

How to play videos sequentialy on video_player without delay?

Ho to catch flutter video_player plugin error?

Problems with multiple tween animations in Flutter - Videos Included

How to make multiple images on one web page load into modal

Flutter video_player dispose

Flutter video_player for login screen background brings black screen

Flutter video_player restart video from start on tap

Flutter video_player can not show the video

Adaptive HLS Streaming - Flutter video_player

Flutter - video_player listener being called very slowly

Is there a way to enable controls in video player playing youtube videos flutter web

The video_player plugin fails to play videos - Flutter

Flutter video_player with URL from Firestore Document

How to call snackbar from one page to multiple pages - flutter

script to load images,videos on demand in web page

Multiple videos on one Surface

Flutter Async Load Multiple Functions One After The Other

pass multiple local storage videos to react js popup video player

HTML + JavaScript custom player for multiple videos on a website page

How to play multiple videos with (player_video) package

Nextjs CSR load the code for multiple pages for one page req

How to know if the video reached the last position when using video_player in flutter?

How to play video that picked from image_picker using video_player flutter

Cannot navigate from one page to next page (Flutter)