Getting Started With Xamarin Forms Media Element

Introduction

 
In our current situation of a pandemic era, people have resorted to online content and there is a surge in content being created every day. The most prevalent is video content which is reforming learning at a rapid pace. Many companies are starting to build learning apps that consume video content, and we need robust control to render in a cross-platform way.
 
With Xamarin forms 5, we have a Xamarin community Toolkit that has some of the best cross-platform controls like Tabview, Shadows, Grid, MVVMHelpers, etc. Them Media element is powerful control to consume Audio/Video from online or offline sources in a most efficient way. In this article, we will see how to consume an online video using the Media element.
 
Prerequisites
  1. Visual studio 2019
  2. Xamarin forms 5 and above
  3. Android or iOS emulator/device
Step 1
 
Create Xamarin forms solution in visual studio by selecting an empty application template as shown below,
 
Getting Started With Xamarin Forms Media Element
 
Step 2
 
Right-click on the solution file and click on Manage dependencies and install the Xamarin community toolkit.
 
Getting Started With Xamarin Forms Media Element
 
Step 3
 
Go to Android manifest and enable the internet and storage access permissions as shown below
 
Getting Started With Xamarin Forms Media Element
 
Step 4
 
Now under the resource folder create a subfolder named raw and add the local media file in it and set its build action as an Android resource.
 
Getting Started With Xamarin Forms Media Element
 
Step 5
 
In the shared project, open MainPage.Xaml and add Xamarin community namespace.
  1. xmlns:xct="http://xamarin.com/schemas/2020/toolkit"   
Step 6
 
Delete the contents of the Stack layout and add the below code to create a Media element and set its height and width. We will also create two buttons for demonstrating online and offline video playback.
 
Getting Started With Xamarin Forms Media Element
  1. <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">    
  2.         <ActivityIndicator x:Name="busyindicator" />    
  3.         <StackLayout Spacing="20">    
  4.             <xct:MediaElement x:Name="mediaelement" HeightRequest="200" ShowsPlaybackControls="True"/>    
  5.         </StackLayout>    
  6.         <StackLayout Orientation="Horizontal" Spacing="10">    
  7.             <Button  Text="Play Online Video" Clicked="PlayOnlineVideo"/>    
  8.             <Button  Text="Play local Video" Clicked="PlayLocalVideo"/>    
  9.         </StackLayout>    
  10. </StackLayout>    
Step 7
 
In code-behind file request storage permission using Xamarin essential API.
 
Step 8
 
Add the below code to set the source to the media element. By default, we will set the online URL as the source. In button event handlers we will set the source for offline and online sources.
 
Getting Started With Xamarin Forms Media Element
  1. public partial class MainPage : ContentPage  
  2. {  
  3.     public MainPage()  
  4.     {  
  5.         InitializeComponent();  
  6.         Xamarin.Essentials.Permissions.RequestAsync<Xamarin.Essentials.Permissions.StorageRead>();  
  7.         //by default lets set source to internet link  
  8.         mediaelement.Source = "https://rdstorageaccountdemo.blob.core.windows.net/asset-5e15f629-9e69-41a8-b785-c53161342d27/Waves%20-%2070796.mp4?sp=r&st=2021-04-29T14:41:00Z&se=2021-04-29T22:41:00Z&spr=https&sv=2020-02-10&sr=b&sig=Mhlbagq4F0h8JEblO59by%2FiMqXVKQqpeO4SgFI%2FD%2FQ4%3D";  
  9.   
  10.   
  11.     }  
  12.   
  13.     private void PlayOnlineVideo(object sender, EventArgs e)  
  14.     {  
  15.         busyindicator.IsRunning = true;  
  16.         busyindicator.IsVisible = true;  
  17.         mediaelement.Stop();  
  18.         mediaelement.Source = "https://rdstorageaccountdemo.blob.core.windows.net/asset-5e15f629-9e69-41a8-b785-c53161342d27/Waves%20-%2070796.mp4?sp=r&st=2021-04-29T14:41:00Z&se=2021-04-29T22:41:00Z&spr=https&sv=2020-02-10&sr=b&sig=Mhlbagq4F0h8JEblO59by%2FiMqXVKQqpeO4SgFI%2FD%2FQ4%3D";  
  19.         busyindicator.IsRunning = false;  
  20.         busyindicator.IsVisible = false;  
  21.     }  
  22.   
  23.     private void PlayLocalVideo(object sender, EventArgs e)  
  24.     {  
  25.         busyindicator.IsRunning = true;  
  26.         busyindicator.IsVisible = true;  
  27.         mediaelement.Stop();  
  28.         mediaelement.Source = "ms-appx:///Sheep.mp4";  
  29.         busyindicator.IsRunning = false;  
  30.         busyindicator.IsVisible = false;  
  31.     }  
  32. }  
Step 9
 
Build the project and run the android project.
 
DEMO
 
Click below URTL to see the demo in action: Xamarin Media element demo on Vimeo
 

Conclusion

 
We have seen how to use the basic features of media control in this article and it has a lot more to offer like audio/video events, playback control customization, and buffer setting .Users are advised to refer to Microsoft documentation and try various options. Happy coding!!!.