Post
Ask Question

Xamarin.Forms - Video Player App

Introduction  

In this article, we are going to play a video and an audio in Xamarin.Forms application.There is no default function available for playing the video or audio. So, we need to add a plugin for this.
 
Nuget Packages

Xamarin.Forms = search "Plugin.MediaManager.Forms".
Xamarin.Android = search"Plugin.MediaMager".
 
MediaMager Cross-platform media plugin features
  •  Designed to be simple and easy to play
  •  Stand alone for easy integration with existing projects and frameworks
  •  Native playback of media files from remote and local sources
  •  Native media notifications and remote controls
  •  Playback status(Playing, Buffering, Loading, Paused, Progress)


Step 1

You can create Xamarin.Forms app by going to File >> New >> Visual C# >>Cross platform >>> Cross-platform App (Xamarin.Native or Xamarin.Forms), give the application name, and press OK.

(Project Name : VideoPlayerApp)

 
 
Step 2

After the project creation, add the following NuGet Packages to your project.
  • Plugin.MediaManager
  • Plugin.MediaManager.Forms

For that, go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for the Solution". Now, select the following NuGet Package and select your project to install it.

  • Plugin.MediaManager.Forms
 
Step 3

In this step, add a VideoView control to your project. For that, go to Solution Explorer >> VideoPlayerApp (PCL) >> double click on MainPage.Xaml. After opening this, you can add VideoView assembly and XAML code to your project.
 
Write the code as given below.
 
Assembly
  1. xmlns:forms="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms" 
XAML code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:VideoPlayerApp"  
  5.              x:Class="VideoPlayerApp.MainPage"  
  6.              xmlns:forms="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"  
  7.              Title="Video Player">  
  8.   
  9.     <ContentPage.Content>  
  10.         <StackLayout>  
  11.   
  12.             <Label Text="Xamarin Forms"  
  13.                    FontSize="40"  
  14.                    TextColor="Azure"/>  
  15.             <Label Text="Video Player Application"  
  16.                    FontSize="58"  
  17.                    TextColor="BlueViolet"/>  
  18.             <Button x:Name="PlayStopButtonText"  
  19.                     Text="Play"   
  20.                     Clicked="PlayStopButton"  
  21.                     TextColor="BlueViolet"/>  
  22.             <forms:VideoView HeightRequest="202"  
  23.                              WidthRequest="202"  
  24.                              />  
  25.         </StackLayout>  
  26.     </ContentPage.Content>  
  27.   
  28. </ContentPage>   
 
 
Step 4

Next, open Solution Explorer >> VideoPlayerApp(PCL) >> MainPage.xaml.cs page and double-click to open its design view. The code is given below.
 
cs code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Xamarin.Forms;  
  7. using Plugin.MediaManager.Forms;  
  8. using Plugin.MediaManager;  
  9. using Plugin.MediaManager.Abstractions.Enums;  
  10.   
  11. namespace VideoPlayerApp  
  12. {  
  13.     public partial class MainPage : ContentPage  
  14.     {  
  15.         private string videoUrl = "https://sec.ch9.ms/ch9/e68c/690eebb1-797a-40ef-a841-c63dded4e68c/Cognitive-Services-Emotion_high.mp4";  
  16.         public MainPage()  
  17.         {  
  18.             InitializeComponent();  
  19.         }  
  20.   
  21.           
  22.         private void PlayStopButton(object sender,EventArgs e)  
  23.         {  
  24.             if (PlayStopButtonText.Text == "Play")  
  25.             {  
  26.                 CrossMediaManager.Current.Play(videoUrl, MediaFileType.Video);  
  27.   
  28.                 PlayStopButtonText.Text = "Stop";  
  29.             }  
  30.             else if (PlayStopButtonText.Text == "Stop")  
  31.             {  
  32.                 CrossMediaManager.Current.Play(videoUrl, MediaFileType.Video);  
  33.   
  34.                 PlayStopButtonText.Text = "Play";  
  35.             }  
  36.         }  
  37.     }  
  38. }   
 
 
Step 5

Make sure to call " VideoViewRenderer.Init(); " from your platform code before starting playback, otherwise the video View will not be prepared to display the video.
 
Android Project

