Flutter - video_player 全屏

Question

I'm using a plugin called video_player on my Flutter project. I'm able to play and pause videos without a problem, but I want to make it fullscreen and horizontal. I couldn't find anything related to this.

This is the basic code I'm using:

playerController = VideoPlayerController.network(
          "<VIDEO_URL>")
        ..addListener(listener)
        ..setVolume(1.0)
        ..initialize()
        ..play();

Can I make it fullscreen?

Answer 1

As far as I understand, the VideoPlayer doesn't know anything about where it is, but rather just expands to fit within the given space the best it can.

I believe what you want to do is use a RotatedBox as a parent of the video and set the rotation value. Depending on how exactly your app works, you may want to have the video player start horizontal and small, and have a full screen button that switches to landscape mode. However, if the app itself is set up to rotate you'll have to take that into account and un-rotate the video once the phone has been rotated horizontally, which will probably result in uglyness in the UI as the flutter rotation happens and you un-rotate the video.

You probably also want to use a dialog to show the video full-screen so that you can dismiss it and get back to the screen you were at.

I could probably provide a bit more guidance but it does depend on which way you go with that (either locking the app to portrait mode and doing the rotation manually) vs using flutter's built-in rotation.

Answer 2

I have another situation for this question, that's use Chewie plugin, you can install it right here: https://pub.dev/packages/chewie And this is the code that I implemented it:

VideoPlayerController _videoPlayerController;
  ChewieController _chewieController;
  double _aspectRatio = 16 / 9;
  @override
  initState() {
    super.initState();
    print(widget.videoUrl);
    _videoPlayerController = VideoPlayerController.network(widget.videoUrl);
    _chewieController = ChewieController(
      allowedScreenSleep: false,
      allowFullScreen: true,
      deviceOrientationsAfterFullScreen: [
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ],
      videoPlayerController: _videoPlayerController,
      aspectRatio: _aspectRatio,
      autoInitialize: true,
      autoPlay: true,
      showControls: true,
    );
    _chewieController.addListener(() {
      if (_chewieController.isFullScreen) {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.landscapeRight,
          DeviceOrientation.landscapeLeft,
        ]);
      } else {
         SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
        ]);
      }
    });
  }

Remember restore orientation of the device after exit page:

@override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    super.dispose();
  }


    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: Chewie(
            controller: _chewieController,
          ),
        ),
      ),
    );
  }

Answer 3

In order for it to work in iOS you should add the following change in ios/Runner/Info.plist :

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

Answer 4

I have created a function which will play video in fullscreen

import 'package:flutter/services.dart';
.
.

void pushFullScreenVideo() {

//This will help to hide the status bar and bottom bar of Mobile 
//also helps you to set preferred device orientations like landscape

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
SystemChrome.setEnabledSystemUIOverlays([]);
SystemChrome.setPreferredOrientations(
  [
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ],
);

//This will help you to push fullscreen view of video player on top of current page

Navigator.of(navigatorKey.currentContext)
    .push(
  PageRouteBuilder(
    opaque: false,
    settings: RouteSettings(),
    pageBuilder: (
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
    ) {
      return Scaffold(
        backgroundColor: Colors.transparent,
        resizeToAvoidBottomPadding: false,
        body: Dismissible(
          key: const Key('key'),
          direction: DismissDirection.vertical,
          onDismissed: (_) => Navigator.of(context).pop(),
          child: OrientationBuilder(
          builder: (context, orientation) {
            isPortrait = orientation == Orientation.portrait;
            return Center(
              child: Stack(
              //This will help to expand video in Horizontal mode till last pixel of screen
                fit: isPortrait ? StackFit.loose : StackFit.expand,
                  children: [
                     AspectRatio(
                       aspectRatio: controller.value.aspectRatio,
                       child: VideoPlayer(controller),
                     ),
                  ],
               ),
            );
         },
       ); 
    },
  ),
)
    .then(
  (value) {

//This will help you to set previous Device orientations of screen so App will continue for portrait mode

    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    SystemChrome.setPreferredOrientations(
      [
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ],
    );
  },
);
}

Answer 5

Even tho this is a late answer figured it might help someone,

I have found flick_video_player to be one of the best video players out there.

You can simply enter to full screen using the predefined method, using the controller.

 _activeManager!.flickControlManager!.enterFullscreen();

and to exit from the fullscreen player

 _activeManager!.flickControlManager!.exitFullscreen();

You can get examples here

flick video player examples