I am trying to make a website in which the user can add videos and also see these videos. All of them are stored in firebase storage. This is how I store it
fb.StorageReference storageRef = fb.storage().ref('videos/$chapter)');
fb.UploadTaskSnapshot uploadTaskSnapshot = await storageRef.put(videoFile, fb.UploadMetadata(contentType: 'video/mp4')).future;
await uploadTaskSnapshot.ref.getDownloadURL().then((value){
videoUrl = value.toString();
});
snapshot.reference.collection("videos").add({
"chapter":chapter,
"class":grade,
"description":description,
"notes":notes,
"subject":subject,
"video":videoUrl,
"timestamp":DateTime.now().millisecondsSinceEpoch.toString()
});
And I play them using the normal video player plugin. Now the problem is when I store it, I get a url like
https://firebasestorage.googleapis.com/v0/b/studyme-me.appspot.com/o/videos%2Ff)?alt=media&token=ec4fea39-032b-438f-8122-f8e042c1c9c7
But the video player in flutter web requires a .mp4 or .wav or something like that file. What can I do that can either allow the video player to play these (I don't think its possible) or I can get the .mp4 file for this. Maybe I can use firebase storage to open this url and get it but I dont know how
Any suggestions would be appreciated
You can use the VideoPlayerController plugin to do that
VideoPlayerController controller = VideoPlayerController.network('your-video-url',);
//Play/Pause Video:
FloatingActionButton(
onPressed: () {
// Wrap the play or pause in a call to `setState`. This ensures the
// correct icon is shown
setState(() {
// If the video is playing, pause it.
if (_controller.value.isPlaying) {
_controller.pause();
} else {
// If the video is paused, play it.
_controller.play();
}
});
},
// Display the correct icon depending on the state of the player.
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
)
'''
more examples in the link above
Related
I am working on a music player app in flutter.
I fetch the songs from devices using on_audio_query package and display them in listview. When I click on a song, i set the plylist of all songs and play the one thats clicked using just_audio package like this.
await player.setAudioSource(
ConcatenatingAudioSource(
useLazyPreparation: true,
shuffleOrder: DefaultShuffleOrder(),
children: allSongsList! // allSongsList is the list of
songs(on_audio_query)
.map((songModel) =>
AudioSource.uri(Uri.parse(songModel.data)))
.toList(),
),
initialIndex: index, // Listview Index
initialPosition: Duration.zero);
await item.player.play();
I want to show miniplayer at the bottom only when there is a song playing(paused),refresh the song descriptions,how do I get the song description(Artist/song)?
I will let you the implementation of the mini player widget for you, however, I will consider that I have a shouldMiniPlayerBeVisible, in the Scaffold of your page:
First, declare and initialize a shouldMiniPlayerBeVisible variable that will manage the show/hide of the mini player:
bool shouldMiniPlayerBeVisible = false;
and a currentAudio which will take the song and pass it in the mini player.
YourAudioModel currentAudio = YourAudioModel();
Here, I supposed that I have a simple YourAudioModel which will hold information about audio such as title, description, length, URL (or local) path ...
I recommend not setting it to null initially , you can initialize it with a placeholder YourAudioModel audio model that has some dummy data, or loading data information for example...
now in your Scaffold:
Scaffold(
floatingActionButton: Visibility(
visible: shouldMiniPlayerBeVisible,
child: shouldMiniPlayerBeVisible(songToPlay: currentAudio),
),
),
I will consider that you are using a StatefulWidget, but the steps are the same as you need just to get the idea of it to implement it in other state management solutions.
in the initState, you need to listen to the playerStateStream stream like this:
player.playerStateStream.listen((state) {
if (state.playing) {
shouldMiniPlayerBeVisible = true;
} else {
shouldMiniPlayerBeVisible = false;
}
setState(() {});
});
this basically will track if any audio is playing or not, then show the mini player based on it.
now before your run the await item.player.play();, set your currentAudio variable to the new audio which is running, you can do it with a function like this:
Future<void> playCurrentAudioANdShowItInMiniPlayer(YourAudioModel audio) async {
currentAudio = YourAudioModel;
await item.player.play();
}
now from your UI, for each item in ListView, you can just call the playCurrentAudioANdShowItInMiniPlayer method with its YourAudioModeland expect it to work fine.
from here, you should implement the actual mini player widget, and you will need also a custom Navigator widget so that mini player will be on the screen even if you navigated to other screens, well I faced this issue before and the miniplayer worked just really fine and good as I expected, I recommend you to use it.
I am working on a flutter app and using chewie videoplayer plugin.So when we started playing a video it shows controls at bottom and after few seconds it vanishes and when we move the mouse again it shows again. so is there any method to find when the controls are shown on screen and when its not shown.
actually i am giving close button on the video player. but it doesnt vanishes with those video player controls. it still stay on screen so to hide that close button along with video controls i need to get which process hides the control.
Please help me...
This process is inside the source code of chewie player. So if you need to customize and synchronise your own custom controls and options, either you have to explicitly fetch the source code and edit in that or you need to make your own controllers from scratch using video_player package as the core.
You need to customize the source code of the chewie player.
You can find MaterialControl class inside the source code of this package there is a function called _buildHitArea() just change notifier.hideStuff boolean according to your preference.
Widget _buildHitArea() {
final bool isFinished = _latestValue.position >= _latestValue.duration;
final bool showPlayButton = widget.showPlayButton && !_dragging && !notifier.hideStuff;
return GestureDetector(
onTap: () {
if (_latestValue.isPlaying) {
if (_displayTapped) {
setState(() {
notifier.hideStuff = false;
});
} else {
_cancelAndRestartTimer();
}
} else {
_playPause();
setState(() {
notifier.hideStuff = false;
});
}
},
child: CenterPlayButton(
backgroundColor: Colors.black54,
iconColor: Colors.white,
isFinished: isFinished,
isPlaying: controller.value.isPlaying,
show: showPlayButton,
onPressed: _playPause,
),
);
}
I use the plugin just_audio
How can I continu my music after to do a pause? please.
void _play() {
audioPlayer.setAsset("assets/applause.mp3");
audioPlayer.play();
}
void _pause() async {
await audioPlayer.pause();
}
void _rePlay() async {
?????????????????????????
}
In general, after calling pause, call play to "resume".
In your case, you should NOT set the asset file again. This resets the process.
Below is your code, pasted from your question:
void _play() { // BAD EXAMPLE
audioPlayer.setAsset("assets/applause.mp3"); // <-- PROBLEM
audioPlayer.play();
}
You should move setAsset call elsewhere, like in init state.
You can just call audioPlayer.play(). This works exactly like the play button in a music app, while pause() works exactly like the pause button in a music app.
It is designed this way so that you can simply wire up your play and pause buttons directly to these player methods.
For example, here are the play/pause buttons from the just_audio example app:
// Play button:
IconButton(
icon: Icon(Icons.play_arrow),
onPressed: audioPlayer.play,
)
// Pause button:
IconButton(
icon: Icon(Icons.pause),
onPressed: audioPlayer.pause,
)
You can just alternate calls to play()/pause()/play()/pause(). Note the left side of this state diagram from the README:
I am having an issue with Flutter video_player where sometimes the video hangs and the sound is not in sync with the video. There is a delay of ~1 second between the video and sound. This only happens when playing certain videos, most videos are fine. I've checked that one of the affected videos is in the same format (mp4) as other videos and also have downloaded that video from my S3 bucket and have confirmed that it plays correctly in that case, so I believe it must be an issue with the video_player plugin. Here is my code to load the video controller. Is there any reason that videos would behave differently with this plugin where the audio and video are not in sync?
void loadVideo() async {
videoController =
VideoPlayerController.network(videoLink);
videoController.initialize().then((_) {
if (!mounted) {
// displays an error message if the video controller doesn't load
videoError = true;
setState(() {});
return;
}
setState(() {});
});
videoController.addListener(_listenForError);
}
void playVideo() async {
videoController.play();
}
Widget cameraWidget = Transform.scale(
scale: videoController.value.aspectRatio / deviceRatio,
child: AspectRatio(
aspectRatio: videoController.value.aspectRatio,
child: VideoPlayer(videoController),
),
);
Hi I'm using the flutter video player plugin, I have something similar like this [{phrase:"something", startAt: 1039}, {phrase:"other somthing", startAt: 26500}] is there a way to change in ui the phrase based on the start time while the video is playing.
I have try to use a timer with a duration of 100 ms but I retrieve no exact time from the Flutter video player plugin.
You probably want to take a look at stateful widgets as they allow you to do exactly this. In short, you can set phrase to be some variable and once the video starts you can call setState and change the variable. Flutter will automatically redraw the widget and the text will be updated.
To determine if the video player is playing you can add a listener to your video controller.
_controller = VideoPlayerController.network(
'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_20mb.mp4',
)
..addListener(() {
final bool isPlaying = _controller.value.isPlaying;
if (isPlaying != _isPlaying) {
setState(() {
_isPlaying = isPlaying;
});
}
})
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});