By Doumer

• Uncategorized ,
• 16 May

Hi friends welcome back for another post. Today we will talk about playing media in our Xamarin Forms apps. We won’t be using Xamarin Community Toolkit’s media element. Instead, we will use a VLC media player in Xamarin Forms. Why? because VLC media player can be an awesome alternative to the native media players available in Android and iOS. These native players work well, but are limited and lack some important functionalities.

What is VLC Media Player

Xamarin.Mac was created as a tool for Apple technology application development using the C# programming language. Xamarin.Mac, as with Xamarin.iOS and Xamarin.Android, gives developers up to 90% of code reuse across Android, iOS and Windows.

VLC is a popular free open-source media player that is available on every major OS. It originated as a student project at l’ecole central de Paris. This project named VideoLan was initially meant to consist of a client and a server, to stream videos across the school’s campus. VLC which stands for VideoLan Client was initially the client part of the project. Now it is mostly known for its powerful media player functionalities. Source: Wikipedia.

Why Use VLC Media Player in Xamarin Forms

You might ask yourself; why do we need another media player, when Android and iOS have their native media players. The answer is simple, the native media players on each of these platforms are not powerful enough to handle certain scenarios like HLs streaming, Some file formats, and protocols… The VLC media player can be a great solution to implement these features in your app.

Xamarin Android Player. Xamarin Android Player supports running, testing, debugging, or demoing Android apps on PC like windows and MAC developed by Microsoft. Xamarin is popular among developers. It is free available for Windows and Mac OS. Xamarin is Cross-platform, Open source and t he platform for building Android and iOS apps with.NET and C#. Dec 15, 2014 Our Android Player is a high-speed hardware accelerated emulator, available on both Mac and PC, that integrates directly into Xamarin Studio and Visual Studio. Now, we’re exited to release a brand new update for the Android Player with several fixes and new features that will make developing Android apps even more enjoyable. For Android I have to start the emulator first, and as the standard Android emulator is unacceptably slow, I need to use XAP. Basically I am searching for a command similar to the 'normal' command./emulator -avd NameOfYourEmulator -partition-size 512 for Xamarin Android Player. Take advantage of native iOS and Android libraries in your Xamarin app for comprehensive and streamlined features. Access everything you need in one place Visual Studio for Mac has first-class support for Xamarin development on macOS, it has everything you need to build, design, and test stunning, high-performance apps on Mac with a fully.

What we will Cover Today

• Adding VLC Media Player to your Xamarin Forms project
• Playing media
• Important things to consider when using VLC Media Player
• Controlling media with VLC media player
• Streaming media from sources that require authentication
• The Media Player Element
• A brief note about playlist management

Adding VLC Media Player in Xamarin Forms Projects

It is very easy to get started with VLC media player. You first have to add appropriate nuget packages into your projects.

• Every Project (Platforms + shared project):
  • VideoLAN.LibVLC.Forms
• iOS Project
  • VideoLAN.LibVLC.iOS
• Android Project
  • VideoLAN.LibVLC.Android

Playing media

In this demo, we will play video, and this is done just as you would do if you want to play audio. First, on my main page, in XAML, I added the video view.

This video view will display the video we are playing. The next thing we have to do is, create a media player and pass the instance to the video view. Then we call the “Play” method of the media player. This plays the media we passed in the URL. This is very basic, the next thing is to control the media we are playing.

NOTE: If you want to play music, you need only to create the media player as we did above, and call its “Play” method. This plays media in your app, even when the app is in the background.

Important things to consider when using VLC Media Player

After using VLC library, and talking with the guys maintaining this awesome library I learned from them some important things to take into consideration when using VLC media player.

• After streaming your media, you should consider handling the disposal of the libvlcsharp objects (libvlc, media player, media)
• When playing multiple media items with VLC, it is better to use one libvlc instance only and multiple media players

Controlling Media

Now we know that playing media with VLC Media Player in Xamarin Forms is easy. The next thing is to let our users control the media just like any awesome media-playing app we know. For this, I added a set of buttons, sliders on our main page. The buttons will serve for (Play, Pause, Forward…) the sliders will be for volume and seek. We will go through each of these functionalities one by one. In the code behind our main page, I put the event handler methods for each of these actions performed on the UI.

Play, Pause and Stop

The most basic functionality a media-playing app should have is to play/pause media. We have above the “Play” method this method lets us play a media item passed to the media player. This is fine if we are playing media for the first time, thus we want to start playing from the beginning of the media. But what if we want to play, pause when the user wants, and resume later? This is easy, as we can see below.

Now, once we are done playing, what if we want to stop the media? Easy… check how it is done below.

Move Forward, Backward and Seek-to Specific Time

Now, our user doesn’t want to watch a specific part of our movie, what does he do ? he moves the stream forward. What if he changes his mind and wants to go back? What if he wants to watch only a specific part of the movie and wants to seek the stream to that part? VLC Media Player got you covered. This is how we do it.

Note that the media player item has a “Time” property. We can set a value to this property that will correspond to the time position where we want it to stream.

Once we do that, we can use the above method to move forward or backward for 10 seconds in this example.

When a user moves the duration slider, it causes the slider’s value to change. Since our slider has a min value of 0 and a max value of 100, we can consider its value as a percentage played and that left to play. The VLC Media Player provides us the “Position” property that is the movie’s position percentage in a range of 0.0 to 1. Taking this into consideration, here is how we can leverage it to implement the seek functionality.

Displaying Elapsed time and Duration

Users want to know how long our movies, music will last and how much of it they have already watched. So we need to implement this functionality too. To do this, we will need to subscribe to a few media player events (PositionChangedand Playing). When the media player starts playing, the “Playing” event is called. When this event is fired, we can get the media’s duration from the “Length” property of VLC media player object.

