When we click on a video two videos get started playing on flutter web. when I'm coming back from the video_payer screen or after disposing of the controller it still playing in the background but working perfectly on android mobile I have posted all code below for your reference.
Pubspec.yaml
video_player: 2.4.2
chewie: 1.3.2
TrainingVideos screens
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
const videoUrl = "video_URl";
class TrainingVideos extends StatelessWidget {
const TrainingVideos({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Padding(
padding: const EdgeInsets.only(left: 20, right: 20, top: 20),
child: Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Two wheeler Insurance",
style: FontFamily.mulishBold(15, CustomColors.black),
),
Text(
"View all",
style: FontFamily.mulishBold(15, CustomColors.black)
.copyWith(decoration: TextDecoration.underline),
)
],
),
const SizedBox(
height: 10,
),
SizedBox(
height: 180,
child: ListView.builder(
itemCount: 5,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return const VideoCard();
}),
),
const SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Car Insurance",
style: FontFamily.mulishBold(15, CustomColors.black),
),
Text(
"View all",
style: FontFamily.mulishBold(15, CustomColors.black)
.copyWith(decoration: TextDecoration.underline),
)
],
),
const SizedBox(
height: 10,
),
SizedBox(
height: 180,
child: ListView.builder(
itemCount: 5,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return const VideoCard();
},),
)
],
),
),
),
);
}
}
class VideoCard extends StatefulWidget {
const VideoCard({Key? key}) : super(key: key);
@override
State<VideoCard> createState() => _VideoCardState();
}
class _VideoCardState extends State<VideoCard> {
late VideoPlayerController _controller;
@override
void initState() {
super.initState();
System.printValue("Initialized :: training video");
_controller = VideoPlayerController.network(videoUrl,)
..initialize().then((_) {
_controller.pause();
setState(() {}); //when your thumbnail will show.
});
}
@override
void dispose() {
super.dispose();
System.printValue("Dispose :: training video");
// _controller.dispose();
}
String _printDuration(Duration duration) {
String twoDigits(int n) => n.toString().padLeft(2, "0");
String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
return "${duration.inHours!=0?"${twoDigits(duration.inHours)}:":""}$twoDigitMinutes:$twoDigitSeconds";
}
@override
Widget build(BuildContext context) {
return Card(
color: const Color(0x00000000),
elevation: 0,
child: _controller.value.isInitialized
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FlatButton(
padding: const EdgeInsets.all(1),
onPressed: () {
_controller.dispose();
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => const VideoPlayerScreen(videoUrl: videoUrl),),);
},
child: Stack(children: <Widget>[
LimitedBox(
maxWidth: 180,
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
),),
const Positioned.fill(
child: Align(
child: Icon(
Icons.play_circle_fill,
color: Colors.white,
size: 60,
),),),
],),),
const SizedBox(
height: 10,
),
Text(
"Sample Video",
style: FontFamily.mulishBold(14, CustomColors.black),
),
const SizedBox(
height: 10,
),
Material(
color: const Color(0xffE1E0D1),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(
"${_printDuration(_controller.value.duration)} Left",
style: FontFamily.mulishBold(12, CustomColors.black),
),
),
)
],
)
: const SizedBox(
height: 100,
width: 180,
child: Center(
child: CircularProgressIndicator(),
),
),
);
}
}
VideoPlayerScreen
import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
class VideoPlayerScreen extends StatefulWidget {
final String videoUrl;
//VideoPlayerScreen(this.videoUrl);
const VideoPlayerScreen({Key? key, required this.videoUrl}) : super(key: key);
@override
_VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}
class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
late VideoPlayerController _controller;
late ChewieController chewieController;
@override
void initState() {
super.initState();
System.printValue("Initialized :: video player");
_controller = VideoPlayerController.network(widget.videoUrl,)
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
chewieController = ChewieController(
videoPlayerController: _controller,
looping: true,
autoInitialize: true,
autoPlay: true,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"Business Information",
style: FontFamily.mulishTitleBold3,
),
backgroundColor: CustomColors.grey[75],
elevation: 0,
leading: IconButton(
onPressed: () {
//_controller.dispose();
//chewieController.dispose();
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (context) => TrainingPromoVideos(),),);
},
icon: const Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
),
backgroundColor: Colors.black,
body: Center(
child: _controller.value.isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: Chewie(
controller: chewieController,
),
)
: const Center(child: CircularProgressIndicator()),
),
);
}
@override
void dispose() {
System.printValue("Dispose :: video player");
// _controller.dispose();
// chewieController.dispose();
super.dispose();
}
}