Web: Video breaks when leaving fullscreen #311

nstrelow · 2020-05-18T15:15:38Z

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.

The text was updated successfully, but these errors were encountered:

tibe97 · 2020-05-19T08:18:13Z

I'm having the same issue.

PreviousTlx · 2020-08-04T03:20:08Z

I'm having the same issue.

ErkinKurt · 2020-08-19T22:21:07Z

Has anyone found a solution?

nstrelow · 2020-11-11T17:49:20Z

Is this fixed with the newest update?

shatanikmahanty · 2020-11-11T17:55:09Z

No

shatanikmahanty · 2020-11-11T17:55:25Z

I found a web only solution though

nstrelow · 2020-11-11T22:56:07Z

@shatanikmahanty Feel free to share ^^

shatanikmahanty · 2020-11-12T14:17:05Z

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),
          ),
        )
      ],
    ),
  );

}

shatanikmahanty · 2020-11-12T14:20:32Z

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),
          ),
        )
      ],
    ),
  );
}

shatanikmahanty · 2020-11-12T14:24:48Z

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 ^^

shatanikmahanty · 2020-11-12T14:31:08Z

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

MichaelFerrier · 2021-09-14T17:24:19Z

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...

ltOgt · 2022-12-07T14:49:40Z

Workaround: When closing, just reinitialise the controllers and pass through the position and isPlaying etc.

Not 100% smooth, but better than nothing

nutfyb · 2023-02-22T07:13:59Z

Has anyone solved this problem now?

ltOgt · 2025-01-16T17:35:23Z

I think this got fixed with #810

nstrelow changed the title ~~Web: MissingPluginException when leaving FullScreen mode~~ Web: MissingPluginException caused by Wakelock.enable/disable() May 18, 2020

nstrelow changed the title ~~Web: MissingPluginException caused by Wakelock.enable/disable()~~ Web: Video breaks when leaving fullscreen May 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Web: Video breaks when leaving fullscreen #311

Web: Video breaks when leaving fullscreen #311

nstrelow commented May 18, 2020 •

edited

Loading

tibe97 commented May 19, 2020

PreviousTlx commented Aug 4, 2020

ErkinKurt commented Aug 19, 2020

nstrelow commented Nov 11, 2020

shatanikmahanty commented Nov 11, 2020

shatanikmahanty commented Nov 11, 2020

nstrelow commented Nov 11, 2020

shatanikmahanty commented Nov 12, 2020 •

edited

Loading

shatanikmahanty commented Nov 12, 2020 •

edited

Loading

shatanikmahanty commented Nov 12, 2020

shatanikmahanty commented Nov 12, 2020 •

edited

Loading

MichaelFerrier commented Sep 14, 2021

ltOgt commented Dec 7, 2022

nutfyb commented Feb 22, 2023

ltOgt commented Jan 16, 2025

Web: Video breaks when leaving fullscreen #311

Web: Video breaks when leaving fullscreen #311

Comments

nstrelow commented May 18, 2020 • edited Loading

tibe97 commented May 19, 2020

PreviousTlx commented Aug 4, 2020

ErkinKurt commented Aug 19, 2020

nstrelow commented Nov 11, 2020

shatanikmahanty commented Nov 11, 2020

shatanikmahanty commented Nov 11, 2020

nstrelow commented Nov 11, 2020

shatanikmahanty commented Nov 12, 2020 • edited Loading

shatanikmahanty commented Nov 12, 2020 • edited Loading

shatanikmahanty commented Nov 12, 2020

shatanikmahanty commented Nov 12, 2020 • edited Loading

MichaelFerrier commented Sep 14, 2021

ltOgt commented Dec 7, 2022

nutfyb commented Feb 22, 2023

ltOgt commented Jan 16, 2025

nstrelow commented May 18, 2020 •

edited

Loading

shatanikmahanty commented Nov 12, 2020 •

edited

Loading

shatanikmahanty commented Nov 12, 2020 •

edited

Loading

shatanikmahanty commented Nov 12, 2020 •

edited

Loading