101 Windows Phone 7 apps Reading Notes-subservient cat

Course Content

Ø playing video

Ø mediaelement

Subservient cat is a "virtual pet" ApplicationProgram. Unlike most cats, subservient cat is very obedient to the host's instructions! However, you need to know which commands can be responded. It also carries the components of the game, because users must discover these commands through their own exploration.

This application uses a video clip of a black cat named Boo as the main interface. Therefore, it is a good example to learn how to play a video in an application using the mediaelement control.

Playing video with mediaelement

If we want users to play, pause, and perform other control operations on the video, the best choice is to use the media player initiator. However, if you want to play the video content on the application page, you can choose to use mediaelement. Mediaelement is a UI control that can play video files through its source attribute. For example:

<Mediaelement source = "cat. wmv"/>

The path of the video source file can point to the file contained in the project or an online network video. By default, mediaelement automatically plays a video when it is loaded (for a network video, it starts playing as long as enough video streams are buffered). However, we can set the AutoPlay attribute to false to change this setting. BehindCode, We can use the play, pause, and stop methods of mediaelement. It also has the position attribute to indicate the current playback position (identified by the value of a time period ). In addition, if the video supports searching, we can set the position to a playback time point. Like other Silverlight elements, mediaelement supports transformation and cutting operations and can be mixed with other elements. From the interface, the mediaelement element is very direct. However, there are many things to explain. The following are five notes:

1. the frame of an application can only contain one mediaelement!

Using multiple mediaelements in a frame is not supported, and the program returns a failure. Note that this restriction is stricter than a page using a mediaelement. At any time, only one mediaelement can be loaded to a frame (whether the mediaelement is in the stopped, paused, or played State ). Therefore, each page can contain its own mediaelement only when multiple pages do not appear in the navigation stack at the same time. Otherwise, if we need to play multiple videos, We need to reuse the same mediaelement or remove the unused mediaelement from the element tree.

2. When you include a video to an application, make sure that the value of the build action attribute is set to content rather than resource!

This can improve the video startup performance. When a video file is embedded as a resource, the application compresses it before playing it, and temporarily stores it in an isolated bucket (for audio files used by mediaelement, also pay attention to this issue ).

