Skip to main content

Video Player


Grial provides a cross-platform video player available in Xamarin.Forms that is fully skin-able through XAML templates.

You can use it to put a video as a page background in auto-repeat mode, or as a regular player. It supports fullscreen mode, includes error handling, different aspect modes, and you can opt between the native platform controls or use your own Xaml skin to have a customized cross-platform style.

It can reproduce local and remote mp4 and videos from YouTube.

Video Playermask

VideoPlayer Properties

AspectAspectVideo aspect (AspectFit, AspectFill and Fill)
AutoPlayboolAutomatically play video after loading
DurationTimeSpan(readonly) Duration of the loaded video
ErrorTemplateControlTemplateA template to show when there is an error. Te target type is UXDivers.Grial.VideoPlayerErrorSkin, see below
IsLoadingbool(readonly)Indicates if the video is loading
IsMutedboolIndicates if the video is muted
LoadingSpinnerColorColorLoading spinner color, used in the default loading template and can be used from a custom loading template when defined
LoadingTemplateControlTemplateA template to show when the video is loading. Te target type is UXDivers.Grial.VideoPlayerLoadingSkin, see below
PositionTimeSpanGet or sets the position of the video
RepeatboolIndicates if the video will repeat when reaching the end
SkinAutohideMillisecondsDelayintThe skin auto-hides by default in 4 seconds when the video is playing. This property allows tweaking that
SkinTemplateControlTemplateA template to show the video controls (play, pause, stop, duration, slider, etc) after the video is loading. Te target type is UXDivers.Grial.VideoPlayerSkin
SourcestringUrl (online mp4 videos and YouTube links) or local mp4 files (filename and extension)
ThumbnailImageSourcePreview image to show before the video starts playing, used in the default thumbnail template and can be used from a custom thumbnail template
ThumbnailTemplateControlTemplateA template to show before the video starts playing. Te target type is UXDivers.Grial.VideoPlayerThumbnailSkin
UseNativeControlsboolUse platform controls (Android and iOS) instead of a player custom skin

VideoPlayer Events

EndedEventFired when a the video reach the end.
ErrorEventFired when there is an error while loading the video.
Args: VideoPlayerErrorEventArgs { Error: string, Exception: Exception }

VideoPlayer Methods

PausePause the video
PlayPlay the video
HideSkinHides the player skin
ShowSkinShow the player skin
StopStop the video
ToggleFullScreenSwaps between full screen and inline playing


The video player supports 4 different ControlTemplates:

  • LoadingTemplate
  • ErrorTemplate
  • ThumbnailTemplate
  • SkinTemplate

Each of these targets a specific skin control type defined just to expose properties and commands to be consumed from these templates. Let's see the API of each skin control type.


The skin control is VideoPlayerLoadingSkin. The default template uses an activity indicator.

SpinnerColorColor(readonly) Control to be used in the spinner, comes from the LoadingSpinnerColor property of the video player.


The skin control is VideoPlayerErrorSkin. The default template uses a label to show the error message.

Messagestring(readonly) Error message
RetryCommandICommandA command that can be used to retry


The skin control is VideoPlayerThumbnailSkin. The default template uses an image to show the thumbnail.

ThumbnailImageSource(readonly) The image to display as thumbnail, comes from the Thumbnail property of the video player
PlayCommandICommandA command that can be used to start the video


The skin control is VideoPlayerSkin. This is the most complex skin control because it needs to support all the interactions needed for a loaded video player.

PositionTimeSpan(readonly) The current position
DurationTimeSpan(readonly) The video duration
IsFullScreenbool(readonly) Indicates if the video is in fullscreen mode or not
IsPlayingbool(readonly) Indicates if the video is playing or not
IsMutedbool(readonly) Indicates if the video is muted or not
Repeatbool(readonly) Indicates if the video should restart when reaching the end
VideoProgressdoubleA value between 0 and 1 designed for two-way bindings to control the position in the video
PlayCommandICommandThe command to play the video
PauseCommandICommandThe command to pause the video
StopCommandICommandThe command to stop the video
ToggleFullScreenCommandICommandThe command to toggle the fullscreen mode (see below for more information about this mode)
ToggleMuteCommandICommandThe command to mute/unmute
ToggleRepeatICommandThe command to toggle the repeat mode

As an example, a super simple template with just a play/pause button would look like this:

<ControlTemplate x:Key="VideoPlayerSkin">
IsVisible="{ TemplateBinding IsPlaying, Converter={ StaticResource NegateBooleanConverter } }"
Command="{ TemplateBinding PlayCommand }"

IsVisible="{ TemplateBinding IsPlaying }"
Command="{ TemplateBinding PauseCommand }"

Grial comes with a full template for this. See below.


The video player supports toggling between inline and full screen modes. To enable that you just need to wrap it inside a VideoPlayerContainer:


After that, the ToggleFullScreenCommand from the VideoPlayerSkin (see above) can be used to swap between modes.

Grial also includes a helper behavior called FullScreenVideoBehavior that can be used to open a video in full screen mode when clicking a button like this:

<Button Text="Play video">
SkinTemplate="{ StaticResource VideoPlayerSkin }"

Look and Feel

The Grial video player look and feel can be modified through the following file:

|_ Styles
|_ VideoPlayer
|_ VideoPlayerResources.xaml

It contains all resources in charge of setting the appearance of the video player skin such as icons, colors, sizes, etc., but the most important is the "VideoPlayerSkin" ControlTemplate which is the default look and feel of the Grial video player.

There's one important named style for the video player named "BackgroundVideoPlayerStyle" which is helpful for using videos as background.