Question

我正在尝试使MediaManager库开始使用MVVM方法播放来自youtube的一些视频。

我的想法是在一个视图中最初加载一个视频，一旦用户观看了第一个加载的视频，他就可以单击一个按钮在同一视图中查看另一个视频。

我在互联网上找不到很多有关如何使用MVVM完成此操作的示例，我发现的每个示例都使用了代码隐藏方法，但是我的应用程序是在完整的MVVM中创建的，因此我需要使其完全正常工作。

这是我现在所做的。

XAML

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:behaviors="clr-namespace:Behaviors;assembly=Behaviors"
             xmlns:mediamanager="clr-namespace:Plugin.MediaManager.Forms;assembly=Plugin.MediaManager.Forms"
             x:Class="VideoView"
             BindingContext="{Binding VideoViewModel, Source={StaticResource ServiceLocator}}">

    <ContentPage.Behaviors>
        <behaviors:EventHandlerBehavior EventName="Appearing">
            <behaviors:InvokeCommandAction Command="{Binding PageAppearingCommand}" />
        </behaviors:EventHandlerBehavior>
    </ContentPage.Behaviors>

    <StackLayout Margin="10,60,10,0">

        <Label x:Name="LblMsg"/>

        <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <mediamanager:VideoView x:Name="TrainingVideoPlayer"
                                    AspectMode="AspectFill"
                                    HorizontalOptions="FillAndExpand"
                                    VerticalOptions="FillAndExpand" />
            <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand">
                <ProgressBar x:Name="progress" HeightRequest="10" Progress="{Binding ProgressStatus, Mode=TwoWay}" />
                <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="10" VerticalOptions="End">
                    <Image x:Name="ImgPlay"
                           Source="video_play.png"
                           HorizontalOptions="Center">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding PlayTappedCommand}" NumberOfTapsRequired="1" />
                        </Image.GestureRecognizers>
                    </Image>
                    <Image x:Name="ImgPause"
                           Source="video_pause.png"
                           HorizontalOptions="Center">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding PauseTappedCommand}" NumberOfTapsRequired="1" />
                        </Image.GestureRecognizers>
                    </Image>
                    <Image x:Name="ImgStop"
                           Source="video_stop.png"
                           HorizontalOptions="Center">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding StopTappedCommand}" NumberOfTapsRequired="1" />
                        </Image.GestureRecognizers>
                    </Image>
                </StackLayout>
           </StackLayout>
        </Grid>

        <Button x:Name="BtnNext" Command="{Binding NextCommand}"/>

    </StackLayout>

</ContentPage>

ViewModel

public class VideoViewModel : AppBaseViewModel
{

    //Commands
    public ICommand PageAppearingCommand { get; set; }
    public ICommand PlayTappedCommand { get; set; }
    public ICommand PauseTappedCommand { get; set; }
    public ICommand StopTappedCommand { get; set; }
    public ICommand NextCommand { get; set; }

    //Fields
    private double _progressStatus;
    private string youtubevideourl;

    //Properties
    public double ProgressStatus
    {
        get => _progressStatus;
        set
        {
            if (Set(ref _progressStatus, value))
            {
                RaisePropertyChanged(() => ProgressStatus);
            }
        }
    }

    public VideoViewModel()
    {
        PageAppearingCommand = new Command(OnPageAppearing);
        PlayTappedCommand = new Command(OnImgPlay_Tapped);
        PauseTappedCommand = new Command(OnImgPause_Tapped);
        StopTappedCommand = new Command(OnImgStop_Tapped);
        NextCommand = new Command(OnBtnNext_Click);

        youtubevideourl = "https://urloftheyoutubevideo";
    }

    private async void OnPageAppearing()
    {
        await CrossMediaManager.Current.Stop();

        //Sets the videoplayer events to control playback status
        CrossMediaManager.Current.PlayingChanged += VideoPlayer_PlayingChanged;
        CrossMediaManager.Current.MediaFinished += VideoPlayer_MediaFinished;
    }

    private async void OnImgPlay_Tapped()
    {
        await CrossMediaManager.Current.Play(youtubevideourl, MediaFileType.Video);
    }

    private async void OnImgPause_Tapped()
    {
        await CrossMediaManager.Current.Pause();
    }

    private async void OnImgStop_Tapped()
    {
        await CrossMediaManager.Current.Stop();
    }

    private void VideoPlayer_PlayingChanged(object sender, PlayingChangedEventArgs e)
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            ProgressStatus = e.Progress;
        });
    }

    private void VideoPlayer_MediaFinished(object sender, MediaFinishedEventArgs e)
    {
        //Some logic
    }

    private async void OnBtnNext_Click()
    {
        //logic to load the next video url
    }
}

使用此代码，我可以执行MediaManager的播放/暂停/停止方法，但视图中什么也没有发生，我什至看不到youtube视频的1秒。

感谢您的帮助

注意：我在三个项目（Android，iOS和NetStandard库）中安装了MediaManager nuget软件包

注2：我的要求之一是要保证在移至下一个视频之前，用户尽可能观看了整个视频（该值将存储在外部数据库中），因此与该视频解决方案不同的任何解决方案都必须遵循要求

如何将Xamarin.Forms MediaManager库与MVVM一起使用来播放youtube视频

0 个答案: