Getting Started with Windows 8 style application development 21 building a simple media player

The Quick build Windows 8 style Application 20-mediaelement blog mentions how to use the MediaElement object to play the simple function of video, but it requires more complex features in practical applications, such as controls that control video playback, Full-screen mode, Progress bar and so on other functions.

The example in this blog post uses the media files contained in the application, and of course we can load a media file over the network or locally [using Fileopenpicker].

Sample code for Media Player in MSDN Download address: XAML media playback Sample.

Building a basic MediaElement control

First we create a MediaElement control and add it to the ContentControl object in order to enable the overall mode functionality.

The XAML code is as follows:

<contentcontrol x:name= "Videocontainer" keyup= "Videocontainer_keyup" horizontalcontentalignment= "Center" Verticalcontentalignment= "Center"  height= "grid.row=" 0 ">    
            <mediaelement name=" videomediaelement "Source=" video/azure_tmobile_500k.wmv "  
                              mediaopened=" videoelement_mediaopened "  
                              mediaended=" videomediaelement_mediaended "  
                              mediafailed=" videomediaelement_mediafailed "
                              currentstatechanged=" Videomediaelement_currentstatechanged "
                              postersource=" media/1.png "
                              autoplay=" False "/>    
</ Contentcontrol>

The source property of the MediaElement control points to the audio or video file that you want to play. , this property can be set to the URI of a file in the application or to a file on the network. Of course, we can also use the SetSource method to set the source to a file that is retrieved from the local system using the Fileopenpicker object.

The AutoPlay property specifies whether the media file will start playing after the MediaElement is loaded, and the default value is true.

The MediaElement control declares mediaopened, mediaended, currentstatechanged, and mediafailed events.

Finally, the Postersource property value is set, Postersource is an image that provides a visual display of the MediaElement control before the media is loaded.

Usually the Postersource is shown in the following cases:

1 A valid source is not set, for example: No source is set, source is set to NULL, or the source is invalid;

2 when loading media;

3 "Play to" the period of streaming playback;

Building Control MediaElement Playback controls

General control MediaElement playback including playback, stop and pause functions.

Common control MediaElement playback features include:

1) Stop: Call the Stop method;

2) Pause: Invoke Pause method;

3 Fast Forward: The value of the Defaultplaybackrate property of the MediaElement control is set to 2.0, which we can adjust to increase or decrease the speed of the fast-forward. Then, the handler invokes the play method;

4) Rewind: Set the value of the Defaultplaybackrate property of the MediaElement control to-2.0, and we can adjust this value to increase or decrease the rate of the rewind. Then, the handler invokes the play method;

5 playback: If the Defaultplaybackrate property value of the MediaElement control is not 1.0, the defaultplaybackrate is set to 1.0. The handler then invokes the play method.

6 Mute: Toggles the Ismuted property between true and false;

7 volume increase, Volume reduction: If ismuted is true, the volume mute is canceled, then the handler presses 0.1 to increase or decrease the volume property. Note: Volume levels range from 0.0 to 1.0;

The XAML code that corresponds to these control functions can be as follows:

<stackpanel orientation= "Horizontal" > <button name= "btnplay" click= "Btnplay_click" Style= "{St Aticresource Transportstyle} "content=" Play "/> <button name=" Btnpause "click=" Btnpause_click "St
            Yle= "{StaticResource Transportstyle}" content= "Pause"/> <button name= "btnstop" click= "Btnstop_click" Style= ' {StaticResource Transportstyle} ' content= ' Stop '/> <button name= ' btnreverse ' click= ' btnReverse_Cl Ick "style=" {StaticResource Transportstyle} "content=" Rewind "/>" <button name= "Btnforward" Click= "Btnforward_click" style= "{StaticResource Transportstyle}" content= "Forward"/> <button name= "btn Mute "click=" Btnmute_click "style=" {StaticResource Transportstyle} "content=" Mute "/> <button Nam E= "Btnfullscreentoggle" click= "Btnfullscreentoggle_click" style= "{StaticResource Transportstyle}" Content= "Ful L "/> <combObox name= "Cbaudiotracks" selectionchanged= "cbaudiotracks_selectionchanged" width= "a"/> <button name= "Btnvolumeup" click= "Btnvolumeup_click" style= "{StaticResource Transportstyle}" Content= "-"/> <button name= "Btnvolumedown" click= "Btnvolumedown_click" style= "{StaticResource TransportS Tyle} "content=" + "/> <textblock name=" Txtvolume "fontsize=" "text=" {Binding Volume, Element Name=videomediaelement} "verticalalignment= Center" horizontalalignment= "right"/> </stackpanel&gt ;