Xamarin Forms Play Video Using Octane Player

In this post we will see how we can use Octane Player Nuget package in Xamarin Forms. Using this Nuget package we can play any video in our Xamarin app.

Download Source Code.

Install the Octane Nuget package using this link.

Create a new Content page in your project with name Videos.xaml and edit it as below:

Videos.xaml:

<?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:videoplayer="clr-namespace:Octane.Xamarin.Forms.VideoPlayer;assembly=Octane.Xamarin.Forms.VideoPlayer"
x:Class="XamOctanePlayer.Videos"
Title="Xamarin Video Player">

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

<Grid.RowDefinitions>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<videoplayer:VideoPlayer x:Name="octaneVideo" Grid.Column="0" Grid.Row="0"
Margin="0,10,0,0"
HorizontalOptions="FillAndExpand" VerticalOptions="Start" HeightRequest="400"/>

<StackLayout Orientation="Vertical" Grid.Column="0" Grid.Row="1" HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" BackgroundColor="#e0e0e0">

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Start" Padding="2">
<Button x:Name="btnVid1" Text="Video 1" WidthRequest="200" VerticalOptions="Start" HorizontalOptions="Start"
Clicked="BtnVid1_Clicked" BackgroundColor="White"/>
<Button x:Name="btnVid2" Text="Video 2" WidthRequest="200" VerticalOptions="Start" HorizontalOptions="Start"
Clicked="BtnVid2_Clicked" BackgroundColor="White"/>
</StackLayout>

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Start" Padding="2">
<Button x:Name="btnVid3" Text="Video 3" WidthRequest="200" VerticalOptions="Start" HorizontalOptions="Start"
Clicked="BtnVid3_Clicked" BackgroundColor="White"/>
<Button x:Name="btnVid4" Text="Video 4" WidthRequest="200" VerticalOptions="Start" HorizontalOptions="Start"
Clicked="BtnVid4_Clicked" BackgroundColor="White"/>
</StackLayout>

</StackLayout>

</Grid>

</ContentPage>

Here I’m using a Octane video player control and four xamarin buttons to change videos on my player. For playing it, we simply supply video URL using source parameter.

Edit the code page has below:

Videos.xaml.cs:

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamOctanePlayer
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Videos : ContentPage
{
public Videos ()
{
InitializeComponent ();
NavigationPage.SetHasNavigationBar(this, true);
}

public async void PlayVideo(String url)
{
try
{
if (!String.IsNullOrWhiteSpace(url) && checkURI(url))
octaneVideo.Source = url;
else
{
await DisplayAlert("Invalid URL", "Please enter a valid URL", "Ok");

}
}
catch (Exception ex)
{
await DisplayAlert("Error", ex.Message.ToString(), "Ok");
octaneVideo.IsVisible = false;
}
}

public Boolean checkURI(String uri)
{
Uri check;
return Uri.TryCreate(uri, UriKind.Absolute, out check) && check.Scheme == Uri.UriSchemeHttps;
}

private async void BtnVid1_Clicked(object sender, EventArgs e)
{
PlayVideo("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4");
}

private async void BtnVid2_Clicked(object sender, EventArgs e)
{
PlayVideo("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4");
}

private async void BtnVid3_Clicked(object sender, EventArgs e)
{
PlayVideo("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4");
}

private async void BtnVid4_Clicked(object sender, EventArgs e)
{
PlayVideo("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
}
}
}

Download Source Code.

App screenshots: