chewie Web: Video breaks when leaving fullscreen

Chewie works nicely on web, which is awesome.

But if I go into fullscreen and leave again, it breaks the video and leaves it blank.

EDIT: Initially I though this was caused by the Wakelock.enable/disable function, which throw the error Error: MissingPluginException(No implementation found for method toggle on channel wakelock). But by removing Wakelock.enable/disable, the error log disappears but the video still breaks.

May 18 '20 15:05 nstrelow

I'm having the same issue.

May 19 '20 08:05 tibe97

I'm having the same issue.

Aug 04 '20 03:08 PreviousTlx

Has anyone found a solution?

Aug 19 '20 22:08 ErkinKurt

Is this fixed with the newest update?

Nov 11 '20 17:11 nstrelow

No

Nov 11 '20 17:11 shatanikmahanty

I found a web only solution though

Nov 11 '20 17:11 shatanikmahanty

@shatanikmahanty Feel free to share ^^

Nov 11 '20 22:11 nstrelow

I am showing video in a popup you can do your own implementation

Make sure to import dart:js

void showVideoPopup(context, String link,) {

  final videoPlayerController = VideoPlayerController.network(link);

   bool isFullScreen = false;

final chewieController = ChewieController(
    videoPlayerController: videoPlayerController,
    aspectRatio: 3 / 2,
    autoPlay: false,
    looping: true,
    allowFullScreen: false,
    allowMuting: true,
    autoInitialize: true,
  );

showDialog(
    context: context,
    builder: (context) => AlertDialog(
      insetPadding: EdgeInsets.zero,
      content: Center(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Stack(
            children: [
              Chewie(
                controller: chewieController,
              ),
              Positioned(
                top: 7,
                left: 10,
                child: CircleAvatar(
                  backgroundColor: Colors.grey[800],
                  child: IconButton(
                    icon: Icon(
                      Icons.fullscreen,
                      color: Colors.white,
                    ),
                    onPressed: () async {
                      if (!isFullScreen) {
                        document.documentElement.requestFullscreen();
                        await SystemChrome.setPreferredOrientations(
                            [DeviceOrientation.landscapeRight,DeviceOrientation.landscapeLeft]);
                      } else {
                        document.exitFullscreen();
                        await SystemChrome.setPreferredOrientations([
                          DeviceOrientation.portraitDown,
                          DeviceOrientation.portraitUp,
                        ]);
                      }

                      isFullScreen = !isFullScreen;
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

      
      actions: [
        FlatButton(
          onPressed: () {
            // videoPlayerController.dispose();
            // chewieController.dispose();
            Navigator.of(context).pop();
          },
          child: Text(
            'Close',
            style: TextStyle(color: THEME_COLOR),
          ),
        )
      ],
    ),
  );

}

Nov 12 '20 14:11 shatanikmahanty

Sorry I was bit late to comment but I implemented another web only solution using html and waited to complete both so that I can post together:

Note : Make sure you import -- >


import 'dart:html' as html;
import 'dart:ui' as ui;

Source :


String htmlContent(String link,double w, double h) {
  return """
<!DOCTYPE html> 
<html> 
<body> 

<center> <video width="$w" height="$h" controls>
  <source src="$link" type="video/mp4">
  <source src="$link" type="video/ogg">
  Your browser does not support HTML video.
</video> </center>

</body> 
</html>

""";
}

void showVideoPopup(context, String link) {

  String createdViewId = 'video_element$link';

  double w = MediaQuery.of(context).size.width/1.5,
      h = MediaQuery.of(context).size.height/1.5;

  String htmlVideo = Uri.dataFromString(htmlContent(link,w,h),
          mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
      .toString();


  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(
      createdViewId,
      (int viewId) => html.IFrameElement()
        ..allowFullscreen = true
        ..src = "$htmlVideo"
        ..style.border = 'none');


  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      insetPadding: EdgeInsets.zero,
      content: Center(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: HtmlElementView(
            viewType: createdViewId,
          ),
        ),
      ),
      actions: [
        FlatButton(
          onPressed: () {
            // videoPlayerController.dispose();
            // chewieController.dispose();
            Navigator.of(context).pop();
          },
          child: Text(
            'Close',
            style: TextStyle(color: THEME_COLOR),
          ),
        )
      ],
    ),
  );
}

Nov 12 '20 14:11 shatanikmahanty

You will get this error "The name 'platformViewRegistry' is being referenced through the prefix 'ui', but it isn't defined in any of the libraries imported using that prefix". But this is an error in flutter web. If you search in Google you will find issue mentioned in Flutter framework github page.

Coming to the point, your code will run properly if you hit run on web.

Happy Coding ^^

Nov 12 '20 14:11 shatanikmahanty

I found one useful discussion in stack overflow regarding conditional importing. You can use this to integrate a separate approach for web app without breaking the other platform builds. Link is below :

Platform specific imports discussion in Stack Overflow

Nov 12 '20 14:11 shatanikmahanty

Is Chewie still being supported? This is a major bug that was opened 16 months ago and hasn't been addressed by devs in any way...