现操-week8

需求

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

Follow-Up

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

关键代码

XAML动画原理

.Resources>
        x:Name="Ani1">

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

用一个大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. 拿来主义使用别人的代码，根据实际情况进行修改