现操-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:NameName基本没区别,但前者兼容性更好。

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

你可能感兴趣的:(作业笔记,现操)