Xamarin Community Toolkit MediaElement

샘플 다운로드

MediaElement 는 비디오 및 오디오 재생을 위한 보기입니다. 기본 플랫폼에서 지원하는 미디어는 다음 원본에서 재생할 수 있습니다.

• URI(HTTP 또는 HTTPS)를 사용하는 웹입니다.
• URI 체계를 사용하여 플랫폼 애플리케이션에 ms-appx:/// 포함된 리소스입니다.
• URI 체계를 사용하여 ms-appdata:/// 앱의 로컬 및 임시 데이터 폴더에서 온 파일입니다.
• 디바이스의 라이브러리입니다.

MediaElement 는 전송 컨트롤이라고 하는 플랫폼 재생 컨트롤을 사용할 수 있습니다. 그러나 기본적으로 사용하지 않도록 설정되며 사용자 고유의 전송 컨트롤로 바꿀 수 있습니다. 다음 스크린샷은 플랫폼 전송 컨트롤을 사용하여 비디오를 재생하는 것을 보여줍니다 MediaElement .

참고

MediaElement는 iOS, Android, UWP(유니버설 Windows 플랫폼), macOS, Windows Presentation Foundation 및 Tizen에서 사용할 수 있습니다.

MediaElement는 다음 속성을 정의합니다.

• Aspect형식 Aspect의 은 디스플레이 영역에 맞게 미디어 크기를 조정하는 방법을 결정합니다. 이 속성의 기본값은 AspectFit입니다.
• AutoPlay형식 bool의 는 속성이 설정될 때 미디어 재생이 Source 자동으로 시작될지 여부를 나타냅니다. 이 속성의 기본값은 true입니다.
• BufferingProgress형식 double의 는 현재 버퍼링 진행률을 나타냅니다. 이 속성의 기본값은 0.0입니다.
• CanSeek형식 bool의 는 속성 값을 Position 설정하여 미디어의 위치를 변경할 수 있는지 여부를 나타냅니다. 이 속성은 읽기 전용입니다.
• CurrentState형식MediaElementState의 는 컨트롤의 현재 상태 나타냅니다. 이 속성은 읽기 전용 속성이며 기본값은 입니다 MediaElementState.Closed.
• Duration형식 TimeSpan?의 는 현재 열린 미디어의 기간을 나타냅니다. 기본값이 인 읽기 전용 속성입니다 null.
• IsLooping형식 bool의 는 현재 로드된 미디어 원본이 끝에 도달한 후 처음부터 재생을 다시 시작해야 하는지 여부를 설명합니다. 이 속성의 기본값은 false입니다.
• KeepScreenOn형식 bool의 은 미디어 재생 중에 디바이스 화면을 유지할지 여부를 결정합니다. 이 속성의 기본값은 false입니다.
• Position형식 TimeSpan의 는 미디어의 재생 시간을 통해 현재 진행 상황을 설명합니다. 이 속성은 바인딩을 TwoWay 사용하며 기본값은 입니다 TimeSpan.Zero.
• ShowsPlaybackControls형식 bool의 는 플랫폼 재생 컨트롤이 표시되는지 여부를 결정합니다. 이 속성의 기본값은 false입니다. iOS에서는 컨트롤이 화면과 상호 작용한 후 잠시 동안만 표시됩니다. 컨트롤을 항상 표시할 수 있는 방법은 없습니다. WPF에서는 시스템 컨트롤이 지원되지 않으므로 이 속성은 적용되지 않습니다.
• Speed형식 double의 는 미디어의 재생 속도를 결정합니다. 이 속성의 기본값은 1입니다.
• Source형식 MediaSource의 는 컨트롤에 로드된 미디어의 원본을 나타냅니다.
• VideoHeight형식 int의 는 컨트롤의 높이를 나타냅니다. 이 속성은 읽기 전용입니다.
• VideoWidth형식 int의 는 컨트롤의 너비를 나타냅니다. 이 속성은 읽기 전용입니다.
• Volume형식 double의 은 0에서 1 사이의 선형 눈금으로 표시되는 미디어의 볼륨을 결정합니다. 이 속성은 바인딩을 TwoWay 사용하며 기본값은 1입니다.

속성을 제외하고 CanSeek 이러한 속성은 개체에 의해 BindableProperty 뒷받침됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.

클래스는 MediaElement 네 개의 이벤트도 정의합니다.

• MediaOpened 는 미디어 스트림의 유효성을 검사하고 열 때 발생합니다.
• MediaEnded 는 미디어 재생이 MediaElement 완료되면 발생합니다.
• MediaFailed 는 미디어 원본과 관련된 오류가 있을 때 발생합니다.
• SeekCompleted 는 요청된 검색 작업의 검색 지점을 재생할 준비가 되면 발생합니다.

또한 에는 MediaElement , Pause및 메서드가 Stop 포함됩니다Play.

Android에서 지원되는 미디어 형식에 대한 자세한 내용은 developer.android.com 지원되는 미디어 형식을 참조하세요. 유니버설 Windows 플랫폼(UWP)에서 지원되는 미디어 형식에 대한 자세한 내용은 지원되는 코덱을 참조하세요.

원격 미디어 재생

는 MediaElement HTTP 및 HTTPS URI 스키마를 사용하여 원격 미디어 파일을 재생할 수 있습니다. 이 작업은 속성을 미디어 파일의 URI로 설정 Source 하여 수행됩니다.

<MediaElement Source="https://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4"
              ShowsPlaybackControls="True" />

기본적으로 속성에 의해 Source 정의된 미디어는 미디어가 열린 직후 재생됩니다. 자동 미디어 재생을 표시하지 않려면 속성을 false로 AutoPlay 설정합니다.

미디어 재생 컨트롤은 기본적으로 사용하지 않도록 설정되며 속성을 true로 설정하여 사용하도록 설정 ShowsPlaybackControls 됩니다. MediaElement 는 사용 가능한 경우 플랫폼 재생 컨트롤을 사용합니다.

로컬 미디어 재생

로컬 미디어는 다음 소스에서 재생할 수 있습니다.

• URI 체계를 사용하여 플랫폼 애플리케이션에 ms-appx:/// 포함된 리소스입니다.
• URI 체계를 사용하여 ms-appdata:/// 앱의 로컬 및 임시 데이터 폴더에서 온 파일입니다.
• 디바이스의 라이브러리입니다.

이러한 URI 스키마에 대한 자세한 내용은 URI 체계를 참조하세요.

앱 패키지에 포함된 미디어 재생

은 MediaElement URI 체계를 사용하여 ms-appx:/// 앱 패키지에 포함된 미디어 파일을 재생할 수 있습니다. 미디어 파일은 플랫폼 프로젝트에 배치하여 앱 패키지에 포함됩니다.

플랫폼 프로젝트에 미디어 파일을 저장하는 것은 플랫폼마다 다릅니다.

• iOS에서 미디어 파일은 Resources 폴더 또는 Resources 폴더의 하위 폴더에 저장 되어야 합니다. 미디어 파일에는 의 BundleResource가 Build Action 있어야 합니다.
• Android에서 미디어 파일은 raw라는 리소스의 하위 폴더에 저장되어야 합니다. raw 폴더에는 하위 폴더가 포함될 수 없습니다. 미디어 파일에는 의 AndroidResource가 Build Action 있어야 합니다.
• UWP에서 미디어 파일은 프로젝트의 모든 폴더에 저장할 수 있습니다. 미디어 파일에는 의 Content가 BuildAction 있어야 합니다.

그런 다음, URI 체계를 사용하여 이러한 조건을 충족하는 ms-appx:/// 미디어 파일을 재생할 수 있습니다.

<MediaElement Source="ms-appx:///XamarinForms101UsingEmbeddedImages.mp4"
              ShowsPlaybackControls="True" />

데이터 바인딩을 사용하는 경우 값 변환기를 사용하여 이 URI 체계를 적용할 수 있습니다.

public class VideoSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return null;

        if (string.IsNullOrWhiteSpace(value.ToString()))
            return null;

        if (Device.RuntimePlatform == Device.UWP)
            return new Uri($"ms-appx:///Assets/{value}");
        else
            return new Uri($"ms-appx:///{value}");
    }
    // ...
}

그런 다음, 의 VideoSourceConverter instance 사용하여 포함된 미디어 파일에 URI 체계를 적용 ms-appx:/// 할 수 있습니다.

<MediaElement Source="{Binding MediaSource, Converter={StaticResource VideoSourceConverter}}"
              ShowsPlaybackControls="True" />

ms-appx URI 스키마에 대한 자세한 내용은 ms-appx 및 ms-appx-web을 참조하세요.

앱의 로컬 및 임시 폴더에서 미디어 재생

은 MediaElement URI 체계를 사용하여 ms-appdata:/// 앱의 로컬 또는 임시 데이터 폴더에 복사된 미디어 파일을 재생할 수 있습니다.

다음 예제에서는 앱의 Source 로컬 데이터 폴더에 저장된 미디어 파일로 설정된 속성을 보여줍니다.

<MediaElement Source="ms-appdata:///local/XamarinVideo.mp4"
              ShowsPlaybackControls="True" />

다음 예제에서는 앱의 임시 데이터 폴더에 저장된 미디어 파일에 대한 속성을 보여줍니다 Source .

<MediaElement Source="ms-appdata:///temp/XamarinVideo.mp4"
              ShowsPlaybackControls="True" />

중요

UWP는 앱의 로컬 또는 임시 데이터 폴더에 저장된 미디어 파일을 재생할 뿐만 아니라 앱의 로밍 폴더에 있는 미디어 파일을 재생할 수도 있습니다. 미디어 파일 ms-appdata:///roaming/접두사를 로 지정하면 이 작업을 수행할 수 있습니다.

데이터 바인딩을 사용하는 경우 값 변환기를 사용하여 이 URI 체계를 적용할 수 있습니다.

public class VideoSourceConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return null;

        if (string.IsNullOrWhiteSpace(value.ToString()))
            return null;

        return new Uri($"ms-appdata:///{value}");
    }
    // ...
}

그런 다음, 의 VideoSourceConverter instance 사용하여 앱의 로컬 또는 임시 데이터 폴더에 있는 미디어 파일에 URI 체계를 적용 ms-appdata:/// 할 수 있습니다.

<MediaElement Source="{Binding MediaSource, Converter={StaticResource VideoSourceConverter}}"
              ShowsPlaybackControls="True" />

ms-appdata URI 스키마에 대한 자세한 내용은 ms-appdata를 참조하세요.

미디어 파일을 앱의 로컬 또는 임시 데이터 폴더에 복사

앱의 로컬 또는 임시 데이터 폴더에 저장된 미디어 파일을 재생하려면 앱에서 미디어 파일을 복사해야 합니다. 예를 들어 앱 패키지에서 미디어 파일을 복사하여 수행할 수 있습니다.

// This method copies the video from the app package to the app data
// directory for your app. To copy the video to the temp directory
// for your app, comment out the first line of code, and uncomment
// the second line of code.
public static async Task CopyVideoIfNotExists(string filename)
{
    string folder = FileSystem.AppDataDirectory;
    //string folder = Path.GetTempPath();
    string videoFile = Path.Combine(folder, "XamarinVideo.mp4");

    if (!File.Exists(videoFile))
    {
        using (Stream inputStream = await FileSystem.OpenAppPackageFileAsync(filename))
        {
            using (FileStream outputStream = File.Create(videoFile))
            {
                await inputStream.CopyToAsync(outputStream);
            }
        }
    }
}

참고

위의 코드 예제에서는 Xamarin.Essentials에 포함된 클래스를 사용합니다 FileSystem . 자세한 내용은 Xamarin.Essentials: 파일 시스템 도우미를 참조하세요.

디바이스 라이브러리에서 미디어 재생

대부분의 최신 모바일 장치 및 데스크톱 컴퓨터는 장치의 카메라와 마이크를 사용하여 비디오와 오디오를 녹화할 수 있습니다. 그러면 생성된 미디어가 디바이스에 파일로 저장됩니다. 이러한 파일은 라이브러리에서 검색하고 에서 재생할 MediaElement수 있습니다.

각 플랫폼에는 사용자가 디바이스 라이브러리에서 미디어를 선택할 수 있는 기능이 포함되어 있습니다. Xamarin.Forms에서 플랫폼 프로젝트는 이 기능을 호출할 수 있으며 클래스에서 DependencyService 호출할 수 있습니다.

샘플 애플리케이션에서 사용되는 비디오 선택 종속성 서비스는 선택기가 개체가 아닌 Stream 파일 이름을 반환한다는 점을 제외하고 그림 라이브러리에서 사진 선택에서 정의된 것과 매우 유사합니다. 공유 코드 프로젝트는 라는 GetVideoFileAsync단일 메서드를 정의하는 라는 IVideoPicker인터페이스를 정의합니다. 그런 다음 각 플랫폼은 클래스에서 이 인터페이스를 VideoPicker 구현합니다.

