Playing video picked using MediaGallery on MediaElement

Question

Using MediaGallery.PickAsync(3, MediaFileType.Video) I can get video streams and the names of the video files without extension. Now I need to play it on MediaElement from Xamarin Community Toolkit. But MediaElement's Source does not take Stream. I tried to save the Stream to a local file, so that I can get a file path as input to Source. But that didn't work.

I later tried to use FilePicker.PickMultipleAsync() and set its PickOptions' FileType to be Videos. But the folder that the pick opens for pick video is not the video gallery on a device.

Is there a way to make either method work?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

I tried to save the Stream to a local file, so that I can get a file path as input to Source. But that didn't work.

Here is my code to copy the mp4 file to this path "/data/user/0/com.companyname.app142/files/minions.mp4" it work as normal.

Here is my code. I use Button to pick a video file, then set the path to the MyMediaElement.Source = MediaSource.FromFile(VideoPath);

   private async void Button_Clicked(object sender, EventArgs e)  
           {  
               var cts = new CancellationTokenSource();  
               IMediaFile[] files = null;  
     
               try  
               {  
                   var request = new MediaPickRequest(1, MediaFileType.Image, MediaFileType.Video)  
                   {  
                       PresentationSourceBounds = System.Drawing.Rectangle.Empty,  
                       UseCreateChooser = true,  
                       Title = "Select"  
                   };  
     
                   cts.CancelAfter(TimeSpan.FromMinutes(5));  
     
                   var results = await MediaGallery.PickAsync(request, cts.Token);  
                    
                     files = results?.Files?.ToArray();  
     
                   if (files == null)  
                       return;  
     
                   foreach (var file in files)  
                   {  
                       var fileName = file.NameWithoutExtension; //Can return an null or empty value  
                       var extension = file.Extension;  
                       var contentType = file.ContentType;  
     
                       var newFile = Path.Combine(FileSystem.AppDataDirectory, fileName+".mp4");  
                       using (var stream = await file.OpenReadAsync())  
                       using (var newStream = File.OpenWrite(newFile))  
                           await stream.CopyToAsync(newStream);  
     
                       VideoPath = newFile;  
                        
                     
                       file.Dispose();  
     
                       MyMedia.Source = MediaSource.FromFile(VideoPath);  
     
                   }  
     
                     
               }  
               catch (OperationCanceledException)  
               {  
                   // handling a cancellation request  
               }  
               catch (Exception)  
               {  
                   // handling other exceptions  
               }  
               finally  
               {  
                   cts.Dispose();  
               }  
     
           }  

Her is my layout code.

   <StackLayout>  
     
           <behaviors:MediaElement x:Name="MyMedia"  
                                     HeightRequest="200"  
                   Aspect="AspectFill"  
                   AutoPlay="True"  
                 ShowsPlaybackControls="True" />  
     
           <Button Clicked="Button_Clicked" Text="Login"/>  
       </StackLayout>  

Here is running screenshot.

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.