How to play video with Xamarin forms?

11
votes

I have implemented the examples here: https://github.com/XLabs/Xamarin-Forms-Labs/wiki/Camera And am able to get an image from the camera successfully.

Additionally i have implemented the select video - but have no way to play the video...

I ended up putting up a browser window and playing the video off a remove page after uploading it. However, this is not idea, i want to play the video in the app after choosing it from the file system or the camera itself.

Has anyone managed to do this xamarin forms/forms labs without having to implement it in every single platform manually?

And if that is the ONLY way to do it, any examples of this? Thank you very much!

2
videoxamarinxamarin.formsxamarin.forms.labs
we ended up implementing three custom renderers, one for each platform. I am not sure if this is the best approach, though. Video seems common enough that it would warrant a framework-solution. – amenthes
I have seen an example of this but it did not work when ported to my app. Would you mind posting an example of your implementation? – Arachnid
I am using a WebView that only displays a video and a heading embedded into normal xaml layout. This kind of works on iOS, on Android and WinPhone I am still struggling though, since for Android there seem to be restrictions on accessing local files, or so it seems. WinPhone I dont know yet what the problem is. I dynamically generate the html with the correct video source. – Andreas Reiff
forums.xamarin.com/discussion/38405/… no answer yet – Andreas Reiff
Here's a related question to keep track of: stackoverflow.com/questions/29672385/… – Sten Petrov

2 Answers

3
votes

Try using Media Plugin

This one is easy to use and handy see the documentation given on above page

media Plugin is a simple cross platform plugin to take photos and video or pick them from a gallery from shared code.

Usage

Via a Xamarin.Forms project with a Button and Image to take a photo:

  takePhoto.Clicked += async (sender, args) =>
    {

      if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.PhotosSupported)
      {
        DisplayAlert("No Camera", ":( No camera avaialble.", "OK");
        return;
      }

      var file = await CrossMedia.Current.TakePhotoAsync(new Media.Plugin.Abstractions.StoreCameraMediaOptions
        {

          Directory = "Sample",
          Name = "test.jpg"
        });

      if (file == null)
        return;

      DisplayAlert("File Location", file.Path, "OK");

      image.Source = ImageSource.FromStream(() =>
      {
        var stream = file.GetStream();
        file.Dispose();
        return stream;
      }); 
    };
2
votes

You can check out the video player component on the Xamarin Forms component store. It allows you to render the native video player on iOS, Android, and Windows Phone. The code snippet below shows the simplest example of just dropping it in and using it. You also have the ability to hook into events like playing, paused, stopped, completed, etc. You can control volume, autoplay, and repeat among other things.

https://github.com/adamfisher/Xamarin.Forms.VideoPlayer

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:o="clr-namespace:Octane.Xam.VideoPlayer;assembly=Octane.Xam.VideoPlayer"
             x:Class="VideoPlayerSamples.VideoPlayerBasicExamplePage"
             Title="Basic Video Player">

    <o:VideoPlayer Source="http://vjs.zencdn.net/v/oceans.mp4" />

</ContentPage>

Disclaimer: This is my component.