Статьи

Создание простого медиаплеера для Windows Phone 7

Январь 12, 2019

В этом уроке я создам простое приложение Media Player для воспроизведения различных видео (например, в формате .wmv). Я собираюсь использовать элемент управления MediaElement в качестве медиа-контейнера для игрока. Я также создам несколько кнопок для управления потоком видео (Play, Pause, Stop) и индикатор выполнения, показывающий текущий прогресс. В конце этого урока я покажу альтернативный способ воспроизведения медиапотока с помощью MediaPlayerLauncher.

Исходный код

Дополнительная информация

1. Создание нового проекта

Прежде всего вам нужно создать новый проект. Для этого откройте Visual Studio 2010 -> Файл -> Новый проект -> выберите там приложение Windows Phone, как показано на рисунке ниже.

 

2. Добавление значков в решение

Теперь нам нужно добавить три иконки для Media Player: значок воспроизведения, паузы и остановки в наш проект. Вы можете скачать иконки отсюда или создать свои собственные. Убедитесь, что свойство «Build Action» имеет значение « Content », а свойство «Copy to output directory» переключено на « Copy if newer ». Проверьте изображение ниже для лучшего понимания.

 

3. Изменение XAML: ориентация

В MainPage.xaml переключите атрибут SupportedOrientations элемента PhoneApplicationPage на PortraitOrLandscape .

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

4. Изменение XAML: ContentGrid

В MainPage.xaml добавьте элемент управления MediaElement и индикатор выполнения в ContentGrid. Установите для свойства AutoPlay MediaElement значение true. Не забудьте добавить RowDefinitions в сетку, чтобы в будущем можно было автоматически изменять размеры элементов управления.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>
    <MediaElement Name="myMediaElement" AutoPlay="True" Grid.Row="0" />
    <ProgressBar Name="pbVideo" Grid.Row="1" />
</Grid>

5. Изменение XAML: ApplicationBar

Далее нам нужно создать ApplicationBar в MainPage.xaml. Панель приложений будет содержать 3 кнопки для работы с медиа-контентом: воспроизведение, пауза, остановка. Для этого я использовал следующий XAML:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" >
        <shell:ApplicationBarIconButton IconUri="/icons/play.png" Click="Play_Click"  Text="Play"/>
        <shell:ApplicationBarIconButton IconUri="/icons/pause.png" Click="Pause_Click"  Text="Stop"/>
        <shell:ApplicationBarIconButton IconUri="/icons/stop.png" Click="Stop_Click" Text="Stop"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

6. Добавление функциональности

Наконец, мы должны изменить файл MainPage.xaml.cs, чтобы добавить функциональность для событий. Код очень прост, поэтому я не буду описывать его подробно. Обратите внимание, что я использовал объект DispatcherTimer для обновления индикатора выполнения.

public partial class MainPage : PhoneApplicationPage
{
    // varibles and properties
    DispatcherTimer currentPosition = new DispatcherTimer();
 
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
    }
 
    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        myMediaElement.MediaOpened += new RoutedEventHandler(myMediaElement_MediaOpened);
        myMediaElement.MediaEnded += new RoutedEventHandler(myMediaElement_MediaEnded);
        myMediaElement.CurrentStateChanged += new RoutedEventHandler(myMediaElement_CurrentStateChanged);
        currentPosition.Tick += new EventHandler(currentPosition_Tick);
 
        myMediaElement.Source = new Uri("http://ecn.channel9.msdn.com/o9/ch9/4807/574807/ISWPE05SLToolKitForWP_ch9.wmv", UriKind.Absolute);
    }
 
    void myMediaElement_CurrentStateChanged(object sender, RoutedEventArgs e)
    {
        if (myMediaElement.CurrentState == MediaElementState.Playing)
        {
            currentPosition.Start();
            ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = false; // play
            ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = true;  // pause
            ((ApplicationBarIconButton)ApplicationBar.Buttons[2]).IsEnabled = true;  // stop
        }
        else if (myMediaElement.CurrentState == MediaElementState.Paused)
        {
            currentPosition.Stop();
            ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = true; // play
            ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = false;  // pause
            ((ApplicationBarIconButton)ApplicationBar.Buttons[2]).IsEnabled = true;  // stop
        }
        else
        {
            currentPosition.Stop();
            ((ApplicationBarIconButton)ApplicationBar.Buttons[0]).IsEnabled = true; // play
            ((ApplicationBarIconButton)ApplicationBar.Buttons[1]).IsEnabled = false;  // pause
            ((ApplicationBarIconButton)ApplicationBar.Buttons[2]).IsEnabled = false;  // stop
        }
    }
 
    void myMediaElement_MediaEnded(object sender, RoutedEventArgs e)
    {
        myMediaElement.Stop();
    }
 
    void myMediaElement_MediaOpened(object sender, RoutedEventArgs e)
    {
        pbVideo.Maximum = (int)myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;
        myMediaElement.Play();
    }
 
    void currentPosition_Tick(object sender, EventArgs e)
    {
        pbVideo.Value = (int)myMediaElement.Position.TotalMilliseconds;
    }
 
    private void Play_Click(object sender, EventArgs e)
    {
        myMediaElement.Play();
    }
 
    private void Pause_Click(object sender, EventArgs e)
    {
        myMediaElement.Pause();
    }
 
    private void Stop_Click(object sender, EventArgs e)
    {
        myMediaElement.Stop();
    }
 
}

Альтернативный способ: использование MediaPlayerLauncher

Еще один способ открыть медиапоток — использовать MediaPlayerLauncher . Этот класс находится в пространстве имен Microsoft.Phone.Tasks. Чтобы открыть поток мультимедиа с помощью MediaPlayerLauncher, вам просто нужно указать свойство Media и вызвать метод Show () (см. Код ниже).

MediaPlayerLauncher mediaPlayerLauncher = new MediaPlayerLauncher() { Media = new Uri("http://ecn.channel9.msdn.com/o9/ch9/4807/574807/ISWPE05SLToolKitForWP_ch9.wmv", UriKind.Absolute) };
mediaPlayerLauncher.Show();

Сразу после вызова метода Show откроется приложение Windows Phone Media Player с отображением указанного видео. Результат будет похож на изображение ниже. Если вы нажмете кнопку «Назад», вы вернетесь к своему приложению.

Источник: http://www.eugenedotnet.com/2010/09/w12-creating-a-simple-media-player-for-windows-phone-7/

29
Share: