32. [.NET MAUI] CommunityToolKit MediaElement 사용하기

- CommunityToolKit 의 MediaElement 세팅방법

이전 포스팅: https://mroh1226.tistory.com/55

31. [.NET MAUI] CommunityToolKit 으로 앱에서 동영상(.mp4) 재생하기 (+ NU1605 오류 해결)

 

 

---

 

 

실전에 사용하기

 

MVVM 패턴으로 개발하신다면 아래와 같이 따라해주세요.

 

Uri가 아닌 Resources 안의 mp4를 불러오는 방법도 포함하였습니다.

 

1. 사용할 .mp4 파일을 Resources > Raw 에 넣어줍니다.

mozza_video1.mp4

---

 MVVM 패턴에 따라 아래와같이 생성해주고, 작성해주세요.

- Model: VideoInfo.cs

- View: VideoPage.xaml

- ViewModel: VideoVM.cs

 

 

1. VideoInfo라는 객체를 생성합니다.

생성자 인수로는 string형 VideoName 와, MediaSource형 VideoSource를 받습니다.

(MediaSource는 MediaElement Property로 Resources, Uri, File 등 다양한 경로로부터 Source를 가져오게 합니다.)

VideoInfo.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using CommunityToolkit.Maui.MediaElement;

namespace MyMAUI.Models
{
    public class VideoInfo
    {
        public string VideoName {  get; set; }
        public MediaSource VideoSource { get; set; }
        
        public VideoInfo(string _VideoName, MediaSource _VideoSource)
        {
            VideoName = _VideoName;
            VideoSource = _VideoSource;
        }
    }
}

 

---

 

2. CarouselView를 사용하여 동영상을 넘기면서 볼 수 있도록 아래와 같이 작성합니다.

 

1) <ContentPage> xmlns에 CommunityToolkit.Maui.MediaElement 네임스페이스를 media라는 이름으로 설정합니다.

2) ItemsSource 를 VideoInfo를 리스트로 갖는 ObservableCollection VideoList(아래 ViewModel에서 정의)로 설정합니다.

3) DataTemplate에 Label과 media:MediaElement를 Grid에 넣어 원하는 위치를 지정해줍니다.

4) Label의 Text에는 VideoInfo의 인수 VideoName을 바인딩하고, media:MediaElement의 Source에는 VideoSource 를 바인딩합니다.

5) 선택된 동영상을 볼 수 있도록 IndicatorView를 CarouselView의 IndicatorView에 연결합니다.

 

VideoPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:media="clr-namespace:CommunityToolkit.Maui.MediaElement;assembly=CommunityToolkit.Maui.MediaElement"
             x:Class="MyMAUI.Views.VideoPage"
             Title="VideoPage">
    
    <Grid RowDefinitions="*,*,*,*,*,*" ColumnDefinitions="*">
        <CarouselView ItemsSource="{Binding VideoList}" IndicatorView="indicatorview" Grid.Row="0" Grid.RowSpan="5">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid RowDefinitions="*,*,*,*,*,*" ColumnDefinitions="*">
                        <Label Grid.Row="0" Grid.Column="0" Text="{Binding VideoName}" TextColor="YellowGreen" FontSize="Body"/>
                        <media:MediaElement Grid.Row="1" Grid.RowSpan="5" Grid.Column="0" Source="{Binding VideoSource}"/>
                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <IndicatorView x:Name="indicatorview" Grid.Row="5" Grid.Column="0" IndicatorColor="Coral" SelectedIndicatorColor="Crimson" 
                       HorizontalOptions="Center" VerticalOptions="Center"/>
    </Grid>
    
    
</ContentPage>

 

---

 

3. ViewModel 역할을 하는 VideoVM.cs 를 아래와 같이 작성합니다.

 

1) VideoInfo를 생성하여 Model을 가져오고 OnPropertyChanged를 이용하여 실시간 바인딩을 해줍니다.

2) VideoList 라는 ObservableCollection을 선언하여 그 안에 VideoInfo를 Collection으로 설정해줍니다.(리스트화)

마찬가지로 OnPropertyChanged를 이용하여 실시간 바인딩을 해줍니다.

3) 생성자에 AddVideo() 메소드를 넣어 생성된 VideoList가 바인딩 되도록합니다.

4) AddVideo() 를 아래와 같이 작성합니다.

 - MediaSource.FromResource("mozza_video1.mp4")));

   → 소스가 Resources 경로에 있는 경우

 - MediaSource.FromUri("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")));

   → 소스가 Uri 인 경우

VideoVM.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Collections.ObjectModel;
using MyMAUI.Services;
using MyMAUI.Models;
using CommunityToolkit.Maui.MediaElement;

namespace MyMAUI.ViewModels
{
    class VideoVM : Notify
    {
        public VideoInfo _VideoInfo { get; set; }
        public VideoInfo VideoInfo
        {
            get=> _VideoInfo;
            set
            {
                if(_VideoInfo != value)
                {
                    _VideoInfo = value;
                    OnPropertyChanged(nameof(VideoInfo));
                }
            }
        }
        public ObservableCollection<VideoInfo> _VideoList = new ObservableCollection<VideoInfo>();
        public ObservableCollection<VideoInfo> VideoList
        {
            get => _VideoList;
            set
            {
                if(_VideoList != value)
                {
                    _VideoList = value;
                    OnPropertyChanged(nameof(VideoList));
                }
            }
        }

        public VideoVM()
        {
            AddVideo();
        }

        public void AddVideo()
        {
            
            VideoList.Add(new VideoInfo("mozza", MediaSource.FromResource("mozza_video1.mp4")));
            VideoList.Add(new VideoInfo("test",  MediaSource.FromUri("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4")));
        }

    }
}

---

 

---

완성모습