Naïve Media Player, Part 1

最近事情比较多，模型一直调不好，耽误了很多时间...突然得知明天测评组开会的消息，今晚要把自己的模型肝出来...

深夜补作业系列。

--------------------------------------------------------------------------------------------------------------

我认为做一个播放器，也是做所有软件的第一步应该还是布局的规划。以下是我的设计方案。

左上角的圆形是头像，左下角的第一个长方形是选择文件的按钮，下面的长方形是文件描述信息。右侧的大长方形是播放器，小长方形是播放器开始，暂停的按钮。

以下是xaml的代码

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <StackPanel Orientation="Horizontal">
            <StackPanel Orientation="Vertical">
                <PersonPicture Height="200" Width="200" ProfilePicture="Assets//profile.jpg" ></PersonPicture>
                <Grid Height="520" Width="200">
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Button Name="bt" Grid.Row="1" Content="choose file" HorizontalAlignment="Center" FontSize="20px" Click="Button_Click"></Button>
                    <TextBlock Grid.Row="2" Grid.RowSpan="3" FontSize="20px" Margin="20" TextWrapping="Wrap"> ：Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</TextBlock>
                </Grid>
            </StackPanel>
            <MediaPlayerElement   
            Name="MediaPlayer" AutoPlay="False"  

            Visibility="Collapsed"  
            AreTransportControlsEnabled="True"  
        />
        </StackPanel>
    </Grid>

对于整体布局，我选择使用一个横向的stackpanel，两边分别使用竖向的stackpanel，而左下角的部分，为了使按钮和信息显示面板保持我想要的状态，我使用了grid的方式进行布局。

对于头像部分，使用了PersonPicture组件。PersonPicture是一个非常简单高效的组件，可以很美观的展示圆形的头像。

<PersonPicture Height="200" Width="200" ProfilePicture="Assets//profile.jpg" ></PersonPicture>

这里的高度和宽度是我手动测试的一个比较好看的效果。本来想做从本地读取文件选择图片的....以后有时间再补上吧！

<Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>

下侧的布局用了非常简单的Grid.row，组件也是很常见的button 和textblock，就不赘述了。

右侧的播放器使用MediaPlayerElement部件

<MediaPlayerElement   
            Name="MediaPlayer" AutoPlay="False"  
            Visibility="Collapsed"  
            AreTransportControlsEnabled="True"  
            />

我再XAML Gallery里看到了一个Source的参数，应该是可以设置默认的文件。这里我没有选择默认项，而是由用户指定。值得一提的是，在没有指定视频文件之前，这个控件运行效果就仿佛没有一样，一度让我怀疑它失踪了....

还有就是，我原本预留在右下角设置播放，停止的区域。但是后来发现mediaplayerelement本身就有这样的控制，所以就没有再设置。

接下来谈一下遇到的问题。

<MediaPlayerElement Source="/Assets/ladybug.wmv"
MaxWidth="400"
AutoPlay="False"
AreTransportControlsEnabled="True" />

这段代码是XAML Gallery上关于MediaPlayerElement的介绍，上面用Source指定了一个文件位置。于是我也决定这样试试。

但是VS会给我这样的提示

我认为是某种类型转换错误，但是我认为这个格式和样例给的没有区别...求助于百度谷歌的我，并没有找到相关的问题和介绍。

不过幸运的是找到了别人实现的mediaplayer, UWP：使用MediaPlayerElement实现媒体播放器。

其中MediaPlayerElement部分如下

 <MediaPlayerElement x:Name="_mediaPlayerElement" AreTransportControlsEnabled="False" HorizontalAlignment="Stretch"  Grid.Row="1"/>

虽然上面没有解决这个问题的办法，但是我也从这里看到了，这个控件并没有什么特殊的，需要我加上操作。于是我决定先忽略这一点，不用Source这个参数，直接做成用户选择的方法。完成之后，发现达到了预期的效果。

回过投来再思考一下这个问题，首先我们看一下Source到底想要什么类型的值

 MediaPlayer.Source = MediaSource.CreateFromStorageFile(file);

也就是说，Source想要的是一种MediaSource数据，而我们给的是文件的地址信息，也就是String。那么什么是TypeConvert呢，我主要参考了这篇博文 什么是TypeConvert。TypeConvert如同字面意思，就是一种可以自定义的数据转换器。那么我可以理解为，这里需要我们输入一个MediaSource数据，而我们输入的是String数据。解决这个问题的方法应该是自定义一个String到MediaSource的方法，这个方法通过TypeConvert定义。

最后，欣赏一下最终的结果吧，虽然还有很多需要优化，补全的东西，但是至少可以交差了（逃

以下是.cs文件的代码

 public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void Button_Click(object sender, RoutedEventArgs e)
        {
            await openMediaFile();
        }
        private async System.Threading.Tasks.Task openMediaFile()
        {
            FileOpenPicker fileOpenPicker = new FileOpenPicker();
            fileOpenPicker.ViewMode = PickerViewMode.Thumbnail;
            fileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
            fileOpenPicker.FileTypeFilter.Add(".mp3");
            fileOpenPicker.FileTypeFilter.Add(".mp4");

            StorageFile file = await fileOpenPicker.PickSingleFileAsync();
            if (file != null)
            {
                // Application now has read/write access to the picked file  
                MediaPlayer.Source = MediaSource.CreateFromStorageFile(file);
                MediaPlayer.Visibility = Visibility.Visible;


                MediaPlayer.MediaPlayer.MediaEnded += new TypedEventHandler<Windows.Media.Playback.MediaPlayer, object>((player, resource) => {
                    bt.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => {
                        bt.Visibility = Visibility.Visible;
                        MediaPlayer.Visibility = Visibility.Collapsed;
                    });
                });

            }
            else
            {
                
            }
        }

2018/4/5更新：github项目地址：

https://github.com/zhanglinfeng1997/MediaPlayer