다음 코드 예제에서는 디바이스 라이브러리에서 미디어 파일을 검색하는 방법을 보여줍니다.

string filename = await DependencyService.Get<IVideoPicker>().GetVideoFileAsync();
if (!string.IsNullOrWhiteSpace(filename))
{
    mediaElement.Source = new FileMediaSource
    {
        File = filename
    };
}

종속성 서비스를 선택하는 비디오는 메서드를 DependencyService.Get 호출하여 플랫폼 프로젝트에서 인터페이스 구현을 IVideoPicker 가져와 호출됩니다. 그런 다음 메서드는 GetVideoFileAsync 해당 instance 호출되고 반환된 파일 이름은 개체를 FileMediaSource 만들고 의 속성MediaElement으로 Source 설정하는 데 사용됩니다.

비디오 가로 세로 비율 변경

속성은 Aspect 비디오 미디어의 크기를 표시 영역에 맞게 조정하는 방법을 결정합니다. 기본적으로 이 속성은 열거형 멤버로 AspectFit 설정되지만 열거형 멤버로 Aspect 설정할 수 있습니다.

• AspectFit 는 가로 세로 비율을 유지하면서 비디오의 표시 영역에 맞게 필요한 경우 레터박스가 표시됨을 나타냅니다.
• AspectFill 는 가로 세로 비율을 유지하면서 표시 영역을 채우도록 비디오가 잘리도록 함을 나타냅니다.
• Fill 는 표시 영역을 채우기 위해 비디오가 늘어나게 됨을 나타냅니다.

Position 속성에 바인딩

재생 중 200ms 간격으로 바인딩 가능한 속성에 대한 Position 속성 변경 알림이 발생합니다. 따라서 속성은 미디어를 통해 진행률을 표시하기 위해 Slider 컨트롤에 데이터 바인딩되거나 이와 유사할 수 있습니다. 또한 CommunityToolkit는 를 경과된 총 초를 나타내는 부동 소수점 값으로 변환 TimeSpan 하는 을 제공합니다TimeSpanToDoubleConverter. 이러한 방식으로 슬라이더 Maximum 를 미디어의 ValuePosition 로 Duration 설정하고 를 로 설정하여 정확한 진행률을 제공할 수 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<pages:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
                xmlns:pages="clr-namespace:Xamarin.CommunityToolkit.Sample.Pages"
                x:Class="Xamarin.CommunityToolkit.Sample.Pages.Views.MediaElementPage">
    <pages:BasePage.Resources>
        <xct:TimeSpanToDoubleConverter x:Key="TimeSpanConverter"/>
    </pages:BasePage.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <xct:MediaElement
            x:Name="mediaElement"
            Source="https://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4"
            ShowsPlaybackControls="True"
            HorizontalOptions="Fill"
            SeekCompleted="OnSeekCompleted" />
        <Slider Grid.Row="1" BindingContext="{x:Reference mediaElement}" Value="{Binding Position, Converter={StaticResource TimeSpanConverter}}" Maximum="{Binding Duration, Converter={StaticResource TimeSpanConverter}}">
            <Slider.Triggers>
                <DataTrigger TargetType="Slider"
                     Binding="{Binding CurrentState}"
                     Value="{x:Static MediaElementState.Buffering}">
                    <Setter Property="IsEnabled" Value="False" />
                </DataTrigger>
            </Slider.Triggers>
        </Slider>
        <Button Grid.Row="2" Text="Reset Source (Set Null)" Clicked="OnResetClicked" />
    </Grid>
</pages:BasePage>

이 예제 Maximum 에서 의 속성은 의 Slider 속성 MediaElement 에 Duration 데이터 바인딩되고 Value 의 속성 Slider 은 의 MediaElement속성에 Position 데이터 바인딩됩니다. 따라서 미디어 재생 위치가 Slider 변경되면 결과를 끌어옵니다.

또한 DataTrigger 미디어를 버퍼링할 때 개체를 사용하여 를 Slider 사용하지 않도록 설정합니다. 데이터 트리거에 대한 자세한 내용은 Xamarin.Forms 트리거를 참조하세요.

참고

