首先,先呈上GitHub项目地址:https://github.com/GTGO/NavieMediaPlayer
本次项目主要实现了播放MP3,MP4,也即一个简单而又丑陋的播放器。
实现的效果图如下:
主界面
打开文件
播放界面
当然,即使是制作如此简陋的媒体播放器,我还是遇到了问题,具体如下:
1、如何可以让用户选择文件
根据XAML控件库中对MediaElement的描述,我发现也只能实现自己播放Assets文件中的音频或视频文件,用户无法根据自己喜好选择本地下载的文件进行播放,用户体验度为0!于是便查阅了MediaElement的官方文档,发现在官方文档中有一块告诉了我们怎么打开本地媒体文件。
(URL:https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.mediaelement#remarks)
除了在XAML中简单的调用MediaElement外,还需要使用FileOpenPicker来获取文件,具体内容如下:
private async void Button_Click(object sender, RoutedEventArgs e)
{
await SetLocalMedia();
}
async private System.Threading.Tasks.Task SetLocalMedia()
{
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.FileTypeFilter.Add(".mp4");
openPicker.FileTypeFilter.Add(".mp3");
var file = await openPicker.PickSingleFileAsync();
// mediaPlayer is a MediaElement defined in XAML
if (file != null)
{
var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
mediaPlayer.SetSource(stream, file.ContentType);
mediaPlayer.Play();
}
}
这里为了使用方便,通过Button来实现该功能。至此,一个简单的media player实现。
2、Button的美化
虽然简单的功能可以实现,但是一个大大的Button不得不说十分影响美观,考虑到大多情况下我们都是以一个小图标代替文字来实现相同功能,于是我便寻找相关图片,试图通过插入img代替button的功能,反复试验后发现自己真的是图样图森破,后联想到老师上课所说将Button的Font Family设置为Segoe MDL2 Assets就可以在其库中找到相应图标复制粘贴,发现真的是一步到位。
(URL:http://modernicons.io/segoe-mdl2/cheatsheet/)
相应的代码部分如下:
3、进度栏的增改
事实上,一个media player离不开对播放内容的控制,包括但不限于简单的播放、暂停、全屏、调节音量等,由于初期只是简单的增加了MediaElement并没有在其功能上进一步完善,于是我便再次查看了官方文档,发现在MediaElement只需添加
AreTransportCOntrolsEnabled="True"
即可实现简易的功能。此外,在查看官方文档时,我还发现了MediaTransportControls Class一栏。
(URL:https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.mediatransportcontrols)
其中有对TransportControls的详细介绍,发现除了播放、暂停等之外,还有快进、后退等,再增加这些功能后,我又考虑到有时IsCompact="False"的情况下会影响用户观影体验。为了将用户体验度从0升为1,我增加了ToggleSwitch以供用户选择是否设置IsCompact="False",代码部分如下:
XAML部分:
C#部分:
private void MyToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
ToggleSwitch toggleSwitch = sender as ToggleSwitch;
if (toggleSwitch != null)
{
if (toggleSwitch.IsOn == true)
{
MyMediaPlayer.TransportControls.IsCompact = false;
}
else
{
MyMediaPlayer.TransportControls.IsCompact = true;
}
}
}
实现效果如下:
至此,一个Naïve Media Player基本实现。至于用户体验度,期待一下2.0版本的提高吧~