Xamarin.Forms - Video Player App

• 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)

• 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">
9. <ContentPage.Content>
10. <StackLayout>
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>
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;
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. }
22. private void PlayStopButton(object sender,EventArgs e)
23. {
24. if (PlayStopButtonText.Text == "Play")
25. {
26. CrossMediaManager.Current.Play(videoUrl, MediaFileType.Video);
28. PlayStopButtonText.Text = "Stop";
29. }
30. else if (PlayStopButtonText.Text == "Stop")
31. {
32. CrossMediaManager.Current.Play(videoUrl, MediaFileType.Video);
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;
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;
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;
21. base.OnCreate(bundle);
23. VideoViewRenderer.Init();//Nuget Packages oncreate mathod
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;
5. using Foundation;
6. using Plugin.MediaManager.Forms.iOS;
7. using UIKit;
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());
29. VideoViewRenderer.Init();// nuget packages oncreate mathod
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;
17. namespace VideoPlayerApp.UWP
18. {
19. public sealed partial class MainPage
20. {
21. public MainPage()
22. {
23. this.InitializeComponent();
25. VideoViewRenderer.Init();
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.