Video Playback in Windows Phone 7

Video Playback in Windows Phone 7

The mediaelement control must be added for video playback on Windows Phone 7. Add the following code in XAML:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">    <MediaElement x:Name="media" HorizontalAlignment="Stretch" AutoPlay="True"VerticalAlignment="Stretch" Stretch="Uniform"/></Grid>

The preceding Code adds a mediaelement control to the grid.

 

Two important attribute settings:

StretchAttribute:It is very important, especially when using multimedia elements, such as examples. Stretching determines how the content is resized to fill its allocated space. Possible options for stretching are:

BytesNone-Original content size

BytesFill-The content is adjusted to fill up the entire size without saving the aspect ratio of the screen.

BytesUniform-The content is adjusted to fill in the destination size, that is, the endpoint that can be reached, and it will save its original screen aspect ratio.

BytesUniformtofill-When the content is adjusted to the target, it will save its original screen aspect ratio. If necessary, the content will be cropped to meet the requirements.

The above is the code implementation method. You can also manually drag the control to design the layout.

AutoplayAttribute:Indicates whether the video is automatically played.

AddMediaelement After the control, the video is loaded when the page is loaded. Therefore,LoadedEvent. Generally, the loaded event is registered in the page constructor. The Code is as follows:

Public video () {initializecomponent (); this. Loaded + = new routedeventhandler (video_loaded); // double-click the tab key to automatically generate a response function. }

After registering an event, you can write the video playback Code. The Code is as follows:

Private void video_loaded (Object sender, routedeventargs e) {If (navigationcontext. querystring. count> 0) {try {// set the source file path of the video, that is, the path of the video to be played myvideo. source = new uri (navigationcontext. querystring ["videourl"], urikind. relative); // sets the video location myvideo. position = timespan. frommilliseconds (0); // play the video myvideo. play ();} catch (exception ex) {MessageBox. show (ex. tostring ());}}}

After the above Code is complete, you need to complete the code to navigate to the video playback page.

On the homepage (set this document to mainpage. XAML)

We use the alias navigation method to navigate to the video playback page, and we need to pass a parameter, which is used to pass the relative path of the video to play. Add the following code to app. XAML:

 <Application.Resources>        <nav:UriMapper x:Key="UriMapper">            <nav:UriMapper.UriMappings>                <nav:UriMapping  Uri="MyVideo/{myvideo}" MappedUri="/Views/Video/Video.xaml?VideoUrl=Resouces/Video/{myvideo}" />            </nav:UriMapper.UriMappings>        </nav:UriMapper>    </Application.Resources>

Then add the following code to app. XAML. CS:

this.RootFrame.UriMapper = Resources["UriMapper"] as UriMapper;

After the preceding steps are completed, only the navigation code is displayed.

Add a hyperlinkbutton control with the following code:

<Hyperlinkbutton content = "" Height = "30" horizontalalignment = "Left" margin = ", 74, 200 "name =" videohyperlinkbutton "verticalignment =" TOP "width =" "navigateuri =" myvideo/video2.wmv "/>

The above Code indicates that a video file with the path resouces/Video/video2.wmv is passed.

After completing the above work, you will be notified of the Code. Click the hyperlinkbutton control (content = "") to play the video. (The audio playback function is exactly the same as the process above ).

The last picture is attached:

For the above content, refer to the video of Jake Lin.

(All Rights Reserved. For details, refer to the source)