Rock Mobile Docs

Media Player

Mv6.0 Cv12.4

Inherits from Maui.CommunityToolkit.MediaElement

This versatile control lets you play audio and video files natively within your app. It offers a wide range of properties to customize the playback experience and includes expected OS-level features like fullscreen, picture-in-picture, TV casting, captions (when available), and more.

Elevate your content experience by integrating with Rock’s Media Accounts. When powered by a Media Element, the associated watch map unlocks features like analytics and cross-platform watch history—so users can start playback on one device and pick up right where they left off on another, as long as they're signed in.

Tip

When playing videos, it's recommended to provide the HLS format over a fixed resolution. This allows the player to determine the appropriate resolution based on network speed, so people with a slower connection aren't forced to buffer a high resolution video.

Note

The Media Player received major updates in v6. While all existing properties from earlier versions should still function, they’re now 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	iOS only. Indicates whether Picture in Picture is enabled. Defaults to true.

Watch Map Properties

Mv2.0 Cv12.4

The easiest way to get data needed for a Watch Map is to use the AppendWatches filter.

Property	Type	Description
SaveChanges	bool	If true then changes to the watch map will be saved to the server. Defaults to true.
WatchMap	string	Encoded representation of the previously saved watch map. Defaults to null.
InteractionGuid	Guid?	Identifier of the existing Interaction. Defaults to null.
MediaElementGuid	Guid?	Identifier of the MediaElement. Required to save changes. Defaults to null.
RelatedEntityTypeId	int?	Optional value for RelatedEntityTypeId. Defaults to null.
RelatedEntityId	int?	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.

Property	Type	Description	Default Value
Aspect	Aspect	Determines the scaling mode for the media.	Aspect.AspectFit
ShouldAutoPlay	bool	Automatically start playback when the Source is set. Bindable.	false
ShouldLoopPlayback	bool	Resume playback after reaching the end. Bindable.	false
ShouldKeepScreenOn	bool	Keep screen active during playback. Bindable.	false
ShouldMute	bool	Whether the audio is muted. Bindable.	false
ShouldShowPlaybackControls	bool	Show platform playback controls. Shown briefly on iOS/Windows. Bindable.	true
Source	string	Media source URL.
Speed	double	Playback speed. Bindable.	1

Examples

A simple player with Source defined:

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

Inclusion of the WatchMap object and some properties:

<Rock:MediaPlayer Source="https://example.com/video_file.mp4">
  <Rock:MediaPlayer.WatchMap>
      <Rock:WatchMapParameters MediaElementGuid="{{ mediaElement.Guid }}"
          InteractionGuid="{{ interactionGuid }}"
          WatchMap="{{ watchMap }}" />
  </Rock:MediaPlayer.WatchMap>
</Rock:MediaPlayer>

This example shows how to pull the Watch Map data directly via SQL, if the AppendWatches filter in Lava isn't a good fit.

<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>