Playing videos with flutter web and firebase storage

Question

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

Answer 1

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