需求

内容：使用MediaElement或MediaPlayer打造一个播放器，可播放视频和音乐。 2.要有进度条，实时显示媒体的播放进度；同时，通过拖动进度条，也可以使媒体快速前进/后退到相应的位置。 3.播放视频时，可全屏显示/退出全屏显示。 4.UI自定。 5.对关键代码要在实验报告里阐释。 Bonus： 1.增加进度条用以调节音量。 2.可手动选择本机上的媒体资源进行播放。 Big Bonus： 播放音乐时，封面绕自身中心不断旋转，直至播放结束，封面复位； 暂停时，封面的旋转动作也暂停； 继续播放，封面也跟着继续旋转； 停止时，封面复位。 播放视频时，隐藏封面。

Follow-Up

inline按钮 文件标题栏 显示MP3自带专辑图片，并将其设置为转动图片

关键代码

XAML动画原理

<Page.Resources> <Storyboard x:Name="Ani1"> <DoubleAnimation Storyboard.TargetName="Disk" Storyboard.TargetProperty="(UIElement.RenderTransform ).(TransformGroup.Children)[0].(RotateTransform.Angle)" From="0" To="360" RepeatBehavior="Forever"> /* 此处是动画的本体，起止点、循环方式均在此处指定 */ /* TargetName：应用动画的对象（Object） */ /* TargetProperty：针对对象的哪一个属性使用动画 */ </DoubleAnimation> </Storyboard> </Page.Resources>

这种动画有点像是一个函数，输入是相应的TargetProperty，使用时需要绑定到指定对象上。

进度条动态绑定播放进度

var timerVideoTime = new DispatcherTimer(); timerVideoTime.Interval = TimeSpan.FromSeconds(1); /* */ timerVideoTime.Tick += new EventHandler<object>(timer_Tick); timerVideoTime.Start();

用一个定时器DispatcherTimer对象，每隔一秒触发一次更新事件。

void timer_Tick(Object sender, Object e) { // Check if the movie finished calculate it's total time if (Player.NaturalDuration.TimeSpan.TotalSeconds > 0) { if (TotalTime.TotalSeconds > 0) { // Updating time slider timelineSlider.Value = Player.Position.TotalSeconds / TotalTime.TotalSeconds * timelineSlider.Maximum; } } }

在该函数中将timelineSlider.Value更新为当前播放进度。

实验过程

Q1.按PPT给的代码敲，有一些问题：

UWP 中Image对象并没有MouseDown事件，可能版本不同还是怎样，这些API总是变来变去的……

解决办法：换成Button对象并加载图片。 Button虽然没有加载图片的属性，但是可以直接嵌套Object进去；限制是只能嵌套一个，所以如果要在一个Button中放入多个元素，就要： http://stackoverflow.com/questions/41191758/uwp-xaml-how-to-display-a-button-with-icon-and-text-in-it

<Button><StackPanel><Image/><TextBlock/></StackPanel></Button>

用一个大Object包装（这里是StackPanel）。

Q2. 注意到样例给的是Name属性。 A：x:Name 和 Name基本没区别，但前者兼容性更好。

Q3: 画inline式的layout。 A：使用RelativePanel，再手动调整边距。 但显然在item较多时这是一个愚蠢的办法。

Q4：进度条，时间的动态绑定。 A:http://stackoverflow.com/questions/10208959/binding-mediaelement-to-slider-position-in-wpf 没采用Binding，而是用一个定时器，用类似JS中SetTimeInterval的方式，每隔一秒更新一次值。 给出的代码稍微修改一下就可以了，注意Handler的参数是两个Object类型。

Q5：使用relativePanel布局，全屏后无法返回。A：还是用BottomBar才行，因为它一全屏就只能显示BottomBar了。

Q6：如何让视频保持原比例？ A:Stretch="Uniform"

传送门

MediaElement https://msdn.microsoft.com/en-us/library/windows/apps/mt187272.aspx

实验感想

大部分时间都是在修改以前的代码拿来重用，好像并没有太多需要造轮子的地方。 查找资料还是最重要的技能。 基本步骤简单整理： 1. 明确要解决的问题再查找相应的类的文档 2. 查找类中有没有含有问题关键词的propety/成员，event/事件，method/方法 3. 如果没有，就直接搜索，看别人是怎么解决问题的 4. 拿来主义使用别人的代码，根据实际情况进行修改