Rock Mobile Docs

Media Player

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

Inherits from Maui.CommunityToolkit.MediaElement

Note

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 NameTypeDescription
TitlestringThe title of the media being played.
SubtitlestringThe subtitle of the media being played.
IsCastEnabledboolIndicates if casting to external devices is enabled.
ThumbnailSourcestringThe source of the thumbnail image.
WatchMapWatchMapParametersParameters for watching the media with mapped data.
PlaybackCompletedCommandICommandCommand executed when media playback is completed.
PlaybackCompletedCommandParameterobjectParameter for the playback completed command.
ThumbnailPositiondouble?The position of the thumbnail in the media timeline.
PlayButtonSourcestringThe source of the play button image.
InitialAspectRatiostringThe initial aspect ratio of the media player.
ShowThumbnailboolIndicates whether the thumbnail should be shown.
AllowsPictureInPicturePlaybackbooliOS only. Indicates whether Picture in Picture is enabled. Defaults to true.

Watch Map Properties

PropertyTypeDescription
SaveChangesboolIf true then changes to the watch map will be saved to the server. Defaults to true.
WatchMapstringEncoded representation of the previously saved watch map. Defaults to null.
InteractionGuidGuid?Identifier of the existing Interaction. Defaults to null.
MediaElementGuidGuid?Identifier of the MediaElement. Required to save changes. Defaults to null.
RelatedEntityTypeIdint?Optional value for RelatedEntityTypeId. Defaults to null.
RelatedEntityIdint?Optional value for RelatedEntityId. 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.  

PropertyTypeDescriptionDefault Value
AspectAspectDetermines the scaling mode for the media.Aspect.AspectFit
ShouldAutoPlayboolAutomatically start playback when the Source is set. Bindable.false
ShouldLoopPlaybackboolResume playback after reaching the end. Bindable.false
ShouldKeepScreenOnboolKeep screen active during playback. Bindable.false
ShouldMuteboolWhether the audio is muted. Bindable.false
ShouldShowPlaybackControlsboolShow platform playback controls. Shown briefly on iOS/Windows. Bindable.true
SourcestringMedia source URL.
SpeeddoublePlayback speed. Bindable.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.