Add Android project by going to Solution Explorer >> VideoPlayerApp.Droid >>MainActivity.cs and double-click to open its design View. Here is the code.
 
MainActivity.cs  page code
  1. using System;  
  2.   
  3. using Android.App;  
  4. using Android.Content.PM;  
  5. using Android.Runtime;  
  6. using Android.Views;  
  7. using Android.Widget;  
  8. using Android.OS;  
  9. using Plugin.MediaManager.Forms.Android;  
  10.   
  11. namespace VideoPlayerApp.Droid  
  12. {  
  13.     [Activity(Label = "VideoPlayerApp", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]  
  14.     public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity  
  15.     {  
  16.         protected override void OnCreate(Bundle bundle)  
  17.         {  
  18.             TabLayoutResource = Resource.Layout.Tabbar;  
  19.             ToolbarResource = Resource.Layout.Toolbar;  
  20.   
  21.             base.OnCreate(bundle);  
  22.   
  23.             VideoViewRenderer.Init();//Nuget Packages oncreate mathod  
  24.   
  25.             global::Xamarin.Forms.Forms.Init(this, bundle);  
  26.             LoadApplication(new App());  
  27.         }  
  28.     }  
  29. }  
IOS Project

Add iOS project. For that, go to Solution Explorer >> VideoPlayerApp.IOS >>AppDelegate.cs and click open AppDelegate.cs. Here is the code for this page.
 
AppDelegate.cs page code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4.   
  5. using Foundation;  
  6. using Plugin.MediaManager.Forms.iOS;  
  7. using UIKit;  
  8.   
  9. namespace VideoPlayerApp.iOS  
  10. {  
  11.     // The UIApplicationDelegate for the application. This class is responsible for launching the   
  12.     // User Interface of the application, as well as listening (and optionally responding) to   
  13.     // application events from iOS.  
  14.     [Register("AppDelegate")]  
  15.     public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate  
  16.     {  
  17.         //  
  18.         // This method is invoked when the application has loaded and is ready to run. In this   
  19.         // method you should instantiate the window, load the UI into it and then make the window  
  20.         // visible.  
  21.         //  
  22.         // You have 17 seconds to return from this method, or iOS will terminate your application.  
  23.         //  
  24.         public override bool FinishedLaunching(UIApplication app, NSDictionary options)  
  25.         {  
  26.             global::Xamarin.Forms.Forms.Init();  
  27.             LoadApplication(new App());  
  28.   
  29.             VideoViewRenderer.Init();// nuget packages oncreate mathod   
  30.   
  31.   
  32.             return base.FinishedLaunching(app, options);  
  33.         }  
  34.     }  
  35. }  
Universal Windows Project

Add Universal Windows project. For that, open Solution Explorer >> VideoPlayerApp.UWP >> MainPage.xaml.cs and click open MainPage.xaml.cs.
 
Add the below given code to this page.
 
MainActivity.xaml.cs page code
  1. using Plugin.MediaManager.Forms.UWP;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.IO;  
  5. using System.Linq;  
  6. using System.Runtime.InteropServices.WindowsRuntime;  
  7. using Windows.Foundation;  
  8. using Windows.Foundation.Collections;  
  9. using Windows.UI.Xaml;  
  10. using Windows.UI.Xaml.Controls;  
  11. using Windows.UI.Xaml.Controls.Primitives;  
  12. using Windows.UI.Xaml.Data;  
  13. using Windows.UI.Xaml.Input;  
  14. using Windows.UI.Xaml.Media;  
  15. using Windows.UI.Xaml.Navigation;  
  16.   
  17. namespace VideoPlayerApp.UWP  
  18. {  
  19.     public sealed partial class MainPage  
  20.     {  
  21.         public MainPage()  
  22.         {  
  23.             this.InitializeComponent();  
  24.   
  25.             VideoViewRenderer.Init();  
  26.   
  27.             LoadApplication(new VideoPlayerApp.App());  
  28.         }  
  29.     }  
  30. }  
Step 6

Click ' F5 ' or "Build " to run your projects. Running this project, you will have the result like below.

 
 
Finally, we have successfully created a Xamarin.Forms VideoPlayerApp Application.


Similar Articles