MediaElementPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<pages:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             xmlns:constants="clr-namespace:CommunityToolkit.Maui.Sample.Constants"
             xmlns:viewModels="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
             xmlns:converters="clr-namespace:CommunityToolkit.Maui.Sample.Converters"
             x:TypeArguments="viewModels:MediaElementViewModel"
             x:DataType="viewModels:MediaElementViewModel"
             x:Class="CommunityToolkit.Maui.Sample.Pages.Views.MediaElementPage"
             Title="MediaElement">
    <pages:BasePage.Resources>
        <converters:SecondsToStringConverter x:Key="SecondsToStringConverter" />
    </pages:BasePage.Resources>

    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="220" />
                <RowDefinition Height="50" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <toolkit:MediaElement
                x:Name="MediaElement"
                ShouldAutoPlay="True"
                Source="{x:Static constants:StreamingVideoUrls.BuckBunny}"
                MetadataArtworkUrl="https://lh3.googleusercontent.com/pw/AP1GczNRrebWCJvfdIau1EbsyyYiwAfwHS0JXjbioXvHqEwYIIdCzuLodQCZmA57GADIo5iB3yMMx3t_vsefbfoHwSg0jfUjIXaI83xpiih6d-oT7qD_slR0VgNtfAwJhDBU09kS5V2T5ZML-WWZn8IrjD4J-g=w1792-h1024-s-no-gm"
                MetadataTitle="Big Buck Bunny"
                MetadataArtist="Blender Foundation"
                MediaEnded="OnMediaEnded"
                MediaFailed="OnMediaFailed"
                MediaOpened="OnMediaOpened"
                PositionChanged="OnPositionChanged"
                StateChanged="OnStateChanged"
                SeekCompleted="OnSeekCompleted"
                ScreenStateChanged="MediaElement_FullScreenStateChanged"/>
            <HorizontalStackLayout Grid.Row="1" Padding="0,0,0,15">
                <Label HorizontalOptions="Center" x:DataType="toolkit:MediaElement">
                    <Label.Text>
                        <MultiBinding StringFormat="{}Current State: {0} - Dimensions: {1}x{2}">
                            <Binding Path="CurrentState" Source="{x:Reference MediaElement}" />
                            <Binding Path="MediaWidth" Source="{x:Reference MediaElement}" />
                            <Binding Path="MediaHeight" Source="{x:Reference MediaElement}" />
                        </MultiBinding>
                    </Label.Text>
                </Label>

            </HorizontalStackLayout>

            <Grid Grid.Row="2" Padding="0,10,0,10" ColumnDefinitions="*,*,*,*,*" ColumnSpacing="5">
                <Button Grid.Column="0" Text="Play" Clicked="OnPlayClicked" />
                <Button Grid.Column="1" Text="Pause" Clicked="OnPauseClicked" />
                <Button Grid.Column="2" Text="Stop" Clicked="OnStopClicked" />
                <Button Grid.Column="3" Text="Mute" Clicked="OnMuteClicked">
                    <Button.Triggers>
                        <DataTrigger TargetType="Button"
                                     x:DataType="toolkit:MediaElement"
                                     Binding="{Binding ShouldMute, Source={x:Reference MediaElement}}"
                                     Value="True">
                            <Setter Property="Text" Value="Unmute" />
                        </DataTrigger>
                        <DataTrigger TargetType="Button"
                                     x:DataType="toolkit:MediaElement"
                                     Binding="{Binding ShouldMute, Source={x:Reference MediaElement}}"
                                     Value="False">
                            <Setter Property="Text" Value="Mute" />
                        </DataTrigger>
                    </Button.Triggers>
                </Button>
                <Button Grid.Column="4" Text="Popup" Clicked="DisplayPopup" />
            </Grid>

            <Slider
                x:Name="PositionSlider"
                Grid.Row="3"
                MinimumTrackColor="Gray"
                DragStarted="Slider_DragStarted"
                DragCompleted="Slider_DragCompleted"/>

            <Grid Grid.Row="4" HorizontalOptions="Fill">
                <Label HorizontalOptions="Start" x:DataType="toolkit:MediaElement" Text="{Binding Position, Source={x:Reference MediaElement}, Converter={StaticResource SecondsToStringConverter}}" />
                <Label HorizontalOptions="End" HorizontalTextAlignment="End" x:DataType="toolkit:MediaElement" Text="{Binding Duration, Source={x:Reference MediaElement}, Converter={StaticResource SecondsToStringConverter}}" />
            </Grid>

            <VerticalStackLayout Padding="0,20,0,0" Grid.Row="5" Spacing="5">
                <Button Text="Change Source" Clicked="ChangeSourceClicked" />

                <Grid ColumnDefinitions="*, 100" ColumnSpacing="5">
                    <Entry x:Name="CustomSourceEntry" Placeholder="Enter URL" HorizontalOptions="Fill" />
                    <Button Grid.Column="1" Clicked="Button_Clicked" Text="Load" />
                </Grid>

                <Button Text="Change Aspect" Clicked="ChangeAspectClicked" />
            </VerticalStackLayout>

            <HorizontalStackLayout Grid.Row="6" Padding="0,10,0,10" Spacing="5">
                <Label Margin="20,10" x:DataType="toolkit:MediaElement">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Speed:" />
                            <Span Text="{Binding Source={x:Reference MediaElement}, Path=Speed}" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>

                <Button Text="-" Clicked="OnSpeedMinusClicked" />
                <Button Text="+" Clicked="OnSpeedPlusClicked" />
            </HorizontalStackLayout>

            <HorizontalStackLayout Grid.Row="7" Padding="0,10,0,10" Spacing="5">
                <Label Margin="20,10" x:DataType="toolkit:MediaElement">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="Volume:" />
                            <Span Text="{Binding Source={x:Reference MediaElement}, Path=Volume, StringFormat='{}{0:P0}'}" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>

                <Button Text="-" Clicked="OnVolumeMinusClicked" />
                <Button Text="+" Clicked="OnVolumePlusClicked" />
            </HorizontalStackLayout>
        
            <VerticalStackLayout Grid.Row="8">
                <HorizontalStackLayout Padding="0,0,0,10">
                    <Switch
                        Margin="0,0,5,0"
                        ThumbColor="White"
                        OnColor="LimeGreen"
                        x:DataType="toolkit:MediaElement"
                        IsToggled="{Binding Source={x:Reference MediaElement}, Path=ShouldShowPlaybackControls}" />
                    <Label
                        VerticalOptions="Center"
                        Text="Show playback controls" />
                </HorizontalStackLayout>
                <HorizontalStackLayout Padding="0,0,0,10">
                    <Switch
                        Margin="0,0,5,0"
                        ThumbColor="White"
                        OnColor="LimeGreen"
                        x:DataType="toolkit:MediaElement"
                        IsToggled="{Binding Source={x:Reference MediaElement}, Path=ShouldLoopPlayback}" />
                    <Label
                        VerticalOptions="Center"
                        Text="Loop media" />
                </HorizontalStackLayout>
                <HorizontalStackLayout>
                    <Switch
                        Margin="0,0,5,0"
                        ThumbColor="White"
                        OnColor="LimeGreen"
                        x:DataType="toolkit:MediaElement"
                        IsToggled="{Binding Source={x:Reference MediaElement}, Path=ShouldKeepScreenOn}" />
                    <Label
                        VerticalOptions="Center"
                        Text="Keep screen on" />
                </HorizontalStackLayout>
            </VerticalStackLayout>
        </Grid>
    </ScrollView>
</pages:BasePage>