Windows Phone development (20): When mediaelement and videobrush work together

As mentioned above, all the controls are static and dumb. Are you interested in studying these controls? If yes, please come with me.

 

 

Mediaelement.

 

First, I would like to introduce mediaelement. Why? Because it is simple and true, you will certainly play it. However, mediaelement is powerful and can play audio and video in only supported formats.

To set the audio or video file to be played, you only need to set the source attribute, which is actually a URI. If you want to play the media file in your project, you need to add a media file to your project and set the file generation operation as a resource.

Are you sure you want to ask, can you play the media file directed by the URI of the network? Oh, you can try it.

If you don't need to talk about it, start to do exercises. First, you should bring your own 3GP or MP4 file. You can find one by yourself. Of course, you can also use other formats, because we watch the effect in the simulator, some common formats are used at last. Not all media files in the simulator can be supported. For details, see the SDK documentation.

Mediaelement is very easy to use. I will briefly talk about some of its common attributes. I believe you will understand it twice.
1. Source: the media file you want to play;
2. autoplay: whether to play automatically. Well, you know more about it than I do;
3. Balance: the volume ratio of the left and right audio channels in a stereo system. It is a balance value ranging from-1 to. Therefore, it is the default value;
4. Stretch: how to stretch or maintain the aspect ratio like the image control;
5. Volume: volume in the range of 0-1. The default value is 0.5.

Okay. Let's take a look at the layout of the first exercise.

 

 

<Phone: phoneapplicationpage. resources> <br/> <lineargradientbrush X: Key = "pathfill" startpoint = "0.5, 0" endpoint = "0.5, 1 "> <br/> <gradientstop color =" lightgreen "offset =" 0 "/> <br/> <gradientstop color =" orange "offset =" 1 "/> <br/> </lineargradientbrush> <br/> <style X: key = "btnstyle" targettype = "button"> <br/> <setter property = "height" value = "80"/> <br/> <setter property = "width" value = "80"/> <br/> <setter property = "horizontalcontentalignment" value = "stretch"/> <br/> <setter property = "verticalcontentalignment" value = "stretch "/> <br/> <setter property =" borderthickness "value =" 0 "/> <br/> </style> <br/> </phone: phoneapplicationpage. resources> <br/> <grid. columndefinitions> <br/> <columndefinition width = "*"/> <br/> <columndefinition width = "Auto"/> <br/> </grid. columndefinitions> <br/> <stackpanel orientation = "vertical" <br/> grid. column = "1"> <br/> <button name = "btnplay" style = "{staticresource btnstyle}" Click = "btnplay_click"> <br/> <button. content> <br/> <path data = "M0, 0 l0, 40 L40, 20 Z "fill =" {staticresource pathfill} "horizontalalignment =" center "verticalignment =" center "/> <br/> </button. content> <br/> </button> <br/> <button name = "btnpause" style = "{staticresource btnstyle}" Click = "btnpause_click"> <br/> <button. content> <br/> <path data = "M0, 0 l0, 40 L15, 40 L15, 0 z M25, 0 L25, 40 L40, 40 L40, 0 "fill =" {staticresource pathfill} "horizontalalignment =" center "verticalignment =" center "/> <br/> </button. content> <br/> </button> <br/> <button name = "btnstop" style = "{staticresource btnstyle}" Click = "btnstop_click"> <br/> <button. content> <br/> <path data = "M0, 0 l0, 40 L40, 40 L40, 0 z "fill =" {staticresource pathfill} "horizontalalignment =" center "verticalignment =" center "/> <br/> </button. content> <br/> </button> </P> <p> </stackpanel> </P> <p> <mediaelement X: Name = "me" grid. column = "0" <br/> source = "2.mp4" autoplay = "false"/> <br/> </GRID>

 

 

Note: The images on each button are hand-painted. You can draw and fill the path when the content attribute is set to the path object. to be concise, I used the path TAG method, so don't worry, myArticle.

ContinueCodeAfter writing, it's easier to call several methods.

 

Private void btnplay_click (Object sender, routedeventargs e) <br/>{< br/> This. me. play (); <br/>}</P> <p> private void btnpause_click (Object sender, routedeventargs e) <br/>{< br/> This. me. pause (); <br/>}</P> <p> private void btnstop_click (Object sender, routedeventargs e) <br/>{< br/> This. me. stop (); <br/>}

 

 

 

 

Use mediaelement and videobrush in combination.

 

This is our second exercise. videobrush is also a type of painting brush, but it is very special. It does not use a monochrome color or gradient color. It uses videos to fill the object surface, for example, the background painter and foreground painter of an element.

Videobrush only needs to set the value of sourcename to the name of mediaelement. That is to say, the source of videobrush is a mediaelement object. You can use both. Of course, if you only want to use videobrush, set the visibility attribute of mediaelement to collapsed.

One thing to note is that although mediaelement and videobrush are used on your page at the same time, data is actually read only once within the page, the number of media files to be referenced depends only on the mediaelement class. No matter how many videobrushes you use on the page, the performance is not affected. We have mentioned the resource before. I believe you will remember that, resources are used to increase the reusability rate. You do not need to create resources every time. Otherwise, the performance will be greatly impaired. As mentioned above, you only need to set the generation operation as a resource, it can be used repeatedly, instead of allocating a new instance every time I add a reference. This is not required. You only need to create a resource instance once, and it can be used for multiple repeated references.

If you don't use resources, you can imagine how terrible it is. Assume that an MP3 file contains 2000 bytes. If every time you use it, you need to add a new one in the memory, if I use 100 objects at the same time, it is 100*2000 = 200000 bytes, so the memory is exhausted by you. What if it is a resource? As long as it is created, it is always the same reference. The memory only allocates 2000 bytes for it. No matter if you reference it in 1000 places at the same time, it points to the same memory area, ha, I don't know. Isn't that easy to understand?

OK. Let's take another example and show hello on textblock. But I hope the foreground of this textblock is not filled by color, but by video, this text looks like it is colorful, right? Do you think of the filter layer in flash? But now you can easily implement it through the videobrush class.

 

<Grid> <br/> <mediaelement X: Name = "me" Source = "2.mp4" visibility = "Collapsed"/> <br/> <textblock X: name = "TXT" text = "hello" horizontalalignment = "center" fontfamily = "Arial black" fontsize = "250" textwrapping = "Wrap"> <br/> <textblock. foreground> <br/> <videobrush alignmentx = "center" alignmenty = "center" stretch = "Uniform" <br/> sourcename = "me"/> <br/> </ textblock. foreground> <br/> </textblock> <br/> </GRID>

 

 

Do you still remember the transformations and 3D pivoting mentioned in the previous two classes? You may try it by yourself. The knowledge is accumulated at through the "snowball rolling" method. Therefore, I strongly recommend that you change the above Code, combine the content of the last two sections with the content of this section to see if you can make special effects.