Android에서는 Slider 및 Maximum 설정에 관계없이 Minimum 1000개의 개별 단계만 있습니다. 미디어 길이가 1000초보다 크면 두 개의 서로 다른 Position 값이 의 동일한 Value 값에 Slider해당합니다. 위의 코드에서 새 위치와 기존 위치가 전체 기간의 100분의 1보다 큰지 확인하는 이유입니다.

MediaSource 유형 이해

는 MediaElement 속성을 Source 원격 또는 로컬 미디어 파일로 설정하여 미디어를 재생할 수 있습니다. 속성은 Source 형식 MediaSource이며 이 클래스는 두 개의 정적 메서드를 정의합니다.

• FromFile는 인수에서 MediaSourcestring instance 반환합니다.
• FromUri는 인수에서 MediaSourceUri instance 반환합니다.

또한 MediaSource 클래스에는 및 Uri 인수에서 string 인스턴스를 반환 MediaSource 하는 암시적 연산자도 있습니다.

참고

속성이 Source XAML에서 설정되면 형식 변환기가 호출되어 또는 Uri에서 string instance 반환 MediaSource 합니다.

클래스에는 MediaSource 두 개의 파생 클래스도 있습니다.

• UriMediaSource은 URI에서 원격 미디어 파일을 지정하는 데 사용됩니다. 이 클래스에는 로 Uri 설정할 수 있는 속성이 있습니다 Uri.
• FileMediaSource에서 로컬 미디어 파일을 string지정하는 데 사용됩니다. 이 클래스에는 로 File 설정할 수 있는 속성이 있습니다 string. 또한 이 클래스에는 를 개체로 변환하는 암시적 연산자와 개체를 로 변환 stringFileMediaSource 하는 암시적 연산자가 있습니다string.FileMediaSource

참고

XAML에서 개체를 FileMediaSource 만들면 형식 변환기가 호출되어 에서 instance 반환 FileMediaSource 합니다string.

MediaElement 상태 확인

클래스는 MediaElement 형식MediaElementState의 라는 CurrentState읽기 전용 바인딩 가능 속성을 정의합니다. 이 속성은 미디어 재생 또는 일시 중지 여부 또는 미디어를 재생할 준비가 되지 않은 경우와 같은 컨트롤의 현재 상태 나타냅니다.

MediaElementState 열거형은 다음 멤버를 정의합니다.

• Closed 는 에 MediaElement 미디어가 없음을 나타냅니다.
• Opening 는 가 MediaElement 지정된 원본의 유효성을 검사하고 로드하려고 했음을 나타냅니다.
• Buffering 는 재생 MediaElement 을 위해 미디어를 로드하고 있음을 나타냅니다. 해당 속성은 Position 이 상태 동안 진행되지 않습니다. 가 MediaElement 비디오를 재생하는 경우 마지막으로 표시된 프레임을 계속 표시합니다.
• Playing 는 가 MediaElement 미디어 원본을 재생 중임을 나타냅니다.
• Paused 는 가 MediaElement 해당 속성을 진행하지 않음을 Position 나타냅니다. 가 MediaElement 비디오를 재생하는 경우 현재 프레임을 계속 표시합니다.
• Stopped 는 에 MediaElement 미디어가 포함되어 있지만 재생되거나 일시 중지되지 않음을 나타냅니다. 해당 Position 속성은 0이며 진행되지 않습니다. 로드된 미디어가 비디오인 경우 는 MediaElement 첫 번째 프레임을 표시합니다.

일반적으로 전송 컨트롤을 사용할 MediaElement 때 속성을 검사 CurrentState 할 필요가 없습니다. 그러나 이 속성은 고유한 전송 컨트롤을 구현할 때 중요합니다.

사용자 지정 전송 컨트롤 구현

미디어 플레이어의 전송 컨트롤에는 재생, 일시 중지 및 중지 함수를 수행하는 단추가 포함 됩니다. 이러한 단추는 일반적으로 텍스트보다는 친숙한 아이콘으로 식별되며, 재생과 일시 중지 기능은 일반적으로 하나의 단추에 결합됩니다.

기본적으로 MediaElement 재생 컨트롤은 사용하지 않도록 설정됩니다. 이를 통해 프로그래밍 방식으로 또는 고유한 전송 컨트롤을 제공하여 를 제어 MediaElement 할 수 있습니다. 이를 MediaElement 지원하기 위해 에는 , Pause및 Stop 메서드가 포함됩니다Play.

