Flutter video_player 无法在一个页面中加载多个视频

Flutter video_player cannot load multiple videos in one page

我想在 Flutter 中创建一个包含多个循环视频的页面。在我的 phone(三星 Galaxy Note 10 Plus)上,所有视频都可以完美加载,但是当我 运行 在其他 phone 上使用相同的应用程序时(我试过三星 Galaxy S6 和 Galaxy A71) 正在加载 2 个视频,其他视频替换为 black squares

这是我的 flutter doctor -v 运行:

[√] 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)

(我把我的代码写在Visual Studio代码中)

我在应用程序的调试版本中没有收到任何错误,但视频仍然无法加载。

这是 video_player 控制器的配置:

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(),
            );
          }
        },
      ),
    );
  }
}

这是我要渲染多个循环视频的页面的脚手架内容:

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,
                // )
              ],
            )
          ],
        )))

资产包含在我的 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

我把 video_player 版本换了一个新版本,但是没解决 anything.Is 可能是因为 phone 的问题?视频太大了吗? (每个 record[number].mp4 有 8 - 10 MB)。

编辑:我尝试将视频的大小减小到 2-3 MB,但仍然不起作用。但是我发现当我进入那个有多个视频的页面时,video_player 插件 freezes/crashes(我在前一页上有另一个视频也冻结了),所以插件在某个地方崩溃了

第二次编辑:flutter runs 之后,我在这里找到了一些东西:

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]

而且我认为这是视频的问题,而不是播放器的问题

第三次编辑:裁剪和调整视频大小后,video_player 仅显示除最后一个视频之外的每个视频的第一帧。我不知道该怎么办

首先改变这个:

flutter:
  assets:
    - assets/images/
    - assets/videos/

重新构建并 运行 应用程序。如果它不起作用,那么 运行 在终端上执行以下命令。

flutter upgrade

flutter config --android-studio-dir="C:\Program Files\Android\Android Studio"

flutter doctor -v

然后,如果问题仍然存在,则只需切换到 Beta 通道,升级 flutter 即可解决。

flutter channel stable

flutter upgrade

我问你 运行 终端命令,因为我注意到这个错误。

[!] 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)

让我知道它是否有效..

注意:在 运行 终端命令之后,您需要再次构建应用程序并且 运行。

我终于解决了。降级 video_player 插件并调整视频大小就可以了。