Partilhar via

Como controlar um MediaElement usando um Storyboard

  • Artigo

Este exemplo mostra como controlar um MediaElement usando um MediaTimeline em um Storyboard.

Exemplo

Quando você usa um MediaTimeline em um Storyboard para controlar o tempo de um MediaElement, a funcionalidade é idêntica à funcionalidade de outros objetos Timeline, como animações. Por exemplo, um MediaTimeline usa propriedades Timeline como a propriedade BeginTime para especificar quando iniciar um MediaElement (iniciar a reprodução de mídia). Ele também usa a propriedade Duration para especificar por quanto tempo o MediaElement está ativo (duração da reprodução de mídia). Para obter mais informações sobre como usar objetos Timeline com um Storyboard, consulte Visão geral do Storyboards.

Este exemplo mostra como criar um media player simples que usa um MediaTimeline para controlar a reprodução. O media player inclui botões de reprodução, pausa, retomada e parada. O jogador também possui um controlo Slider que funciona como uma barra de progresso.

O exemplo a seguir cria a interface do usuário (UI) para o media player.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  x:Class="SDKSample.MediaTimelineExample" >

  <StackPanel Background="Black">

    <MediaElement Name="myMediaElement" MediaOpened="Element_MediaOpened"
     Width="260" Height="150" Stretch="Fill" />

    <!-- Button controls for play, pause, resume, and stop. -->
  <StackPanel HorizontalAlignment="Center" Width="260" Orientation="Horizontal">
    <Image Name="PlayButton" Source="images\UI_play.gif" Margin="30,10,10,10" />
    <Image Name="PauseButton" Source="images\UI_pause.gif" Margin="10" />
    <Image Name="ResumeButton" Source="images\UI_resume.gif" Margin="10" />
    <Image Name="StopButton" Source="images\UI_stop.gif" Margin="10" />
  </StackPanel>

  <!-- Ths slider shows the progress of the media. -->
  <Slider Name="timelineSlider" Margin="5" Width="250" HorizontalAlignment="Center"/>

  <StackPanel.Triggers>
    <EventTrigger RoutedEvent="Image.MouseDown" SourceName="PlayButton">
      <EventTrigger.Actions>
        <BeginStoryboard Name= "myBegin">
          
          <Storyboard SlipBehavior="Slip">

            <!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.  
                 For example, although the video clip (numbers.wmv) lasts longer, playback ends after six  
                 seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
            <MediaTimeline Source="media\numbers.wmv" Storyboard.TargetName="myMediaElement"  
             BeginTime="0:0:0" Duration="0:0:6" CurrentTimeInvalidated="MediaTimeChanged" />
            
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>

    <!-- These triggers impliment the functionality of the Pause, Resume
         and Stop buttons.-->
    <EventTrigger RoutedEvent="Image.MouseDown" SourceName="PauseButton">
      <EventTrigger.Actions>
        <PauseStoryboard BeginStoryboardName="myBegin" />
      </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseDown" SourceName="ResumeButton">
      <EventTrigger.Actions>
        <ResumeStoryboard BeginStoryboardName="myBegin" />
      </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseDown" SourceName="StopButton">
      <EventTrigger.Actions>
        <StopStoryboard BeginStoryboardName="myBegin" />
      </EventTrigger.Actions>
    </EventTrigger>
  </StackPanel.Triggers>
  
</StackPanel>
</Page>

O exemplo a seguir cria a funcionalidade para a barra de progresso.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace SDKSample
{

    public partial class MediaTimelineExample : Page
    {
        // When the media opens, initialize the "Seek To" slider maximum value
        // to the total number of miliseconds in the length of the media clip.
        private void Element_MediaOpened(object sender, EventArgs e)
        {
            timelineSlider.Maximum = myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds;
        }

        private void MediaTimeChanged(object sender, EventArgs e)
        {
            timelineSlider.Value = myMediaElement.Position.TotalMilliseconds;
        }
    }
}

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media


Namespace SDKSample

    Partial Class MediaTimelineExample
        Inherits Page
        ' When the media opens, initialize the "Seek To" slider maximum value
        ' to the total number of miliseconds in the length of the media clip.
        Private Sub Element_MediaOpened(ByVal sender As Object, ByVal e As RoutedEventArgs)
            timelineSlider.Maximum = myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds

        End Sub


        Private Sub MediaTimeChanged(ByVal sender As Object, ByVal e As EventArgs)
            timelineSlider.Value = myMediaElement.Position.TotalMilliseconds

        End Sub
    End Class
End Namespace 'SDKSample

Ver também