다음 XAML 예제에서는 및 사용자 지정 전송 컨트롤이 MediaElement 포함된 페이지를 보여 줍니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MediaElementDemos.CustomTransportPage"
             Title="Custom transport">
    <Grid>
        ...
        <MediaElement x:Name="mediaElement"
                      AutoPlay="False"
                      ... />
        <StackLayout BindingContext="{x:Reference mediaElement}"
                     ...>
            <Button Text="&#x25B6;&#xFE0F; Play"
                    HorizontalOptions="CenterAndExpand"
                    Clicked="OnPlayPauseButtonClicked">
                <Button.Triggers>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static MediaElementState.Playing}">
                        <Setter Property="Text"
                                Value="&#x23F8; Pause" />
                    </DataTrigger>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static MediaElementState.Buffering}">
                        <Setter Property="IsEnabled"
                                Value="False" />
                    </DataTrigger>
                </Button.Triggers>
            </Button>
            <Button Text="&#x23F9; Stop"
                    HorizontalOptions="CenterAndExpand"
                    Clicked="OnStopButtonClicked">
                <Button.Triggers>
                    <DataTrigger TargetType="Button"
                                 Binding="{Binding CurrentState}"
                                 Value="{x:Static MediaElementState.Stopped}">
                        <Setter Property="IsEnabled"
                                Value="False" />
                    </DataTrigger>
                </Button.Triggers>
            </Button>
        </StackLayout>
    </Grid>
</ContentPage>

이 예제에서는 사용자 지정 전송 컨트롤이 개체로 Button 정의됩니다. 그러나 첫 번째 Button 개체는 Play 및 Pause를 나타내고 두 번째 Button 개체는 중지를 나타내는 개체가 두 Button 개뿐입니다. DataTrigger 개체는 단추를 사용하거나 사용하지 않도록 설정하고 재생 과 일시 중지 간에 첫 번째 단추를 전환하는 데 사용됩니다. 데이터 트리거에 대한 자세한 내용은 Xamarin.Forms 트리거를 참조하세요.

코드 숨김 파일에는 이벤트에 대한 Clicked 처리기가 있습니다.

void OnPlayPauseButtonClicked(object sender, EventArgs args)
{
    if (mediaElement.CurrentState == MediaElementState.Stopped ||
        mediaElement.CurrentState == MediaElementState.Paused)
    {
        mediaElement.Play();
    }
    else if (mediaElement.CurrentState == MediaElementState.Playing)
    {
        mediaElement.Pause();
    }
}

void OnStopButtonClicked(object sender, EventArgs args)
{
    mediaElement.Stop();
}

재생 단추가 활성화되면 재생 단추를 눌러 재생을 시작할 수 있습니다.

일시 중지 단추를 누르면 재생이 일시 중지됩니다.

중지 단추를 누르면 재생이 중지되고 미디어 파일의 위치가 시작 부분으로 반환됩니다.

사용자 지정 볼륨 컨트롤 구현

각 플랫폼에서 구현하는 미디어 재생 컨트롤에는 볼륨 막대가 포함됩니다. 이 막대는 슬라이더와 유사하며 미디어 볼륨을 표시합니다. 또한 볼륨 막대를 조작하여 볼륨을 늘리거나 줄일 수 있습니다.

다음 예제와 같이 를 사용하여 Slider사용자 지정 볼륨 막대를 구현할 수 있습니다.

<StackLayout>
    <MediaElement AutoPlay="False"
                  Source="{StaticResource AdvancedAsync}" />
    <Slider Maximum="1.0"
            Minimum="0.0"
            Value="{Binding Volume}"
            Rotation="270"
            WidthRequest="100" />
</StackLayout>

이 예제 Slider 에서 데이터는 해당 Value 속성을 의 속성에 VolumeMediaElement바인딩합니다. 속성이 바인딩을 Volume 사용하기 TwoWay 때문에 가능합니다. 따라서 속성을 변경 Value 하면 속성이 Volume 변경됩니다.

참고

속성에는 Volume 해당 값이 0.0보다 크거나 같고 1.0보다 작거나 같은지 확인하는 유효성 검사 콜백이 있습니다.

사용 Slider 방법에 대한 자세한 내용은 Xamarin.Forms 슬라이더를 참조하세요.

관련 링크

• MediaElementDemos(샘플)
• URI 체계
• Xamarin.Forms 트리거
• Xamarin.Forms 슬라이더
• Android: 지원되는 미디어 형식
• UWP: 지원되는 코덱