需求
内容:使用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. 拿来主义使用别人的代码,根据实际情况进行修改