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,

 

 

Step 2

 

Right-click on the solution file and click on Manage dependencies and install the Xamarin community toolkit.

 

 

Step 3

 

Go to Android manifest and enable the internet and storage access permissions as shown below

 

 

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.

 

 

Step 5

 

In the shared project, open MainPage.Xaml and add Xamarin community namespace.

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.

 

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <ActivityIndicator x:Name="busyindicator" />
        <StackLayout Spacing="20">
            <xct:MediaElement x:Name="mediaelement" HeightRequest="200" ShowsPlaybackControls="True"/>
        </StackLayout>
        <StackLayout Orientation="Horizontal" Spacing="10">
            <Button  Text="Play Online Video" Clicked="PlayOnlineVideo"/>
            <Button  Text="Play local Video" Clicked="PlayLocalVideo"/>
        </StackLayout>
</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.

 

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        Xamarin.Essentials.Permissions.RequestAsync<Xamarin.Essentials.Permissions.StorageRead>();
        //by default lets set source to internet link
        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";


    }

    private void PlayOnlineVideo(object sender, EventArgs e)
    {
        busyindicator.IsRunning = true;
        busyindicator.IsVisible = true;
        mediaelement.Stop();
        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";
        busyindicator.IsRunning = false;
        busyindicator.IsVisible = false;
    }

    private void PlayLocalVideo(object sender, EventArgs e)
    {
        busyindicator.IsRunning = true;
        busyindicator.IsVisible = true;
        mediaelement.Stop();
        mediaelement.Source = "ms-appx:///Sheep.mp4";
        busyindicator.IsRunning = false;
        busyindicator.IsVisible = false;
    }
}

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!!!.