Video disappear on exiting full screen

[imcoffeefreak]

Flutter Web

Video plays absolutely fine in normal screen, but fails to play after exiting from Full screen Flutter_Web

[sravanpabolu]

tested in iOS Simulator. it is the same. Video disappears on exiting full screen

[Ahmadre]

I encountered the same. I will investigate ASAP. Maybe something with the old fashioned InheritedWidget. Maybe we should change to Provider or Riverpod here.

[yuhao-nyc]

following. also experiencing this In flutter web

[Depixen]

Same here for flutter web.

[imcoffeefreak]

@Ahmadre any workaround for this issue?

[Uni2K]

I spend the last two days rewriting the existing code in order to make the fullscreen work on Flutter Web.
The problem is that its somehow not working correctly if there is only 1 instance of VideoPlayerController used.
So, you would need a separate instance of a ChewieController for the fullscreen widget and also for the default widget. Each instance needs to be initialized separately.

Unfortunately it is not that easy to implement because the entire code is written to work only with a single instance. If someone is interested I can share it, but had not yet the time to clean it up and optimize it.

[imcoffeefreak]

Currently, the only workaround that I found in building this is to use HTML concept in a flutter.

Widget _iframeWidget;
html.VideoElement iFrameWidgets;

So in the initState you can define widget

iFrameWidgets = html.VideoElement();
iFrameWidgets.src = "link";
iFrameWidgets.controls = true;

use dart:ui as ui

ui.platformViewRegistry.registerViewFactory( 'videoElement, (int viewId) => iFrameWidgets, );

And then render it

_iframeWidget = HtmlElementView( key: UniqueKye(), viewType: "videoElement", );

[artur-baginski]

I spend the last two days rewriting the existing code in order to make the fullscreen work on Flutter Web.
The problem is that its somehow not working correctly if there is only 1 instance of VideoPlayerController used.
So, you would need a separate instance of a ChewieController for the fullscreen widget and also for the default widget. Each instance needs to be initialized separately.

Unfortunately it is not that easy to implement because the entire code is written to work only with a single instance. If someone is interested I can share it, but had not yet the time to clean it up and optimize it.

That would be great, if you would share it! Thanks in advance!

[zambetpentru]

Greetings, any update or tips for this one?

[gbsoares12]

Do you have any solution for this problem?

[aramisromero89]

Is there any solution to this problem?

[AnmLobby]

I encountered the same problem. Is there a solution yet?

[KartikSinghMedcyte]

Same problem facing. Please Provide solution or Tip ASAP. Thank you

[ShivaniVani]

You can use the listener and reinitialize the chewiecontroller it will work fine

chewieController.addListener(() {
if (_chewieController.isFullScreen) {
// can leave empty
} else {
print("Full screen exit");
// initialize controller again
}
});

[slovnicki]

Here's a complete workaround Widget without using dart:html. It might have a small glitch on exiting the full screen (because of re-initialization and seeking), but is acceptable for now.

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class MyVideoPlayer extends StatefulWidget {
 const MyVideoPlayer({Key? key, required this.videoUrl}) : super(key: key);

 final String videoUrl;

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

class _MyVideoPlayerState extends State<MyVideoPlayer> {
 late VideoPlayerController _videoController;
 late ChewieController _chewieController;

 Duration _currentPosition = Duration.zero;
 bool _isPlaying = false;

 void _initControllers() {
   _videoController = VideoPlayerController.network(widget.videoUrl)
     ..initialize().then((value) {
       _videoController.seekTo(_currentPosition);
       setState(() {});
     });
   _chewieController = ChewieController(
     videoPlayerController: _videoController,
   )..addListener(_reInitListener);
   if (_isPlaying) {
     _chewieController.play();
   }
 }

 void _reInitControllers() {
   _chewieController.removeListener(_reInitListener);
   _currentPosition = _videoController.value.position;
   _isPlaying = _chewieController.isPlaying;
   _initControllers();
 }

 void _reInitListener() {
   if (!_chewieController.isFullScreen) {
     _reInitControllers();
   }
 }

 @override
 void initState() {
   super.initState();
   _initControllers();
 }

 @override
 Widget build(BuildContext context) {
   return Container(
     child: _videoController.value.isInitialized
       ? Chewie(controller: _chewieController)
       : null,
   );
 }

 @override
 void dispose() {
   _videoController.dispose();
   _chewieController.dispose();
   super.dispose();
 }
}