UWP 学习三之制作一个简易的播放器

GitHub主页：https://github.com/ZZhuYYanjiang/task/tree/master/task

今天我们来尝试用UWP制作一个简易的只能播放.mp3和.mp4文件。

首先UWP有一个自带的播放控件叫MediaElement可以实现播放功能，但是在这个控件无法实现让用户自主打开文件的功能，所以自主选择功能是值得我们去思考的。

下面我们来看看一些技术功能如何去解决。

1.文件自主选择

首先我上网搜索了一下http://www.codeweblog.com/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-mediaelement-%E6%92%AD%E6%94%BE%E6%9C%AC%E5%9C%B0%E5%AA%92%E4%BD%93%E6%96%87%E4%BB%B6-%E4%BD%BF%E7%94%A8-c-vb-c-%E5%92%8C-xaml/

 

这个网址里介绍了如何使用 FileOpenPicker 类打开并播放本地媒体文件。

所以我们利用这个类与一个Button结合就很容易实现这个功能，

然后只能选择.mp3  .mp4文件可以这么设置：

openPicker.FileTypeFilter.Add(".mp4");
openPicker.FileTypeFilter.Add(".mp3");

如果需要增加其他格式的视频或音频也可以这么类推。

 

2.播放、暂停、停止

原来的MediaElement只有一个播放键来实现播放和暂停。

这里我就新加了三个Button来分别实现播放、暂停和停止功能。

private void Play_Click_1(object sender, RoutedEventArgs e)
{
mediaPlayer.Play();
}

private void Pause_Click_1(object sender, RoutedEventArgs e)
{
mediaPlayer.Pause();
}

private void Stop_Click_1(object sender, RoutedEventArgs e)
{
mediaPlayer.Stop();
}

这里的Play()   、Pause()  、Stop()在这里可以见到：

https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.mediaelement#methods-

 

这些应该是最简单的功能，其他还有一些什么进度条，音量的控制和全屏之类的，我觉得MediaElement自带的已经够了，所以就没有加。

 

代码： XAML：

<Grid>
<StackPanel>
<StackPanel>
<Button Background="Aqua" Content="Choose file" Click="Button_Click"/>
<StackPanel Orientation="Horizontal" Margin="0 10 0 0">
<Button x:Name="Play" Background="Aqua" Content="播放" Margin="0 0 10 0" Click="Play_Click_1" />
<Button x:Name="Pause" Background="Aqua" Content="暂停" Margin="0 0 10 0" Click="Pause_Click_1" />
<Button x:Name="Stop" Background="Aqua" Content="停止" Margin="0 0 10 0" Click="Stop_Click_1" />
<DatePicker Header="Current Data" Margin="200 0 0 0"></DatePicker>
<TimePicker Header="Current Time" ></TimePicker>
</StackPanel>
<MediaElement x:Name="mediaPlayer"
Width="780"
Height=" 360"
Margin="0 10 0 0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
AutoPlay="False"
AreTransportControlsEnabled="True"
PosterSource="C://source/media/image.jpg">
</MediaElement>
</StackPanel>
</StackPanel>

</Grid>

C#

using System;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace Vedia

{

public sealed partial class MainPage : Page

{

public MainPage()

{ this.InitializeComponent();

DispatcherTimer dTimer = new DispatcherTimer();

dTimer.Interval = TimeSpan.FromMilliseconds(100);

dTimer.Start();

}

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();

if (file != null)

{ var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

mediaPlayer.SetSource(stream, file.ContentType); mediaPlayer.Play();

}

}

private void Play_Click_1(object sender, RoutedEventArgs e)

{

mediaPlayer.Play();

}

private void Pause_Click_1(object sender, RoutedEventArgs e)

{ mediaPlayer.Pause(); }

private void Stop_Click_1(object sender, RoutedEventArgs e)

{

mediaPlayer.Stop();

}

}

}