Flutter (web) video_player Autoplay

Issue

does anyone know what I need to do in order to get my videos to play automatically once my flutter website has loaded?

The only thing I’ve managed so far is to get them to play/loop if I refresh the page manually.

I’m sure it’s something simple but after 3 months of not coding at all I’m a little rusty…

At the moment I’m calling _videoPlayerController.play() inside the FutureBuilder

class VideoWithChild extends StatefulWidget {
  final String videoSource;
  final FractionalOffset alignment;
  final TextAlign textAlign;
  final Widget child;

  const VideoWithChild(
      {Key key, this.videoSource, this.alignment, this.textAlign, this.child})
      : super(key: key);

  @override
  _VideoWithChildState createState() =>
      _VideoWithChildState(videoSource, alignment, textAlign, child);
}

class _VideoWithChildState extends State<VideoWithChild> {
  final String videoSource;
  final TextAlign textAlign;
  final Widget child;
  final FractionalOffset alignment;
  VideoPlayerController _videoPlayerController;
  Future<void> _initializeVideoPlayerFuture;
  VoidCallback listener;

  _VideoWithChildState(
      this.videoSource, this.alignment, this.textAlign, this.child);

  @override
  void initState() {
    _videoPlayerController = VideoPlayerController.asset(videoSource);
    _initializeVideoPlayerFuture = _videoPlayerController.initialize();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            _videoPlayerController.dataSource.isNotEmpty) {
              print('connection state');
          _videoPlayerController.play();
          _videoPlayerController.setLooping(true);
          return AspectRatio(
            aspectRatio: _videoPlayerController.value.aspectRatio,
            child: Stack(
              children: <Widget>[
                VideoPlayer(_videoPlayerController),
                LayoutBuilder(
                  builder: (context, constraints) {
                    return Align(alignment: alignment, child: child);
                  },
                )
              ],
            ),
          );
        } else {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
                child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(
                Color(0xff49148c),
              ),
            )),
          );
        }
      },
    );
  }

  @override
  void dispose() {
    print('dispose');
    super.dispose();
    _videoPlayerController.dispose();
  }
}

Solution

Chrome or other browsers might not allow auto play video as pointed out here and mentioned by the video_player_web author here.

However you can autoplay it if you mute the volume. Based on this post‘s answer, you can use the WidgetsBinding.instance.addPostFrameCallback to autoplay your video. In your initState method try to add the following lines.

WidgetsBinding.instance.addPostFrameCallback((_) {
      // mutes the video
      _videoPlayerController.setVolume(0); 
      // Plays the video once the widget is build and loaded.
      _videoPlayerController.play();
    });

However if you want the video to be played once the entire website is loaded, you may want to do it in javascript using body tags onload property as defined here.

Answered By – Abhilash Chandran

Answer Checked By – Clifford M. (FlutterFixes Volunteer)