如何:控制 MediaElement (播放、暫停、停止、音量和速度)
下列範例示範如何使用 MediaElement 控制媒體的播放。 此範例會建立簡單的媒體播放程式,讓您在媒體中播放、暫停、停止、前後跳過,以及調整音量和速度比例。
建立 UI
下列程式碼會建立 UI。
注意
MediaElement 的 LoadedBehavior 屬性必須設定為 Manual
,才能以互動方式停止、暫停和播放媒體。
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.MediaElementExample" >
<StackPanel Background="Black">
<!-- To interactively stop, pause, and play the media, the LoadedBehavior
property of the MediaElement must be set to "Manual". -->
<MediaElement Source="media\numbers.wmv" Name="myMediaElement"
Width="450" Height="250" LoadedBehavior="Manual" UnloadedBehavior="Stop" Stretch="Fill"
MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded"/>
<StackPanel HorizontalAlignment="Center" Width="450" Orientation="Horizontal">
<!-- Play button. -->
<Image Source="images\UI_play.gif" MouseDown="OnMouseDownPlayMedia" Margin="5" />
<!-- Pause button. -->
<Image Source="images\UI_pause.gif" MouseDown="OnMouseDownPauseMedia" Margin="5" />
<!-- Stop button. -->
<Image Source="images\UI_stop.gif" MouseDown="OnMouseDownStopMedia" Margin="5" />
<!-- Volume slider. This slider allows a Volume range between 0 and 1. -->
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="5" >Volume</TextBlock>
<Slider Name="volumeSlider" VerticalAlignment="Center" ValueChanged="ChangeMediaVolume"
Minimum="0" Maximum="1" Value="0.5" Width="70"/>
<!-- Volume slider. This slider allows you to change the speed of the media playback. -->
<TextBlock Foreground="White" Margin="5" VerticalAlignment="Center">Speed</TextBlock>
<Slider Name="speedRatioSlider" VerticalAlignment="Center" ValueChanged="ChangeMediaSpeedRatio"
Value="1" Width="70" />
<!-- Seek to slider. Ths slider allows you to jump to different parts of the media playback. -->
<TextBlock Foreground="White" Margin="5" VerticalAlignment="Center">Seek To</TextBlock>
<Slider Name="timelineSlider" Margin="5" ValueChanged="SeekToMediaPosition" Width="70"/>
</StackPanel>
</StackPanel>
</Page>
實作 UI 控制項
下列程式碼會實作範例 UI 控制項的功能。 Play、Pause 和 Stop 方法分別用來播放、暫停和停止媒體。 變更 MediaElement 的 Position 屬性可讓您在媒體中隨意跳過。 最後,使用 Volume 和 SpeedRatio 屬性來調整媒體的音量和播放速度。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Input;
namespace SDKSample
{
public partial class MediaElementExample : Page
{
// Play the media.
void OnMouseDownPlayMedia(object sender, MouseButtonEventArgs args)
{
// The Play method will begin the media if it is not currently active or
// resume media if it is paused. This has no effect if the media is
// already running.
myMediaElement.Play();
// Initialize the MediaElement property values.
InitializePropertyValues();
}
// Pause the media.
void OnMouseDownPauseMedia(object sender, MouseButtonEventArgs args)
{
// The Pause method pauses the media if it is currently running.
// The Play method can be used to resume.
myMediaElement.Pause();
}
// Stop the media.
void OnMouseDownStopMedia(object sender, MouseButtonEventArgs args)
{
// The Stop method stops and resets the media to be played from
// the beginning.
myMediaElement.Stop();
}
// Change the volume of the media.
private void ChangeMediaVolume(object sender, RoutedPropertyChangedEventArgs<double> args)
{
myMediaElement.Volume = (double)volumeSlider.Value;
}
// Change the speed of the media.
private void ChangeMediaSpeedRatio(object sender, RoutedPropertyChangedEventArgs<double> args)
{
myMediaElement.SpeedRatio = (double)speedRatioSlider.Value;
}
// 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;
}
// When the media playback is finished. Stop() the media to seek to media start.
private void Element_MediaEnded(object sender, EventArgs e)
{
myMediaElement.Stop();
}
// Jump to different parts of the media (seek to).
private void SeekToMediaPosition(object sender, RoutedPropertyChangedEventArgs<double> args)
{
int SliderValue = (int)timelineSlider.Value;
// Overloaded constructor takes the arguments days, hours, minutes, seconds, milliseconds.
// Create a TimeSpan with miliseconds equal to the slider value.
TimeSpan ts = new TimeSpan(0, 0, 0, 0, SliderValue);
myMediaElement.Position = ts;
}
void InitializePropertyValues()
{
// Set the media's starting Volume and SpeedRatio to the current value of the
// their respective slider controls.
myMediaElement.Volume = (double)volumeSlider.Value;
myMediaElement.SpeedRatio = (double)speedRatioSlider.Value;
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Imports System.Windows.Data
Imports System.Windows.Media
Imports System.Windows.Input
Namespace SDKSample
Partial Class MediaElementExample
Inherits Page
' Play the media.
Sub OnMouseDownPlayMedia(ByVal sender As Object, ByVal args As MouseButtonEventArgs)
' The Play method will begin the media if it is not currently active or
' resume media if it is paused. This has no effect if the media is
' already running.
myMediaElement.Play()
' Initialize the MediaElement property values.
InitializePropertyValues()
End Sub
' Pause the media.
Sub OnMouseDownPauseMedia(ByVal sender As Object, ByVal args As MouseButtonEventArgs)
' The Pause method pauses the media if it is currently running.
' The Play method can be used to resume.
myMediaElement.Pause()
End Sub
' Stop the media.
Sub OnMouseDownStopMedia(ByVal sender As Object, ByVal args As MouseButtonEventArgs)
' The Stop method stops and resets the media to be played from
' the beginning.
myMediaElement.Stop()
End Sub
' Change the volume of the media.
Private Sub ChangeMediaVolume(ByVal sender As Object, ByVal args As RoutedPropertyChangedEventArgs(Of Double))
myMediaElement.Volume = System.Convert.ToDouble(volumeSlider.Value)
End Sub
' Change the speed of the media.
Private Sub ChangeMediaSpeedRatio(ByVal sender As Object, ByVal args As RoutedPropertyChangedEventArgs(Of Double))
myMediaElement.SpeedRatio = System.Convert.ToDouble(speedRatioSlider.Value)
End Sub
' 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 args As RoutedEventArgs)
timelineSlider.Maximum = myMediaElement.NaturalDuration.TimeSpan.TotalMilliseconds
End Sub
' When the media playback is finished. Stop() the media to seek to media start.
Private Sub Element_MediaEnded(ByVal sender As Object, ByVal args As RoutedEventArgs)
myMediaElement.Stop()
End Sub
' Jump to different parts of the media (seek to).
Private Sub SeekToMediaPosition(ByVal sender As Object, ByVal args As RoutedPropertyChangedEventArgs(Of Double))
Dim SliderValue As Integer = CType(timelineSlider.Value, Integer)
' Overloaded constructor takes the arguments days, hours, minutes, seconds, milliseconds.
' Create a TimeSpan with miliseconds equal to the slider value.
Dim ts As New TimeSpan(0, 0, 0, 0, SliderValue)
myMediaElement.Position = ts
End Sub
' Set the media's starting Volume and SpeedRatio to the current value of the
' their respective slider controls.
Private Sub InitializePropertyValues()
myMediaElement.Volume = System.Convert.ToDouble(volumeSlider.Value)
myMediaElement.SpeedRatio = System.Convert.ToDouble(speedRatioSlider.Value)
End Sub
End Class
End Namespace 'SDKSample