3. When the mediaelement starts playing, any background audio (such as Zune's music) will be paused!

This is the main reason why mediaelement is not used to play sound effects. Note that even if the video file does not contain audio.

4. The mediaelement has a bug in the light topic of the simulator!

It sounds strange, but it is true. To test mediaelement on the simulator, make sure it runs under the dark topic. But don't worry. This problem does not exist in the real machine.

5. mediaelement cannot render completely opaque effects!

If other elements exist in mediaelement, you can view them clearly in the video, or even set the opacity attribute of mediaelement to 1 (the default value of this attribute is 1 ). This is an exception in merging between the Media Player of the mobile phone (rendering the video of mediaelement in it) and Silverlight. For more information, see media file formats supported by Windows Phone (the link is a http://goo.gl/6NhuD) to view the video formats supported by mediaelement; and the recommended video encoding parameter settings (the link is a http://goo.gl/ttPkO ), check which encoding method is most suitable for our application. If expression encoder is being used, you can use the preset parameters for Windows Phone (and Zune HD) to encode the video.

The User Interface

In addition to the overview page (not described here), The subservient cat application uses another page, that is, the home page. The root grid on the home page contains three different user controls, as shown in Figure 33.1.

1. mediaelement that contains video playback

2. A simple "intro screen" describes the commands that can be executed by cats. Then, the application will play the video clips corresponding to the commands.

3. A panel with text box allows users to guess New commands.

Figure 33.1 three main user controls on the home page

Note:

During the playback of a video on vivo, the mobile phone is in Landscape mode, so it is only a page in Landscape mode. However, the text box element is used to give users new guesses, so the code behind the page temporarily changes the supportedorientations attribute value of the page, so that when the focus is on the text box, both screen modes can be used. In this way, a mobile phone with a hardware keyboard can give users a better experience.

The explain application bar has three buttons: one for displaying the Command Input Panel, the other for navigating to the overview page, and the other for displaying the number of commands that the user has found (updated in the code behind it ). Click the last button to prompt us whether more commands are waiting for us to find out, because the total number of commands is a mystery for our users. The application bar menu is dynamically added by code. It contains a list of commands that you have found. When you click any of the commands, the cat performs the corresponding action. See Figure 33.2.

Figure 33.2 The application bar menu provides a quick list of discovered commands, such as "Yawn ".

Although the ghost application can play different video clips, it actually uses a single long video file (Cat. wmv) in terms of performance ). The code behind the video is responsible for selecting the appropriate video clip for playing.

Pipeline uses compositetransform to move and expand the mediaelement, because the header and tail of the "cat. wmv" source file have some black bars we don't want to see.

Volume attribute of ➔ mediaelement (the value range is 0 ~ 1) is set to 1 (maximum volume) because its default value is 0.85. Although the playing sound can only reach the value set by the user, this ensures that the details of the video file (short-term "meow" sound) can also be heard.

Note: ensure that you name the mediaelement element!

If we do not name it, it is possible that the marketplace release review process will not find that you are using mediaelement, so it will not ensure that our application has the "media library" capability, this capability is required for this application.

The Code-behind

The constructor on the overview page uses the possiblecommands method to generate an instruction set that can be recognized by cats. The accompanying sound of this Instruction Set is represented by its start time and End Time in the "cat. wmv" file.

In onnavigatedto event processing, the worker uses commands that have been found before to fill in the Application bar menu. These commands are stored in discoveredcommands, and discoveredcommands is saved as a setting.

Zookeeper and so on. The number of discoveredcommands sets is determined based on which image is used.

When the clip is loaded on the page, the video starts to play automatically (because the AutoPlay attribute in the Code is not set to false), but we do not want to play the whole video to show all the actions of the cat. Instead, we should only play the first 1.5 seconds of the video. Therefore, in the mediaopened event processing function of mediaelement (this event is triggered when a media file is loaded and ready to be played), we use videotimer to pause the video 1.48 seconds later. This pause is completed in videotimer_tick, the tick event processing function of videotimer.

Note: videos can be played in mediaelement only when the mediaopened event is triggered!

After the source file of mediaelement is set (it can be completed in The XAML or the code behind it), we cannot interact with the media file immediately. Instead, we must wait for the mediaopened event to be triggered. If media files cannot be loaded for some reason, the mediafailed event will be triggered. The subservient cat application does not use the method of manually calling play because it uses the automatic playback feature of mediaelement. However, if you do not use the automatic playback feature, you must call the play method in the mediaelement_mediaopened event handler.

Note: Why can't videos on the mobile phone be played after the mobile phone is connected to Zune on the PC?

This is actually explained in the previous chapter. Zune is a desktop application that locks the mobile phone's media library, which causes mediaelement to fail to load media files. Remember, if you need to debug video playback functions in the application, you can use the Windows Phone connect tool provided in Windows Phone Developer Tools to connect to your mobile phone, instead of connecting to your mobile phone through Zune.

In the subservient cat application, we can detect this situation through the mediafailed event. Of course, we assume that this is due to Zune connection, because for applications, the video file is a local file.

The pause playclip method can pause the video, return to the start time specified by the begintime parameter, and re-Initialize videotimer so that the video can be stopped at the end time specified by the endtime parameter. However, setting the position of the mediaelement will bring some unfriendly effects, such as the video moving forward quickly or quickly rolling back to the specified time point (rather than instant jump ), the application's overview page has hidden videos for this transition (we do not want to show which video clips are to be explored by users ). Position settings are completed in the begininvoke callback function so that the overview page can be displayed. If this is not the case, we will see what we don't want. The video latency is set to 2 seconds, during which you can browse the instruction on the overview page. We have no way to know the time actually consumed by the user, but 2 seconds is long enough.

Note: After the position parameter of mediaelement is set, the effect cannot be immediately displayed!

On the contrary, we can see a short video before or after the target time point, just like watching Fast forward or backward. Because the subservient cat application uses the method of temporarily using other elements to cover the video.

In the current Windows Phone version, the mediaelement element does not support marking. Using tags to differentiate individual video clips in a cat. WMV Video file is an ideal solution and can greatly reduce the processing code behind it. However, dispatchertimer is used to notify the application that the video has been played. This is an alternative. The following are two considerations:

1. The timer precision does not reach the "frame" level. The videos used by this application are buffered at the end of each clip to prevent lag caused by the videotimer tick event.

2. If we want to bring up a message box, the video file will continue playing in the background, but the tick event processing of the timer cannot be called. No matter how long the video is played, tick event processing can be restored until the message box is removed (MessageBox. Show is a blocking operation ). This is whySource codeFirst, use discoveredbutton_click to pause video playback.

When I started writing the subservient cat application, I called the stop method of mediaelement IN THE onnavigatedfrom event, because it is displayed on the overview page while the home page is in the stack, I am worried that unnecessary video playback will lead to performance degradation. However, it turns out that this worry is redundant, because when the page leaves, mediaelement will pause the played video. If we don't need this feature (for example, I want to hear the Video Playing Sound on other pages), we must append the mediaelement to a frame instead of a specific page.

Mediaelement and files in the isolated Bucket

If you want to play a file in an isolated bucket (for example, your application downloads and saves it here), you can call the setsource method of mediaelement, which takes a stream as the parameter, instead of a URI. With it, we can pass in a suitable isolatedstoragefilestream.