I’m trying to get a video to play full screen like a TikTok video. The video is uploaded to Firebase storage and is filmed in portrait mode so it should work.
void _initializeMediaPlayer() {
if (widget.fileType == 'video') {
BetterPlayerDataSource dataSource = BetterPlayerDataSource(
BetterPlayerDataSourceType.network, // Change this to network
widget.downloadUrl,
);
_betterPlayerController = BetterPlayerController(
const BetterPlayerConfiguration(
aspectRatio: 16 / 9, // Adjust the aspect ratio if necessary
showPlaceholderUntilPlay: true,
expandToFill: false,
autoPlay: true,
fullScreenAspectRatio:
16 / 9, // Keeping the aspect ratio consistent for fullscreen
allowedScreenSleep: false,
fit: BoxFit.fitWidth,
deviceOrientationsOnFullScreen: [
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
],
),
betterPlayerDataSource: dataSource,
);
setState(() {
_isControllerInitialized = true;
});
} else if (widget.fileType == 'audio') {
_audioPlayer.setSourceUrl(widget.downloadUrl).then((_) {
_audioPlayer.play(UrlSource(widget.downloadUrl));
setState(() {
_isPlaying = true;
});
});
}
}
Below is the rest of the code … not sure if the settings can be done through Bestplayer or just by adjusting the layout. It works when previewing the video after picking it, but when using the video url the video is displayed in a small player.
videoPlayerWidget() {
return Container(
padding: const EdgeInsets.all(
10,
), // Add some padding around the video player
child: _isControllerInitialized
? BetterPlayer(
controller: _betterPlayerController!,
)
: const Text("No video available"),
);
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
color: Colors.black,
child: Stack(
children: [
_uploaderDetails == null
? Text(
"Loading details...",
style: TextStyle(color: Colors.white),
)
: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (widget.fileType == 'video')
_betterPlayerController != null &&
_isControllerInitialized
? videoPlayerWidget()
: Text(
"Loading video...",
style: TextStyle(color: Colors.white),
),
if (widget.fileType == 'audio') audioWidget(),
],
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
padding: EdgeInsets.only(bottom: 25.0, left: 20.0),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
Colors.black
.withOpacity(0.8), // More opaque at the bottom
Colors.transparent, // Gradually becomes transparent
],
),
borderRadius: BorderRadius.circular(
0.0), // Consistent rounding on all sides
),
child: widget.fileType == 'video'
? userDetailsOverlay()
: Container(), // Display the user details overlay only for videos
),
),
],
),
),
);
```