14.16. Media

One of Silverlight's biggest strengths is its media functionality. Silverlight has been used to stream media content on a number of high-profile sites such as the 2008 Beijing Olympics on NBC, Blockbuster Video, Netflix, and UK TV channel ITV.

Silverlight supports these formats:

  • Windows Media audio and video

  • MP3 audio

  • AAC

  • AVC

  • H.264/MPEG

  • HD formats (introduced in Silverlight 3.0)

Silverlight also supports a great feature called adaptive streaming that varies the quality (bit rate) of the media stream depending on the user's available bandwidth to obtain the best experience possible.

It's very easy to add video functionality to your application, so let's create a simple video player:

  1. Create a new folder called Media in your project.

  2. Right-click, and select Add New Item.

  3. Select Silverlight User Control, and call it MediaPlayerTest.

  4. Add the following XAML within the Grid tags:

    <Canvas Width="800" Height="600" Background="White">
    
      <MediaElement x:Name="MediaPlayer" Width="400" Height="300"
                    Source="/Robotica_720.wmv"></MediaElement>
    
      <Button x:Name="cmdPlay" Canvas.Left="50"  Canvas.Top="300" Width="150"
              Height="50" Content="Play"></Button>
      <Button x:Name="cmdStop" Canvas.Left="250"  Canvas.Top="300" Width="150"
              Height="50" Content="Stop"></Button>
      <Button x:Name="cmdPause" Canvas.Left="450"  Canvas.Top="300" Width="150"
              Height="50"  Content="Pause"></Button>
    </Canvas>

  5. Open ~/Media/MediaPlayerTest.xaml.cs, and replace the existing code with the following:

    public partial class MediaPlayerTest : UserControl
    {
        public MediaPlayerTest()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MediaTest_Loaded);
        }
    
        void MediaTest_Loaded(object sender, RoutedEventArgs e)
        {
            this.cmdPlay.Click += new RoutedEventHandler(cmdPlay_Click);
            this.cmdStop.Click += new RoutedEventHandler(cmdStop_Click);
            this.cmdPause.Click += new RoutedEventHandler(cmdPause_Click);
        }
    
        void cmdPause_Click(object sender, RoutedEventArgs e)
        {
            MediaPlayer.Pause();
        }
    
    
        void cmdStop_Click(object sender, RoutedEventArgs e)
        {
            MediaPlayer.Stop();
        }
    
        void cmdPlay_Click(object sender, RoutedEventArgs e)
        {
            MediaPlayer.Play();
        }
    }

  6. If you don't have a WMV file on hand (you will need to update the Source property of the media element), download a test file from the following URL (remember to unzip it), and place it in the media directory you created in the solution:

    http://download.microsoft.com/download/4/1/b/41b10a4f-f4f4-4692-aa44-a458d0047e91/Robotica_720.exe

  7. You now need to include this media file with the application or reference it. If you were developing a real-world application, you would want to reference it because it will make your Silverlight application smaller. In this example, to reduce the setup, just set the Build action to Resource.

  8. All that remains is to wire up the Media button on MediaMenu to take you to the player page, so open MainMenu.xaml.

  9. Add an event handler for the click of the Media button in MediaTest_Loaded:

    this.cmdMediaTest.Click += new RoutedEventHandler(cmdMediaTest_Click);

  10. Add the event handler code:

    void cmdMediaTest_Click(object sender, RoutedEventArgs e)
    {
        PageNavigator.LoadPage(new Media.MediaPlayerTest());
    }

  11. Press F5 to run your application, and click the Media button. You should see the WMV file playing. You can click the buttons to pause/play and stop the media player.

Silverlight contains rich-media functionality allowing you to jump to specific points on the video, alter playback speed, and so on.

You can even use media files as a brush to fill in XAML elements.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.51.153