Windows Phone Development (20): When MediaElement and VideoBrush work together,

So many of the controls are "static", are "dumb", today, do you have any interest in the study, can be "vivid" and simple operation of the control? If so, please come with me.

MediaElement play multimedia files.

First of all, a grand introduction of MediaElement, why should it be grand? Because it's simple, really, you'll play it, but, mediaelement powerful, it can play audio and video as long as the supported formats are on the line.

To set the playback of audio or video files, you only need to set the Source property, it is actually a URI, if you want to play media files in your project, you have to add the media file to your project, the build operation is set as a resource, do not I say, will be.

You will certainly ask, can play the network URI point to the media file? Oh, you'll find out if you try.

Gossip does not pull, start doing exercises, first bring a 3gp or MP4 file, you can find one yourself, of course, other formats are also available, hehe, as long as the support on the line, because we see the effect in the simulator, so finally with some commonly used format, simulator not all media files can support, Please refer to the SDK documentation for details.

MediaElement is very easy to use, I would like to say a few of its commonly used properties, I believe you can understand the two under the study.
1, Source: Just said, is you want to play media files;
2, AutoPlay: Whether automatically play, Ah, this estimate you more than I understand;
3, Balance: Stereo volume ratio of the left and right channel, is a balance value, from 1 to 1,0 in the middle, so is the default value;
4, Stretch: Like the image control, how to stretch, or maintain the aspect ratio;
5, Volume: volume, 0-1 in range, default 0.5.

OK, here's a look at the layout of the first exercise.

2. <phone:PhoneApplicationPage.Resources>
4. <lineargradientbrush x:key= "Pathfill" startpoint= "0.5,0" endpoint= "0.5,1" >
6. <gradientstop color= "LightGreen" offset= "0"/>
8. <gradientstop color= "Orange" offset= "1"/>
10. </LinearGradientBrush>
12. <style x:key= "Btnstyle" targettype= "button" >
14. <setter property= "Height" value= "/>"
16. <setter property= "Width" value= "/>"
18. <setter property= "horizontalcontentalignment" value= "Stretch"/>
20. <setter property= "verticalcontentalignment" value= "Stretch"/>
22. <setter property= "borderthickness" value= "0"/>
24. </Style>
26. </phone:PhoneApplicationPage.Resources>
28. <Grid>
30. <Grid.ColumnDefinitions>
32. <columndefinition width= "*"/>
34. <columndefinition width= "Auto"/>
36. </Grid.ColumnDefinitions>
38. <stackpanel orientation= "Vertical"
40. grid.column= "1" >
42. <button name= "Btnplay" style= "{StaticResource btnstyle}" click= "Btnplay_click" >
44. <Button.Content>
46. <path data= "m0,0 l0,40 l40,20 Z" fill= "{StaticResource Pathfill}" horizontalalignment= "Center" verticalalignment= " Center "/>
48. </Button.Content>
50. </Button>
52. <button name= "Btnpause" style= "{StaticResource btnstyle}" click= "Btnpause_click" >
54. <Button.Content>
56. <path data= "m0,0 l0,40 l15,40 l15,0 Z m25,0 l25,40 l40,40 l40,0" fill= "{StaticResource Pathfill}" horizontalalignment= " Center "verticalalignment=" center "/>
58. </Button.Content>
60. </Button>
62. <button name= "Btnstop" style= "{StaticResource btnstyle}" click= "Btnstop_click" >
64. <Button.Content>
66. <path data= "m0,0 l0,40 l40,40 l40,0 Z" fill= "{StaticResource Pathfill}" horizontalalignment= "Center" verticalalignment= "Center"/>
68. </Button.Content>
70. </Button>
74. </StackPanel>
78. <mediaelement x:name= "Me" grid.column= "0"
80. Source= "2.mp4" autoplay= "False"/>
82. </Grid>

To illustrate, the graphics on each button are drawn on my hand, the content property is set to the path object to draw and fill the paths, in order to be concise, I use the path marking method, not urgent, I will introduce the article later.

Continue to write the code in the background, more simple, just a few methods of invocation.

1. private void Btnplay_click (object sender, RoutedEventArgs e)
2. {
3. This.me.Play ();
4. }
6. private void Btnpause_click (object sender, RoutedEventArgs e)
7. {
8. This.me.Pause ();
9. }
11. private void Btnstop_click (object sender, RoutedEventArgs e)
12. {
13. This.me.Stop ();
14. }

Use MediaElement and VideoBrush together.

This is our second exercise, VideoBrush is also a painting brush, but it is very special, it does not have a monochrome, no gradient color, it is used to fill the surface of the object with video, such as the background brush of the elements, foreground paint brush and so on.

VideoBrush as long as the SourceName property value is set to MediaElement name can, that is, VideoBrush source is from the MediaElement object, you can both use simultaneously, of course, If you only want to use VideoBrush, set MediaElement's visibility property to collapsed.

One thing to note, though, is that MediaElement and VideoBrush are used in your pages at the same time, but inside, they actually only read the data once, so the number of media files referenced depends only on the MediaElement class, No matter how many videobrush you use on the page, there is no impact on performance, before we said resources, I believe you remember, resources is to improve the reusability rate, do not have to create resources every time, otherwise it will greatly impair performance, the files in the project, said, you just set the build operation as a resource, It can be reused without saying that I assign a new instance every time I add a reference, which does not require that the resource instance be created only once and can be repeated for multiple references.

If you don't use resources, imagine how horrible it would be if a MP3 has 2000 bytes, and if you use it every time you need to make a new one in memory, if I'm using 100 of these objects at once, that's 100 * 2000 = 200000 bytes, so the memory is exhausted. But what if it's a resource? As long as it is created, has been the same reference, memory only allocates 2000 bytes for it, no matter you have 1000 in the same place in reference to it, pointing to the same piece of memory area, ha, do not know this explanation, enough to understand it?

OK, just blow here, here we practice another example, show Hello on TextBlock, but I hope the foreground of this textblock is not to fill with the color, but to fill it with video, so this text looks very vivid, yes, Did you think of the filter layer in Flash? But now you can easily implement it through the VideoBrush class.

2. <Grid>
4. <mediaelement x:name= "Me" source= "2.mp4" visibility= "collapsed"/>
6. <textblock x:name= "txt" text= "Hello" horizontalalignment= "Center" fontfamily= "Arial Black" fontsize= "250" textwrapping= "Wrap" >
8. <TextBlock.Foreground>
10. <videobrush alignmentx= "center" alignmenty= "center" stretch= "Uniform"
12. Sourcename= "Me"/>
14. </TextBlock.Foreground>
16. </TextBlock>
18. </Grid>

Remember the transformation and three-dimensional perspective that you said in the first two lectures? You might as well try your own, knowledge is through the "snowball" way to accumulate 1.1 points, so, I strongly recommend you to change the above code, the above two sections of the content and the content of this section to see if you can make a beautiful effect out.

Windows Phone Development (20): When MediaElement and VideoBrush work together,