Duos-m Android Emulator

As time passes and the user streams more of the movie, we want to display how long he has been watching. We do this by subscribing to the player’s “TimeChanged” event. In there, we get the media player’s “Time” property and display it to the user.

Controlling Volume

If our users want to mute our player or increase the volume for some reason, it is extremely easy. To mute, here is how it is done.

To control the volume, it is even easier.

Streaming Media From Sources that Require Authentication

Most often, you won’t stream media from free public sources. You will need the player to authenticate to that source. Unfortunately, VLC does not have a built in system for authentication, last time I checked, this was to be implemented. But, luckily we have a way around this! To authenticate, instead of passing headers to the player, we use an http client to query the API with the appropriate headers, then create a stream to the resource that we pass to the player as a “StreamMediaInput“. Note, if you are downloading media to play locally on iOS, here is an article demonstrating how to download this data from an API that streams its content bytes by bytes.

Error Handling

Once the media player starts playing media, errors might occur. If it is streaming, the network connection might be interrupted for example. We listen to errors that occur in the player with the “EncounteredError” event.

The Media Player Element

The VLC Media Player Element is a view that contains a video view and controls already available to manipulate any media stream at its disposal. This offers a plug-and-play functionality you can leverage to quickly build apps that consume media without the burden of writing UI elements yourself. You can customize this control to suit your purpose. Read more about this in this post by Martin Finkel, who introduces this awesome control.

• This control derives from Xamarin Forms’ content view so, it behaves just as such. If its appearance is not very attractive to you (I’m sure it won’t be :-P) it can be modified and styled like any Xamarin forms control. Here is an example.
• This control actually requires Fontawesome to be installed, since its image assets depend on fontawesome, ( Note: this dependency on fontawesome is temporary, as mentioned by Martin Finkel in the article above). Note:You have to add font awesome the traditional way, that is in each platform project. Doing this in the shared project as recommended for the latest Xamarin forms releases didn’t work. If it does for you, please leave a comment.

Adding the media player element to your project is extremely easy. First, add font-awesome as mentioned above and add an instance of the media player element to your page. Then bind its properties to the ViewModel. In our source code, we added a small sample demonstrating how to use this control. The sample is inspired by this awesome demo.

Playlist Management With VLC Media Player

One of the features several media playing apps have in common, is allowing users to read through multiple items. VLC bindings for Xamarin only have a tiny portion of VLC’s native libraries list management. This portion can’t be used to manage playlists, and bringing this native code to Xamarin bindings is not planned as mentioned here by one of the engineers maintaining this library. Meaning that you need to implement your own playlist management logic on top of VLC. But this is not a big deal. The VLC media player has an event called “EndReached” this event is fired once the media that is currently playing ends. You can listen to this event and play the next item, or select a random item from your playlist, etc. This allows you to build your own playlist logic.

Conclusion

Today we covered one of the most powerful media players out available out there for mobile devs. I’ve been a long-time user of VLC on Windows, Linux, and Mac. Therefore, working with this amazing library was such a pleasure. I was working on a project that required media playing functionality, but iOS’s native player didn’t do the job. Luckily, VLC came in to save the day. This article contained a condensed version of some of the things I learned throughout this journey.

Useful Links

Follow me on social media and stay updated

I am excited to announce a cross-platform video player. This new Xamarin Forms component gives developers the ability to render the native video player for iOS, Android, and Windows Phone all from XAML, shared code, or a portable class library (PCL). I find video encoding and streaming to be a fun challenge no matter what I am developing for and was excited to learn there is currently no comprehensive solution to cross-platform video playback with Xamarin Forms.

I am hoping developers will enjoy improved productivity when developing mobile applications requiring video because you can now control many aspects of the playback experience from shared code. For example, you can register for events (Playing, Paused, Stopped, TimeElapsed, etc.) all from a single shared code base. The goal is to provide video playback that’s easy to use without having to handle the idiosyncrasies of each platform’s media framework.

Getting Started

If you are a Xamarin mobile developer, the only thing you need to do to get a working native video player on every platform is to install the component following the getting started section. Literally the one line declaration below is sufficient to supercharge your apps with video.

Specifying the Video Source

Xamarin Android Download

You may notice the Source property takes a VideoSource object. This was built to have very similar design and behavior to Xamarin’s ImageSource class. You could literally follow the tutorial for working with images and just swap out the word ImageSource for VideoSource. This means you have the ability to specify a video’s file location as a local file system path, a remote URL or as an embedded resource from an assembly.

When working with embedded resources though, I took it one step further and made it a little more extensible when attempting to locate resources. The order of searching assemblies to find embedded resources when calling VideoSource.FromResource(“MyVideo.mp4”) has the same behavior as calling ImageSource.FromResource(…) but the entry assembly (your iOS, Android, or Windows Phone proxy application) is also searched in the event no other match is found.

Playing YouTube and Vimeo Videos

The major video hosting sites allow developers to play content hosted by them in the applications they build. The Xamarin Forms video player sample application (called Chill Player) comes with some convenience XAML markup extensions that can convert YouTube and Vimeo video ID’s into the playback stream URLs compatible with the video player on each platform.

It’s important to note that using direct stream URLs in this manner may be against the terms of use for these sites. As such, this experimental feature is merely a convenience and will likely see low priority support going forward. Both YouTube and Vimeo expose public APIs which you are encouraged to integrate for use with this video player component.

Trial

Chirp Subsonic Xamarin Android

You can download the sample application and run it on all three platforms to try out the demo. The trial version limits video playback to 15 seconds. You can download the trial on Nuget.org. In trial mode, the video player just fails after 15 seconds of playback.

Support

Xamarin Android Player Download

If you need support and have purchased at least one copy of the component, you can open and browse tickets here.