Практическое руководство. Управление элементом "MediaElement" с помощью объекта "Storyboard"
Обновлен: Ноябрь 2007
В этом примере демонстрируется управление объектом MediaElement с помощью объекта MediaTimeline в объекте Storyboard.
Пример
При использовании объекта MediaTimeline в Storyboard для управления синхронизацией MediaElement функциональные возможности идентичны функциям других объектов Timeline, таких как анимация. Например, объект MediaTimeline использует свойства Timeline как свойство BeginTime, чтобы указать время запуска MediaElement (начало воспроизведения мультимедиа). Он также использует свойство Duration, чтобы указать время активности объекта MediaElement (длительность воспроизведения мультимедиа). Дополнительные сведения об использовании объектов Timeline с объектом Storyboard содержатся в разделе Общие сведения о Storyboard.
В этом примере демонстрируется создание простой программы воспроизведения мультимедиа, которая использует MediaTimeline для управления воспроизведением. Проигрыватель мультимедиа включает кнопки воспроизведения, паузы, возобновления и остановки. Проигрыватель также имеет элемент управления Slider, который действует как индикатор хода выполнения.
В следующем примере для проигрывателя создается пользовательский интерфейс.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
В следующем примере создается функциональная возможность для индикатора хода выполнения.
Imports System
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 'Element_MediaOpened
Private Sub MediaTimeChanged(ByVal sender As Object, ByVal e As EventArgs)
timelineSlider.Value = myMediaElement.Position.TotalMilliseconds
End Sub 'MediaTimeChanged
End Class 'MediaTimelineExample
End Namespace 'SDKSample
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;
}
}
}
Полный пример содержится в разделе Коллекция мультимедийных приложений.
См. также
Задачи
Коллекция мультимедийных приложений
Основные понятия
Общие сведения об анимации по ключевым кадрам
Общие сведения об эффектах анимации
Общие сведения о графике, анимации и мультимедиа WPF