Media Player

Stream content directly into your Rock Mobile application, with a ton of rich features built in.

Inherits from Maui.CommunityToolkit.MediaElement

The Media Player was heavily updated in version 6. If you need to see the documentation for the legacy component, you can view that here.

For those upgrading, all of the previously existing properties should work, but are considered deprecated.

Properties

Property Name	Type	Description
Title	string	The title of the media being played.
Subtitle	string	The subtitle of the media being played.
IsCastEnabled	bool	Indicates if casting to external devices is enabled.
ThumbnailSource	string	The source of the thumbnail image.
WatchMap	WatchMapParameters	Parameters for watching the media with mapped data.
PlaybackCompletedCommand	ICommand	Command executed when media playback is completed.
PlaybackCompletedCommandParameter	object	Parameter for the playback completed command.
ThumbnailPosition	double?	The position of the thumbnail in the media timeline.
PlayButtonSource	string	The source of the play button image.
InitialAspectRatio	string	The initial aspect ratio of the media player.
ShowThumbnail	bool	Indicates whether the thumbnail should be shown.
AllowsPictureInPicturePlayback	bool	Only relevant on iOS. A flag indicating whether or not Picture in Picture is enabled for the player. Defaults to true.

Watch Map Properties

Property	Type	Description
SaveChanges	bool	If true then changes to the watch map will be saved to the server if possible. Defaults to true.
WatchMap	string	A special run length encoded representation of the watch map that was previously saved. Defaults to null.
InteractionGuid	Guid?	The unique identifier of an existing Interaction to be updated. If the interaction cannot be found or does not match this video then a new interaction will be created. Defaults to null.
MediaElementGuid	Guid?	The unique identifier of the MediaElement that is being watched. This value is required to save changes. Defaults to null.
RelatedEntityTypeId	int?	An optional value to store in the interaction's RelatedEntityTypeId property. Defaults to null.
RelatedEntityId	int?	An optional value to store in the interaction's RelatedEntityId property. Defaults to null.

Inherited Properties

These properties are inherited from the control we built on top of. You can view a full list of the supported properties here, although we've trimmed down this documentation to only have the ones of interest.

Property	Type	Description	Default Value
Aspect	Aspect	Determines the scaling mode for the (visual) media that	Aspect.AspectFit
ShouldAutoPlay	bool	Indicates whether media playback will begin automatically when the Source property is set. This is a bindable property.	false
ShouldLoopPlayback	bool	Describes whether the currently loaded media source should resume playback from the start after reaching its end. This is a bindable property.	false
ShouldKeepScreenOn	bool	Determines whether the device screen should stay on during media playback. This is a bindable property.	false
ShouldMute	bool	Determines whether the audio is currently muted. This is a bindable property.	false
ShouldShowPlaybackControls	bool	Determines whether the platforms playback controls are displayed. This is a bindable property. Note that on iOS and Windows the controls are only shown for a brief period after interacting with the screen. There is no way of keeping the controls visible at all times.	true
Source	string	The source of the media loaded into the control.	The source of the media loaded into the control.
Speed	double	Determines the playback speed of the media. This is a bindable property	1

Examples

<Rock:MediaPlayer Source="https://example.com/video_file.mp4" 
                  ShouldAutoPlay="false" />

<Grid>
    {% mediaelement id:'1' %}
        {% assign interactionGuid = null %}
        {% assign watchMap = null %}
        
        {% if CurrentPerson and CurrentPerson != null %}
            {% sql personId:'{{ CurrentPerson.Id }}' mediaId:'{{ mediaelement.Id }}' %}
SELECT TOP 1

[I].[Guid],
[I].[InteractionData]

FROM [Interaction] AS [I]
INNER JOIN [InteractionComponent] AS [IComp] ON [IComp].[Id] = [I].[InteractionComponentId]
INNER JOIN [InteractionChannel] AS [IChan] ON [IChan].[Id] = [IComp].[InteractionChannelId]
INNER JOIN [PersonAlias] AS [PA] ON [PA].[Id] = [I].[PersonAliasId]

WHERE [IChan].[Guid] = 'D5B9BDAF-6E52-40D5-8E74-4E23973DF159'
  AND [PA].[PersonId] = @personId
  AND [IComp].[EntityId] = @mediaId
  AND [I].[InteractionDateTime] >= DATEADD(DAY, -7, GETDATE())

ORDER BY [I].[InteractionDateTime] DESC
            {% endsql %}
            
            {% assign result = results | First %}
            {% if result != null %}
                {% assign interactionGuid = result.Guid %}
                {% assign watchMap = result.InteractionData | FromJSON | Property:'WatchMap' %}
            {% endif %}
        {% endif %}

        <Rock:MediaPlayer Source="{{ mediaelement.DefaultFileUrl | Escape }}"
            ThumbnailSource="{{ mediaelement.DefaultThumbnailUrl | Escape }}">
            <Rock:MediaPlayer.WatchMap>
                <Rock:WatchMapParameters MediaElementGuid="{{ mediaelement.Guid }}"
                    {% if interactionGuid != null %}
                        InteractionGuid="{{ interactionGuid }}"
                        WatchMap="{{ watchMap }}"
                    {% endif %}
                    />
            </Rock:MediaPlayer.WatchMap>
        </Rock:MediaPlayer>
    {% endmediaelement %}
</Grid>

This second example shows how to configure the MediaPlayer to save the watch interaction when watching a media element video.