flutter - 用于登录屏幕背景的Flutter video_player带来黑屏

Question

所以我试图在我的应用程序中构建一个简单的登录屏幕，其中包含循环运行的视频背景。

我的登录页面:

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';


class LoginScreen extends StatefulWidget {

static final String id = 'login_screen';

@override
_LoginScreenState createState() => _LoginScreenState();
}


class _LoginScreenState extends State<LoginScreen> {

VideoPlayerController _controller;

@override
void initState(){

super.initState();
_controller = VideoPlayerController.asset("../../assets/videos/preview.mp4")..initialize().then((_){

  setState(() {

  });
});


_controller.setLooping(true);
_controller.setVolume(0.0);
_controller.play();
}

@override
Widget build(BuildContext context) {
 return Scaffold(
  body: Stack(
    children: <Widget>[
   VideoPlayer(_controller),

 ],
)      
);
}
}

我的pubspec.yaml:

name: first_app
description: A new Flutter project.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at 
# https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as 
# CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/ 
# InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  flutter_localizations:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  video_player: ^0.10.3+1

dev_dependencies:
  flutter_test:
    sdk: flutter



# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/blosome_logo.png
    - assets/videos/preview.mp4
    - lang/en.json
    - lang/he.json

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  fonts:
    - family: Billabong
      fonts:
        - asset: assets/fonts/Billabong.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

I have also tried with network video link and getting the same result

_controller = VideoPlayerController.network( 'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')

Answer 1

您可以在下面复制粘贴运行完整代码，我使用https连接到网络mp4
原因是视频在显示时仍未准备好
您可以使用_controller.value.initialized进行检查，当视频尚未就绪时返回Container()程式码片段

return Center(
  child: _controller.value.initialized
      ? AspectRatio(
          aspectRatio: _controller.value.aspectRatio,
          child: VideoPlayer(_controller),
        )
      : Container(),
);

工作演示



完整的代码

import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';

void main() => runApp(VideoApp());

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Stack(children: <Widget>[
          VideoWidget(controller: _controller),
          Container(
            height: 100,
            child: Center(child: Text("Login Form")),
          ),
        ]),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

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


class VideoWidget extends StatelessWidget {
  const VideoWidget({
    Key key,
    @required VideoPlayerController controller,
  })  : _controller = controller,
        super(key: key);

  final VideoPlayerController _controller;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _controller.value.initialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )
          : Container(),
    );
  }
}