How to Play Video on Splash in Flutter | video_player Plugin with Play, End and Duration controls (Listeners)

Playing videos is a common task in app development but there is something differ when we need to play with listeners. The Flutter team provides the video_player plugin. You can use the video_player plugin to play videos stored on the
file system,
as an asset, or
from the internet.

On iOS, the video_player plugin makes use of AVPlayer to handle playback. On Android, it uses ExoPlayer.

This recipe demonstrates how to use the video_player package to stream a video from the internet with basic play and detect Play, End and Duration controls using the following steps:
  1. Add the video_player dependency.
    (if you are using video from assets you can skip 2 point.)
  2. Add permissions to your app.
  3. Complete example

1. Add the video_player dependency

dependencies:
  flutter:
    sdk: flutter
  video_player:

2. Add permissions to your app

Next, update your android and ios configurations to ensure that your app has the correct permissions to stream videos from the internet.

Android

Add the following permission to the AndroidManifest.xml file just after the application definition. The AndroidManifest.xml file is found at project root/android/app/src/main/AndroidManifest.xml.
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>

IOS

For iOS, add the following to the Info.plist file found at project root/ios/Runner/Info.plist
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
Warning: The video_player plugin doesn’t work on iOS simulators. You must test videos on real iOS devices.

3. Complete example


class SplashPage extends StatefulWidget {

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

class _SplashPageState extends State {
  AuthActionManagers _authManager = AuthActionManagers();
  bool _requestedToGoNext = false;
  VideoPlayerController _controller;
  bool _isEnd = false;

  @override
  void initState() {
    _controller = VideoPlayerController.asset(SPLASH_VIDEO)
      ..addListener(() {
        if (_controller.value.isInitialized && _controller.value.isPlaying == false) {
          _controller.play();
        }

        _controller.value.duration?.compareTo(_controller.value.position) == 0
            ? this.setState(() {
                _isEnd = true;
              })
            : this.setState(() {
                _isEnd = false;
              });
      })
      ..initialize();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    if (_isEnd && _requestedToGoNext == false) {
      _requestedToGoNext = true;
      _authManager.actionOnSplashScreenStateChange(context: context);
    }
    return Scaffold(
      body: Container(
        height: double.infinity,
        width: double.infinity,
        alignment: Alignment.center,
        color: Colors.black,
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
    );
  }
}
Please comment below if facing any issue. Thanks

Comments

Post a Comment