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
I solved it after all.. Downgrading the video_player plugin and resizing the videos have done the thing.